Understanding Opengraph Metadata

Open Graph metadata is a standard for showing previews of your web pages across social media networks and in search engine results. It makes link previews and search results more visually informative and appealing. The standard emerged from Facebook and has been adopted by other social media networks, apps like Slack and Discord, and the major search engines.

Open Graph preview example

To ground our understanding of this metadata, let’s examine a recent blog post. When viewed at various social and search platforms, we see previews like this:

Here’s what this metadata might look like in our blog post. Note how it is generating general metadata (title, name description — these have always been around), OpenGraph (og:) tags for Facebook and general-purpose parsing, and then specialty ones like X, formerly known as Twitter. 

Typically, a Contentful customer is managing this content in Contentful, and rendering them in their website templates or layouts to generate the necessary code:

<!-- Primary Meta Tags --> <title>SEO & AI: Does generative AI mark the end for SEO? | Contentful</title> <meta name="title" content="SEO & AI: Does generative AI mark the end for SEO? | Contentful" /> <meta name="description" content="The future of SEO-led content is a hot topic after the introduction of Generative Artificial Intelligence (GAI) in search results. Let's assess the impact." />

<!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://www.contentful.com/blog/seo-and-ai-does-generative-ai-mark-the-end-for-seo/" /> <meta property="og:title" content="SEO & AI: Does generative AI mark the end for SEO? | Contentful" /> <meta property="og:description" content="The future of SEO-led content is a hot topic after the introduction of Generative Artificial Intelligence (GAI) in search results. Let's assess the impact." /> <meta property="og:image" content="https://metatags.io/images/meta-tags.png" />

<!-- Twitter aka X. Note the property names have not changed [yet] --> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:url" content="https://www.contentful.com/blog/seo-and-ai-does-generative-ai-mark-the-end-for-seo/" /> <meta property="twitter:title" content="SEO & AI: Does generative AI mark the end for SEO? | Contentful" /> <meta property="twitter:description" content="The future of SEO-led content is a hot topic after the introduction of Generative Artificial Intelligence (GAI) in search results. Let's assess the impact." /> <meta property="twitter:image" content="https://metatags.io/images/meta-tags.png" />

Modeling your content for Open Graph

Since many of the fields are the same for Open Graph and Twitter Cards, you can create a single set of fields to manage this content in Contentful so that content creators have an optimal balance between control and simplicity, improving speed and quality in their work.

Fields, validation, and optimization tips

Let’s look at a few properties that can be generated from your content once it’s managed in Contentful. Items in curly brackets represent variables in your preferred templating language to populate these tags in your web application.

These examples assume the SEO Content Type pattern described above.

Title

The title tag can be generated from the page title field, or an attached SEO title for more customization. In this example, it’s combined (concatenated) with the site name with a separator. 

<meta name="title" content="{entry title or SEO title} | {Site name}" /> <meta property="twitter:title" content="{entry title or SEO title} | {Site name}" /> <meta property="og:title" content="{entry title or SEO title} | {Site name}" />

URL

The URL field provides the canonical link the preview will point to. It’s common for entries in Contentful to store the slug, and have the URL constructed by your web application. 

<meta property="og:url" content="{domain}/{directory*}/{slug}" /> <meta property="twitter:url" content="{domain}/{directory}/{slug}" />

*{folder} here represents an URLI segment from your application routing, such as category, blog, date, etc. 

Image

Open Graph images add a lot of value to link previews, and is your opportunity for your brand to tell an additional story and make a strong first impression. 

The various social platforms and search engines have their own specifications for the image dimensions. Fortunately, the Contentful Images API can ensure you deliver the right one for each.

Example

<meta property="og:image" content="{og_image.url}?w=1200&h=630&fit=thumb&fm=jpg" /> <meta property="twitter:image" content="{og_image.url}?w=1200&h=675&fit=thumb&fm=jpg" />

In the above pseudo-code example, the URL of the image asset in the entry {og_image} is rendered, and some image parameters are added to deliver the image at the correct size, cropping, and format. 

Open Graph image delivery tips

• Open Graph images can be PNG or JPG format. 

• As of this writing, modern formats like WebP and AVIF are not supported universally for image previews.

• Learn how the Contentful Images API can help you deliver the right image to the various platforms, all from the same image, as shown above. Here is another example in a Codepen for various social platform formats.

• Creatively, this image can be the same image shown at the page itself. It is also an opportunity to get creative, adding text or illustrative elements to increase engagement. 

• Custom Open Graph images can be generated automatically through various methods, such as Vercel’s OG library, a pluggable DAM, or a dedicated service like BannerBear. 

• Consider requiring field validations on the Contentful side for essential fields such as title, slug, and description. This will ensure editors fill them out and that they follow the correct rules to ensure quality and predictable results in the various destinations.

• Add fallback conditional rules in your web application template code (often in a “layout” file for all pages) to ensure that link previews show something. 

• Contentful has launched some new AI Apps to help your editors populate, translate, and illustrate your SEO Open Graph fields.

See the Open Graph documentation and Twitter Card documentation for more details and types of previews for media like video and more.