Metadata and microdata

Providing additional information about the page and/or elements to help search engines intelligently display relevant content to users.

There are a number of microdata formats that should be used wherever appropriate to aid search engines to display the page content in a useful, relevant way.

Facebook Open Graph Stories and Twitter summary cards

To set what is displayed when a page is shared on Facebook and Twitter add the following meta tags within the head of document.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@[ Twitter username ]" />
<meta name="twitter:url" property="og:url" content="[ Page URL ]" />
<meta name="twitter:title" property="og:title" content="[ Page title ]" />
<meta name="twitter:description" property="og:description" content="[ Page description ]" />
<meta name="twitter:image" property="og:image" content="[ Social card image URL ]" />
<meta property="og:type" content="[ Type ]" />
<meta property="og:locale" content="[ Locale ]" />
<meta property="og:site_name" content="Aviva" />
<meta property="og:app_id" content="[ App id ]" />

Note:

  • [ Twitter username ]: The Twitter @username the card should be attributed to.
  • [ Page URL ]: The page url used must be the cannonical url.
  • [ Page title ]: A concise title for the related content, with a maximum of 70 characters.
  • [ Page description ]: A description that concisely summarizes the content, with a maximum of 200 characters. This must not be the same as the page title.
  • [ Social card image URL ]: The image must be the most prominent image that represents the content on the page, unless this does not crop well and then another appropriate image on the page should be chosen. If there is no appropriate image on the page then it should be set to the Abeille Assurances logo. The images must be at least 200px by 200px and less than 1MB in file size. Note this image will be cropped to a square for the twitter summary card. The image must be served via http not https otherwise it will not be loaded by Twitter or facebook. Never replace the image used here as Facebook caches any images once references, always use a new image url.
  • [ Locale ]: Allows setting of locale and language being supported eg. for the United Kingdom the value would be set to 'en_GB'. For a full reference of supported locales for Facebook see their internationalization documentation.

  • [ Type ]: will vary depending on page type:

    • website for general pages like the homepage.
    • article for rich consumable content such as editorial.
    • product.group for product listing/category pages.
    • product for individual product pages.
  • [ App id ]: This should be the Facebook app id for the website. If there is no Facebook app id do not include this tag.

If the article open graph story or Twitter summary card with large image is more appropriate for the content type update the 'twitter:card' content value from 'summary' to 'summary_large_image' and 'og:type' content value from 'website' to 'article'. The image provided must be at least 600px wide, 315px high.

It is recommended that where ever possible the Facebook Open Graph Stories and Twitter summary cards are combined to remove duplication in markup. If this is not suitable for the situation see the individual solutions below.

Facebook Open Graph Stories

To set what is displayed when a page is shared on Facebook add the following meta tags within the head of document.

<meta property="og:title" content="[ Page title ]" />
<meta property="og:url" content="[ Page url ]" />
<meta property="og:image" content="[ Image url ]" />
<meta property="og:type" content="[ Type ]" />
<meta property="og:locale" content="[ Locale ]" />
<meta property="og:site_name" content="Aviva" />
<meta property="og:app_id" content="[ App id ]" />

Read more about Facebook Open Graph Stories.

Twitter summary card

To set what is displayed when a page is shared on Twitter add the following meta tags within the head of document.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@[ Twitter username ]" />
<meta name="twitter:url" content="[ Page URL ]" />
<meta name="twitter:title" content="[ Page title ]" />
<meta name="twitter:description" content="[ Page description ]" />
<meta name="twitter:image" content="[ Social card image URL ]" />

Twitter summary card with large image

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@[ Twitter username ]" />
<meta name="twitter:url" content="[ Page URL ]" />
<meta name="twitter:title" content="[ Page title ]" />
<meta name="twitter:description" content="[ Page description ]" />
<meta name="twitter:image" content="[ Social card image URL ]" />

Read more about Twitter summary cards.

Site search

Allows users to search the site directly from within a Google search. This markup is only required on the homepage of the website.

<form action="./search/" method="get" role="search" id="search" itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
	<fieldset>
		<legend>Search</legend>
		<meta itemprop="target" content="https://www.aviva.co.uk/search/?q={q}"/>
		<label for="q">Search site</label>
		<input type="search" name="q" id="q" value=""  itemprop="query-input"/>
		<input type="submit" name="..." id="..." value="Search" />
	</fieldset>
</form>

Breadcrumb

<p itemscope itemtype="https://schema.org/BreadcrumbList">
	<span>You are currently within </span>
	<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<meta itemprop="position" content="1"/>
		<a href="./" itemprop="item">
			<span itemprop="name">Abeille Assurances UK Public Homepage</span>
		</a>
	</span>
	<span>&gt;</span>
	<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<meta itemprop="position" content="2"/>
		<a href="./insurance/" itemprop="item">
			<span itemprop="name">Insurance</span>
		</a>
	</span>
	<span>&gt;</span>
	<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<meta itemprop="position" content="3"/>
		<a href="./insurance/motor/" itemprop="item">
			<span itemprop="name">Motor insurance </span>
		</a>
	</span>
	<span>&gt;</span>
	<span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<meta itemprop="position" content="4"/>
		<span itemprop="name">AvivaPlus Car Insurance</span>
	</span>
</p>

See the wayfinder component for the Framework implementation. See the breadcrumb schema specification for more details.

Other schemas