Shareable with Open Graph and Twitter Cards

December 8, 2016

Tags: Open Graph, Twitter.

When sharing content across social media platforms, Open Graph and Twitter Card Tags (Twitter's extension of Open Graph) can be used to optimize how information is displayed.

With Open Graph, you can specify aspects of your Facebook or LinkedIn post such as the title, image, and description. On a page without Open Graph tags, the Facebook or LinkedIn crawler will guess which pieces of content to use for each area, although it generally seems to do a good job. More information is available at https://developers.facebook.com/docs/sharing/best-practices#tags and https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en

Additionally, when you share a link on Facebook, the crawler will visit the URL to get the metadata. The crawler must see an image before it is displayed. That means the first person to share a piece of content will not see the image. Anoth benefit of using Open Tags is that specifying an image height and width will force Facebook to scrape the image immediately instead of queuing the page to be crawled.

Twitter has a number of Cards available, which are essentially different arrangements of an image and text for different types of content. Twitter extends Open Tags with it's own tags, and can fall back to certain Open Tags. You can get an overview on their developer page: https://dev.twitter.com/cards/overview

Since Open Tags need to be used for Facebook and LinkedIn, and Twitter falls back to them, we can avoid duplication by including as many Open Tags as possible and then including the additional Twitter Card tags to meet requirements.

For the site I am working on, we only use tags on Blog posts. These are the only pages where large images and descriptions can be maintained with consistency.

In Drupal, install the MetaTags module with the Open Graph and Twitter Cards sub-modules.

Configure Metatag settings at "/admin/config/search/metatags".
Under Global specify the Site's Twitter Account. Since this setting specifies the account that represents the entire site, it can only be set under Global.
Add a Default Meta Tag for the content type that you want to customize the tags for.

Now edit the tags for this content type. Here are basic fields and tokens to use:

Content Type: Article
Page URL: [current-page:url]
Content title: [node:title]
Content description: [node:summary]
Image: [node:node_image] (This is an image field within your content type)
Image width: 930 (The width of your image)
Image height: 400 (The height of your image)
Twitter card type: summary_large_image

If the authors of your content have their own Twitter accounts, you can configure those to display as well. Through the user's profile, edit the meta tags assigned to them add their @username to the Creator's Twitter account field. You can then specify this token for the appropriate meta tag for the content type.

Here is an example of the tags that will now appear in the head of your page:

<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.example.com/blog/title" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page Description" />
<meta property="og:image" content="https://www.example.com/images/blog/image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="800" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@username" />

Helpful links

Open Tags for the Blog content type

Twitter tags for the Blog content type

Remember, set the twitter handle for your site in the global tags.