Rich Content; Structured data for Open Graph, Twitter Cards, Rich Pin

Adding Rich Content to Joomla articles created with F2C has become very easy with the Form2Content Metadata Injector plugin.

Download and install the plugin

Please download the plugin here and install on your website using the Joomla extension installer.

Using the plugin

The plugin uses a custom Form2Content template to create the metadata. You need to create the actual metadata, see example below.

The filename should be: "metadata_injector_contenttype_5.tpl" where the number is the F2C Content type ID.
The file should be saved in < root >/media/com_form2content/templates.

IMPORTANT: If you want to change the Joomla Article METADATA for Title, Alias, Meta keywords and Meta description you need to use the Form2Content Metadata Plugin. This plugin overrides the values in the JAM database.

Rich snippets / microdata

It's important to understand that adding microdata from scheme.org is done in the ARTICLE CONTENT and not the metadata! As such you can add microdata via the F2C Article Templates.

Example and documentation: https://developers.google.com/+/web/snippet/

Structured content or Rich Content

Adding Rich Content metadata to your Joomla articles will tell the different social media which images, descriptions or titles they should display when linking to your website.
The different social media use different met tags to identify the rich content. The following links provide documentation and examples. Please note that several social media recognize links from others.

Facebook Open Graph: http://ogp.me/

Twitter Cards: https://dev.twitter.com/cards/types/summary-large-image

Pinterest Rich Pins: https://developers.pinterest.com/rich_pins_overview/

You can also test your page if the structured content is added correctly

Facebook (Open Graph): https://developers.facebook.com/tools/debug/

Google (Structured Data): https://developers.google.com/structured-data/testing-tool/

Form2Content Rich Content metadata template example

The code below is a Form2Content template used by the F2C Metadata Injector plugin to add the metadata to Joomla articles created using F2C. The filename is metadata_injector_contenttype_5.tpl where the number is the F2C Content type ID. The file should be saved in < root >/media/com_form2content/templates.

In the below example the first image of the gallery field is used for the image url. Of course you can use the image field also.

<meta property="og:title" content="{$JOOMLA_TITLE}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.safari-planner.com{$JOOMLA_ARTICLE_LINK_SEF}" />
<meta property="og:locale" content="nl_NL" />
{if $GALLERY_IMAGES[0].FILENAME}
<meta property="og:image" content="{$GALLERY_URL_ABSOLUTE}{$GALLERY_IMAGES[0].FILENAME}" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="{$GALLERY_IMAGES[0].WIDTH}" />
<meta property="og:image:height" content="{$GALLERY_IMAGES[0].HEIGHT}" />
{/if}
{if $INTRO_TEKST}
<meta property="og:description" content="{$INTRO_TEKST}" />
{/if}
<meta property="og:site_name" content="Safari aanbod van grote en kleine reisorganisaties - safari-planner.com" />
<meta property="article:section" content="Toerisme" />
<meta property="article:tag" content="Safari, {$JOOMLA_CATEGORY_TITLE}" />

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@safari_planner">
<meta name="twitter:title" content="{$JOOMLA_TITLE}">
<meta name="twitter:description" content="{$INTRO_TEKST|truncate:200}">
<meta name="twitter:creator" content="@OSDWebsites">

<meta itemprop="name" content="{$JOOMLA_TITLE}">
{if $INTRO_TEKST}
<meta itemprop="description" content="{$INTRO_TEKST}">
{/if}
{if $GALLERY_IMAGES[0].FILENAME}
<meta itemprop="image" content="{$GALLERY_URL_ABSOLUTE}{$GALLERY_IMAGES[0].FILENAME}">
{/if}