Unless you landed on this planet yesterday, it’s highly likely you have read or posted an article someone else shared on Facebook or Twitter. Okay, so maybe “read” is a little assumptive.
It’s also likely you’ve never wondered how it works — how the information appears, and in what section of the post. Or how Facebook’s software determines what image to display, and what size works best.
While there’s nothing magical to the process, if you own or run a website, it’s important to understand how it all works.
When a website page is shared on Facebook or Twitter, the app is looking for special meta tags. Absent these tags, it’s likely the first image on the page will appear along with a snippet from the first paragraph of text, which may be less than ideal. Worse, Twitter will only display the web address.
It seems that this is one of the areas of website development most overlooked by designers, which is sad given how simple an element it is to include.
Indeed, having the proper tags implemented can affect click-through and conversion rates. So, the return on this small investment can be significant given social media’s ever-increasing role in digital marketing.
Let’s first look at how it all works, then we’ll dive into implementation.
Facebook and their Open Graph tags.
In 2010, Facebook introduced a protocol for meta tags which has become the standard for how information travels from a website to social media when a page is shared.
By effectively using Open Graph tags, of which there are several, one can control what information appears in the post’s title, description, and what image(s) will be displayed. This is not dissimilar from meta tags used for controlling what content is displayed on search engine results pages.
For the purpose of this article, we’ll focus mainly on image, title, and description — the three tags relevant to shared content.
In the example above, the article has been optimized for Facebook using Open Graph (OG) tags. There’s limited real estate for each area, so it’s important to make sure your title doesn’t exceed 90 characters and the description is less than 250 characters (150 for mobile devices), otherwise, Facebook will truncate it with a trailing ellipsis.
Before publication, it’s always a good idea to make sure everything looks as intended. So, we run new posts through Facebook’s Sharing Debugger, which will display a preview of how the post will look when it’s shared. It will also provide feedback on any problems it detects.
Additionally, the debugger tool allows you to clear Facebook’s page cache. This is especially important if you make a change to a page after it’s been shared. Keep in mind that unless you clear the cache, Facebook will continue to display the old information each time the shared page is displayed.
A word about LinkedIn.
LinkedIn also follows the Open Graph protocol, so many of the same rules apply. It will display your title and image in much the same way Facebook does.
However, it doesn’t seem to display the description. I’ve tested this on the website and through the app. No matter what page I’ve used (with properly defined Open Graph tags), it displays just the title and the image.
Twitter has Cards.
With the introduction of Cards in 2013, Twitter jazzed up their boring text-only posts and whether intentional or not, moved toward looking more like Facebook. Cards allows content developers to display an image, title, and description when their content is shared on Twitter instead of just a page URL.
Yes, there’s more to Cards than just emulating a Facebook post, but for the sake of brevity and consistency, we’ll stick to just these three elements.
As you can see from the example above, the Card-optimized Tweet is displayed much like a Facebook post.
Making it happen on your website.
Implementation of Open Graph and Twitter Cards is a simple process. Depending on how your website was developed will determine the type of implementation that will work best.
As many of today’s websites are built on WordPress, we’ll start there.
Of course, you’ll need a plugin and there are a more than a few options. You can go with the official Facebook plugin, which has a lot of nice features, but I recommend Yoast SEO. It’s a freemium plugin with a lot of extra features not found in the Facebook plugin.
First, it allows for Search Engine Optimization (SEO) as well as Open Graph and Twitter Cards. Additionally, it provides XML sitemaps, page analysis, and an easy way of controlling which pages Google displays in its search results and which pages it doesn’t.
Once you have the plugin installed, the instructions for enabling Open Graph and Twitter cards is straightforward. You can find it here.
If your website requires a developer to customize your site for Open Graph and Twitter Cards, you’ll need a few lines of markup that will get placed in the <head> section of the page template for your article or blog pages.
For Open Graph:
<meta property=”og:title” content=”Your Awesome Article Title” />
<meta property=”og:description” content=”This awesome article is really awesome.” />
<meta property=”og:url” content=”https://yourwebsite.com/your-awesome-article" />
<meta property=”og:image” content=”https://yourwebsite.com/article-image.jpg">
For Twitter Cards:
<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:title” content=”Your Awesome Article Title” />
<meta name=”twitter:description” content=”This awesome article is really awesome.” />
<meta name=”twitter:url” content=”https://yourwebsite.com/your-awesome-article" />
<meta name=”twitter:image” content=”https://yourwebsite.com/article-image.jpg">
As you can see, the only real difference is that Twitter requires the twitter:card tag to identify the type of Card. In our example code, we are defining a Card with a large image. Other options include a small image or a carousel of images.
And like Facebook, Twitter has a debugger of sorts. They call it a validator and it can be persnickety. I’ve found that sometimes it can take multiple attempts before you get a valid response. Also, you’ll need to ensure that Twitter’s bot is allowed to crawl your image directory, otherwise, your Twitter image will not get displayed.
Keep in mind that if your pages have been tweeted previously, you’ll need to validate each URL to clear Twitter’s cache.
A couple of tips to keep in mind.
It’s worth noting that Twitter Cards will fall back to defined Open Graph tags for the URL, title, description, and image if the Cards markup for those elements is not present. But remember the twitter:card tag must first be present and defined.
Additionally, the image size requirements for Twitter and Facebook vary slightly and can influence how or if the image gets displayed. For best results, both channels recommend an image with roughly a 2:1 ratio. Ditto for LinkedIn.
Moreover, images must meet a minimum size to be displayed. For Twitter, images must be a minimum dimension of 300x157 or maximum of 4096x4096 pixels and must be less than 5MB in size.
Facebook recommends images that are at least 1200 x 630 pixels for the best display on high-resolution devices. At the minimum, use images that are 600 x 315 pixels to display link page posts with larger images. Facebook images can be up to 8MB in size, but I can’t think of a scenario in which you would ever want to use an image file that large.
If that wasn’t enough, the maximum character length for Facebook and Twitter vary. While your Facebook title can be up to 150 characters, Twitter limits it to just 70. And the description can be no longer than 124 characters compared to 150 for Facebook. For this reason, it’s best practice to create a separate title and description for Twitter Cards.
There’s much more that can be done with Open Graph and Cards than mentioned here, but getting these basics in place will go a long way to helping your content stand out and increase engagement.
Facebook Guide for Webmasters: https://developers.facebook.com/docs/sharing/webmasters/
Facebook Debugger: https://developers.facebook.com/tools/debug/
Twitter Card Validator: https://cards-dev.twitter.com/validator