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.
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.
Recommended OG and TC metadata
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
| Property | Description |
|---|---|
| og:type | Type of content (e.g. “article”) |
| og:title | Title of article |
| og:description | Description of article. This is usually the Meta Description |
| og:url | URL for the article |
| og:site_name | Name of the site |
| og:image | URL for the image to be shared on social media |
| og:image:secure_url | Same og:image URL – used as a fallback for sites that use HTTP and HTTPS |
| twitter:card | Specifies card type (Recommended: “summary_large_image”) |
| twitter:site | Twitter handle used by site or company (e.g. “@coywolf”) |
| twitter:creator | Twitter 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.
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.
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).
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.
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.
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.
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.
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