How to add Open Graph and Twitter Card metadata and optimize images for social media

Using Open Graph and Twitter Card metadata enhances links when they're shared on social networks, and optimizing Open Graph and Twitter Card images can increase engagement and referral traffic.

Open Graph (OG) and Twitter Card (TC) metadata provide content marketers the ability to control how links appear when they’re shared on social networks. A key component of the metadata is the image. Without it, link previews are small and indistinct.

Twitter Card without image

There are several benefits to having OG and TC images. Those benefits include:

  • bringing attention to the post
  • having full control over what people see
  • taking people to the site when the image is clicked (attached images don’t)
  • looking great when other people share links
  • taking up more vertical space on the feed
  • adding additional text beyond Twitter’s post-character limit

This guide walks you through adding OG and TC metadata to your site, OG and TC image best practices, and how to optimize those images for increased engagement.

Table of contents

How to add OG and TC metadata to a site

Many content management systems (CMSs), including WordPress, don’t come with OG and TC metadata by default. Most CMSs require an extension or plugin to add them.

Sites that are custom-built by web developers often don’t include OG and TC metadata either. It’s not uncommon for site owners to have to go back and request the addition of OG and TC metadata after the site has already been delivered.

These are the essential OG and TC metadata that should be included in the <head> area of each web page. Since Twitter uses OG as a fallback, the only required TC metadata is twitter:card and its content value should be summary_large_image. That metadata line requests Twitter to display a large image instead of a small one in the tweet. Additionally, while twitter:site and twitter:creator aren’t required, I still like to include them to confirm entity relationships.

OG and TC metadata properties and descriptions

og:typeType of content (e.g. “article”)
og:titleTitle of article
og:descriptionDescription of article. This is usually the Meta Description
og:urlURL for the article
og:site_nameName of the site
og:imageURL for the image to be shared on social media
og:image:secure_urlSame og:image URL – used as a fallback for sites that use HTTP and HTTPS
twitter:cardSpecifies card type (Recommended: “summary_large_image”)
twitter:siteTwitter handle used by site or company (e.g. “@coywolf”)
twitter:creatorTwitter handle used by author (e.g. “@henshaw”)

Example code for OG and TC metadata

Download OG and TC metadata reference PDF

If you have a custom-built site and need to communicate to a web developer exactly what you need, you can download and give them this Open Graph and Twitter Card metadata reference.

Open Graph and Twitter Card metadata reference sheet
Coywolf’s Open Graph and Twitter Card metadata reference

Adding OG and TC metadata to WordPress

Even though WordPress doesn’t include OG and TC metadata by default, there are several plugins available that can add them. I recommend using Yoast SEO, which is what Coywolf uses. Yoast automatically inserts all of the essential OG and TC metadata onto every page.

The best way to specify an OG and TC image with Yoast is to add a Featured Image to a Page or Post.

WordPress Featured Image

While setting a Featured Image for WordPress Pages and Posts will ensure an image is used when those links are shared on social media, it doesn’t address the homepage or any other pages that don’t have a Featured Image option. To specify an image for the homepage and a placeholder image for pages without a Featured Image, navigate to the Social section of Yoast in the WordPress Admin. Click on the Facebook tab and then upload an image for the Frontpage (homepage) and an image for Default (placeholder for other pages without a Featured Image option).

Yoast Facebook

If you don’t want to use a plugin, and you want to add them manually to your theme templates instead, I recommend you follow the same approach I used in the How to Get into Google News article. Specifically, the Dynamically generating NewsArticle schema in WordPress section. If you download the sample JSON-LD file, it should have most or all of the WordPress functions needed to dynamically insert values into the OG and TC metadata.

How to optimize OG and TC images

OG and TC images can gain a significant amount of attention and clicks from social feeds if they’re done well. These are the best practices and tactics for optimizing OG and TC images.

OG and TC best practices

OG and TC images should have a 2:1 aspect ratio and the minimum dimension size should be 1200px by 600px. OG and TC images can be larger than 1200×600, but it’s not necessary and it will make the image file size bigger than it needs to be.

The most common type of images that are used for OG and TC are photos, screenshots, illustrations, logos, and words.

Twitter Card example with photo
Twitter Card with illustration

However, OG images that contain words run the risk of being ineligible for Facebook advertising. For example, if you want to boost an article, but the OG image has too much text, Facebook may reject it and not run the ad. Facebook provides details for its text in ads rules and also has a tool that will automatically analyze images to determine if they have too much text. If you don’t plan to use Facebook Ads, then you’re free to use as much text as you want.

If you change an image for an existing article that’s already been shared on Twitter or Facebook, it won’t appear when the link is shared again. The networks cache the image associated with the URL, and you have to break its cache for the image to appear.

To update Twitter’s cache, use the Card Validator tool, and to update Facebook’s cache, use the Sharing Debugger tool. If your site is using caching, you may need to clear the site’s cache before the new image appears in either tool.

Tactics for optimizing OG and TC images

Creating an image that’s different from the typical photos and illustrations that most content marketers use can help bring more attention to your social posts. Brian Clark, Founder of of Unemployable and Copyblogger, uses a presentation cover layout for his 7-Figure Small podcast.

Unemployable's Twitter Card image example

Fathom Analytics, a privacy-focused alternative to Google Analytics that Coywolf uses, makes their images look interactive by including what looks like a clickable link. It’s an illusion because the entire image is clickable, but Fathom has stated that they’ve experienced a significant increase in traffic from Twitter since they started using it.

Twitter Card image example from Fathom

I’m surprised there aren’t more faux interactive OG and TC images being shared. Aside from links, images with a short question and fake submission buttons would probably perform well, depending on the context.

There is a reason we don’t see animated OG and TC images, and that’s because the social networks don’t allow them. For example, Twitter uses the first frame from an animated GIF for the image and discards the rest.

Open Graph Image as a Service

It’s possible to automate the creation of OG and TC images. For example, ZEIT created an open-source solution called Open Graph Image as a Service (OGIaaS) that they use to create their OG and TC images. OGIaaS could be used to create the same type of images that Unemployable is creating. Perhaps they already are using it or a similar solution.

They have a live demo that illustrates how images, text, and style can be applied via code to create the image instantly.

Next steps

If you don’t have OG and TC metadata on your sites, you should make it a priority. If you already have the metadata, but you don’t pay much attention to the images you create, you could be missing out on a lot of engagement and clicks. I recommend testing presentations and interactive styles to see if they help increase social referrals. The best way to test it is with the Open Graph Checker Chrome extension, which will preview the image, title, and description.

Open Graph Checker
The Open Graph Checker renders and displays the Open Graph image, title, and description if they exist

Related Articles

Jon is the founder of Coywolf and the EIC and the primary author reporting for Coywolf News. He is an industry veteran with over 25 years of digital marketing and internet technologies experience. Follow @henshaw