Meta tags for social media optimization
Dec 1, 2018
Semantic web

Meta tags for social media optimization

All social media platforms automatically generate inline previews for links shared by users in their posts. Often, the previews display unrelated images or text that looks out of place. This happens to websites that have not been optimized for social media.

Social media referrals account for almost one third of all referral traffic. By optimizing their websites for social sharing platforms, webmasters can provide richer experience, increase engagement with the link shares, and bring more people to their websites.

How link previews are constructed

When someone shares a link to Twitter, Facebook or some other platform, the crawler scrapes the HTML of that URL. The scraper first looks for the meta tags containing the title, description, headline, preview image, and other information needed to construct the link preview box:

Depending on the platform, these boxes can be called article previews, link previews, (rich) cards, (rich) snippets, or rich pins.

If the page doesn't have the correct meta tags, the crawler uses its internal heuristics to extract the page information from the content. Most of the time, this won't guarantee the most optimal results.

Meta tags for major social media networks

Each platform offers guidelines about which meta tags should be used. They are often similar to each other and can be used together.

Below are the snippets of meta tags required by major social media platforms. Copy and paste these snippets into the head tag of HTML templates, replacing the text with your own content.

Facebook

<meta property="og:url" content="https://cofactor.io/blog/c/11c2s_xk5x" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Meta tags for social media optimization" />
<meta property="og:description" content="This post examines what meta tags are and how they should be used for social media optimization." />
<meta property="og:image" content="https://cofactor.io/a069a748255af9a75cc13b756043ff2b.png" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="418" />

Twitter

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@cofactor_io" />
<meta name="twitter:creator" content="@AntonVasetenkov" />
<meta name="twitter:title" content="Meta tags for social media optimization" />
<meta name="twitter:description" content="This post examines what meta tags are and how they should be used for social media optimization." />
<meta name="twitter:image" content="https://cofactor.io/a069a748255af9a75cc13b756043ff2b.png" />

LinkedIn

<meta name="title" property="og:title" content="Meta tags for social media optimization" />
<meta property="og:type" content="article" />
<meta name="image" property="og:image" content="https://cofactor.io/a069a748255af9a75cc13b756043ff2b.png" />
<meta name="description" property="og:description" content="This post examines what meta tags are and how they should be used for social media optimization." />
<meta name="author" content="Anton Vasetenkov" />
<meta property="article:published_time" content="2018-12-01T00:00:00.000Z" />

Google Plus

<meta property="og:type" content="article" />
<meta property="og:title" content="Meta tags for social media optimization" />
<meta itemprop="og:headline" content="Meta tags for social media optimization" />
<meta property="og:image" content="https://cofactor.io/a069a748255af9a75cc13b756043ff2b.png" />
<meta property="og:description" content="This post examines what meta tags are and how they should be used for social media optimization." />

Pinterest

<meta property="og:type" content="article" />
<meta property="og:title" content="Meta tags for social media optimization" />
<meta property="og:description" content="This post examines what meta tags are and how they should be used." />
<meta property="og:url" content="https://cofactor.io/blog/c/11c2s_xk5x" />
<meta property="og:site_name" content="Cofactor.io" />
<meta property="article:published_time" content="2018-12-01T00:00:00.000Z" />
<meta property="article:author" content="Anton Vasetenkov" />

Debugging link previews

Making meta tags work can require some tweaking. Major platforms provide debugging tools to let webmasters test how the pages are seen by the scrapers. The tools recrawl the URLs provided and show which meta tags are found and if there are any errors or warnings.

Tools that can be used include:

Other important considerations

Preview images

The og:image and twitter:image should use images of size 800x418 or 1600x836. If the image dimensions are known upfront, they should be specified using the og:image:width and og:image:height tags. This will ensure that the image loads properly the first time the link is shared on Facebook, but may have no effect with other platforms.

The images should be either PNGs or JPGs. Most platforms can also understand GIFs, but only display the first frame of the animated image.

Pinterest has support for multiple og:image tags. When multiple high-resolution images are listed, the user has the ability to choose any of them when they save the link to their boards. Note that only up to 6 images can be used.

Facebook and Twitter process the linked images asynchronously. This means that the image may not be displayed on the card immediately after the link is posted on the platform for the first time.

Link content caching

When a link is shared for the first time, the crawler scrapes and caches the metadata from the URL. When changes are made to the meta content, subsequent attempts to share the page won't display the changes straight away. It can take as much as 30 days for the link details to update after the change. The cache can be invalidated manually using the Facebook Sharing Debugger and LinkedIn Post Inspector or programmatically (for Facebook only) using the Graph API.

Single page applications

All social sharing platforms inspect only the initial HTML content returned by the server. Single page applications need to make sure that the meta tags are server-side rendered so that they are visible to the crawlers.

Looking forward

Meta tags are key to the success of visitor acquisition through social media. Stay tuned to learn more about metadata and semantic markup, and how webmasters can leverage those techniques to help drive traffic to their websites.

References

Have feedback on this post? Let @cofactor_io know.
Need help? Contact us.
Auckland · New Zealand
© 2018 Cofactor Ltd.
Cofactor