-
Notifications
You must be signed in to change notification settings - Fork 1
SEO metadata
This page contains discussion and design related to SEO tagging of the website.
There are a number of schemes available for marking up documents with rich information.
These typically rely on meta tags in the head element, of the form:
<meta property='foo' content='bar'/>
OpenGraph is a neutral specification for content markup.
Twitter tagging is via Twitter cards. The focus will initially be Summary Card and Summary Card with Large Image.
Twitter provides its own tags, but can fall back to OpenGraph tags if these are not provided. It is proposed to test using the OpenGraph tags alone to avoid duplication of content on pages, unless different content is required for Twitter.
Cards can be validated using the Twitter cards validator.
Facebook largely uses OpenGraph markup, recommending the og:url, og:title, og:description, og:site_name and og:image fields are created. og:type and og:locale are also recommended, with og:locale:alternate if translations are available.
If Facebook Domain Insights are required, a valid fb:app_id should be provided.
Open Graph tagging can be validated using the Facebook Open Graph Object Debugger.
All pages should have the following tags added:
| Tag | Content | Default |
|---|---|---|
| og:url | -> | Canonical url for the page |
| og:title | -> | Title, as displayed in title tag |
| og:description | See below. Should be a couple of descriptive paragraphs, up to 200 characters (for clean rendering on Twitter and Facebook). | The text "The Open Data Institute catalyses open data culture to create economic, environmental & social value. It helps unlock supply, generates demand & shares knowledge to address local and global issues." |
| og:site_name | -> | "Open Data Institute" NB could be used to create title |
| og:image | An image | TBC |
| og:type | see below | "website" |
| twitter:card | either "summary" or "summary_large_image" | "summary" |
| twitter:site | Twitter handle of site | "@ODIHQ" |
The metamagic gem has been used to insert appropriate meta tags.
Defaults are set in the main application layout, in the call to metamagic.
Specialised versions are set in the views by calling meta.
A patched version of the slimmer gem has been created, as the
alphagov master does not copy across meta tags with property set, which is
needed for OpenGraph and Twitter meta markup.
Images have different requirements on each site:
| Site / format | Resolution | Notes |
|---|---|---|
| Facebook / Larger images | 600 x 315 | Ideally 1200 x 630 for higher resolution screens |
| Facebook / Smaller images | Less than 600 x 315, but greater than 200 x 200 | As close as possible to 1.91:1 aspect ratio. |
| Twitter / Summary card | Greater than 200 x 200 | Ideally 4:3 aspect ratio, and less than 1MB. Will be displayed 120x90 or 120x120 in embedded tweets. Should have main content in square section at centre. |
| Twitter / Summary card with large image | Greater than 280 x 150 | Image must be less than 1MB in size. |
Facebook images can be pre-cached in the debugger. Failing that, providing image height and width will enable more rapid rendering of the shared content.
The following content types are may require specific handling.
| Content type | View / Partial | Notes |
|---|---|---|
| Section | section/section |
See below |
| Team list | list/people |
|
| Case studies list | list/list |
|
| Culture list | content/culture_page |
|
| Culture collection | list/culture |
|
| Events list (upcoming or previous) | list\events |
|
| Lunchtime lecture list | list\lunchtime-lectures |
|
TO BE COMPLETED
Sections override the description with the content from the section description. This is set in the Section tag description field.
There are four sections: index, get-involved, about, dapaas-home.
NB - description ignored for the Index (based on @section['title'] == "Index")
in favour of default.
twitter:card | card type: either summary or summary_large_image
twitter:site | linked @username. this will be @odiHQ. If this isn't provided, need to provide twitter:site:id. May be some benefit to doing this in the event the handle may change?
twitter:creator | Handle of the content creator. Leave out or set to @odiHQ. Can also set the :id, per twitter:site
twitter:description | Max 200 character description of linked content. Falls back to og:description
twitter:title | Title of content - max 70 characters. Falls back to og:title
twitter:image | Image to associate with card. Can provide :width and :height as well. Falls back to og:image