Meta tags for sharing the link on Facebook and Twitter

Motivation

I have recently created my first front-end webapp called Line-height Picker. Very excited, I share the link to the app on my Twitter post. But Twitter doesn’t show any image. My Twitter post is made of text only…

Then I remember there is a set of things to be done for controlling the appearance of social media links to your webpage.

A CSS Tricks article on the subject (Coti 2016) gives us a good overview. But it was written 4 years ago, and some comments to the article show disagreements. It prompts me to check the sources: Facebook and Twitter’s own documentations. It takes half a day to fully grasp what needs to be done.

For the future self and for those who might also benefit, I summarise what I have learned. I focus on Facebook and Twitter only.

In doing so, I try to link the sources of information as relentlessly as possible, because social media has constantly been evolving (some of the descriptions in the 2016 CSS Tricks article are now outdated). What’s written below may become outdated in the near future. If the link is dead or if the linked article disagrees with what this article says, then it’s an indication that the relevant part of this article is likely to be outdated.

Note: I use the Author-Date referencing system in this article, to refer to various articles on web development.

Step 1: Prepare the image file

We start with the preparation of an image to be displayed when someone shares the link to your website on social media. This should be done first because the image dictates what needs to be written for meta tags.

The common denominators of Facebook and Twitter guidelines are as follows (as of July 2020):

File format

JPEG, PNG, or GIF.

While Twitter also allows WebP (see Twitter 2020a; scroll down to “twitter:image”), Facebook’s guideline says that the og:image:type meta tag — to specify image file format (see Step 2 below)— needs to be:

One of image/jpeg, image/gif or image/pngFacebook (2020a)

File size

Less than 5MB.

That’s the limit for Twitter (Twitter 2020a; scroll down to “twitter:image”). Facebook allows an image file size up to 8MB (Facebook 2020b).

Image dimension

1200x630 if the image can be cropped at top and bottom. 1200x600 if the image can be cropped on both sides.

I have reached the above conclusion by trying both dimensions and checking how the link will appear in Facebook and Twitter posts. The reasoning is as follows:

Facebook recommends 1200x630:

“Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images… Try to keep your images as close to 1.91:1 aspect ratio as possible to display the full image in News Feed without any cropping.” — Facebook (2020b)

Twitter recommends an aspect ratio of 2:1 for “Summary Card with Large Image” — a type of Twitter card (see Step 3 below):

Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. — Twitter (2020b)

If we follow Facebook’s recommendation, the 1200x630 image will be slightly cropped at top and at bottom on Twitter.

If we follow Twitter’s aspect ratio, the 1200x600 image will be slightly cropped on both sides on Facebook.

So choose either dimension depending on how your image can be slightly cropped.

Now it’s time to write down meta tags inside the <head> element in the HTML file. Before delving into detail, two things need to be clarified.

First, Facebook and Twitter use different sets of meta tags, but Twitter falls back to the meta tags for Facebook (known as Open Graph):

“When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property.” — Twitter (2020g)

With a few exceptions of Twitter-specific meta tags, therefore, we can just use the Open Graph meta tags for Facebook.

Second, the Open Graph meta tags use the property attribute while Twitter’s meta tags use the name attribute. But they are interchangeable:

“Open Graph protocol also specifies the use of property and content attributes for markup … while Twitter cards use name and content. Twitter’s parser will fall back to using property and content, so there is no need to modify existing Open Graph protocol markup if it already exists.” — Twitter (2020g)

In summary, we just need to add Open Graph meta tags and some Twitter-specific meta tags.

Step 2: Meta tags for images

og:image (required)

The og:image meta tag specifies the URL of the image to be displayed on Facebook/Twitter.

It has to be the full URL, starting with https://. If you use Create React App to create your website, you can save the image file in the public folder (see Llobera 2020). Unlike other assets in the public folder, however, the %PUBLIC_URL% prefix does not work.

If you want to replace the image, the image URL needs to be changed (Facebook 2020a).

For my webapp, I use the following:

<meta property="og:image" content="https://line-height-picker.app/pagepreview600-315.png" />

Initially I used the image file name pagepreview.png for an image of 1200x600 dimension. But I didn’t like how it was cropped by Facebook. So replaced it with an image of 1200x630 dimension. So it’s called pagepreview600-315.png.

og:image:height and og:image:width (desirable)

As far as I understand, it’s best to specify the image dimension because the clickable area of the link to your website will be as large as the image even before the image is actually loaded.

Facebook recommends:

“Use og:image:width and og:image:height Open Graph tags to specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.” — Facebook (2020c)

If this explanation doesn’t fully make sense to you, the following comment to a CSS Tricks article may help you:

“I’d recommend to add og:image:widthand og:image:height as both help facebook to get the size of the og:image when a link is shared the first time. If both values are large enough, facebook will reserve the space for the large preview image, even if the facebook user shared the link faster than the image could be fetched. If both values are not set, facebook will fall back to the smaller og:image in such cases.” — Tibor (2016)

For my webapp, I’ve settled on the 1200x630 dimension. So:

<meta property="og:image:height" content="630" />
<meta property="og:image:width" content="1200" />

twitter:image:alt (desirable)

For accessibility, it is the norm to add the alt attribute to any image on your website. So Twitter recommends adding the twitter:image:alt meta tag (see Twitter 2020b; scroll down to “Reference”).

The OpenGraph meta tag also has the equivalent: og:image:alt (see the Open Graph protocol). But Twitter does not say it is equivalent (see Twitter 2020a; scroll down to “twitter:image:alt”).

For my webapp, I add the following:

<meta name="twitter:image:alt" content="Line-height Picker logo with the text that reads Beautify paragraphs on your website in 5 steps" />

og:image:type (optional)

You can specify the image file type. I’m not sure what benefit this brings, though.

Facebook (2020a) requires that it’s either image/jpeg, image/gif or image/png.

For my webapp, I use a PNG file:

<meta property="og:image:type" content="image/png" />

Step 3: Twitter-specific meta tags

twitter:card (required)

Twitter offers a few types of how the link appears on a tweet (see Twitter 2020c for the list). The twitter:card meta tag specifies which type to be used.

If your website is for a mobile app, use

<meta name="twitter:card" content="app">

together with several other meta tags specific to mobile apps (see Twitter 2020d).

If your website is an audio or a video, use

<meta name="twitter:card" content="player">

along with several other meta tags specific to audio/video (see Twitter 2020e).

Otherwise, use the “Summary Page with Large Image”:

<meta name="twitter:card" content="summary_large_image" />

There is another type called “Summary Page”, but then the image has to be of 1:1 aspect ratio (Twitter 2020f), not really compatible with Facebook.

For my webapp, I go with the “Summary Page with Large Image”.

twitter:site and/or twitter:creator (optional)

You can relate your website to the Twitter accounts. If you have a Twitter account for the website per se, use twitter:site. If you want to link to your own personal Twitter account, use twitter:creator.

For my webapp, I link it to my personal Twitter account:

<meta name="twitter:creator" content="@masa_kudamatsu" />

Step 4: Required but potentially redundant meta tags

og:title

As Wolfang (2016) points out, this tag is potentially redundant because the <title> element may have the same information.

A use case is an article as part of the large website such as CSS Tricks:

“The title of this very web page is ‘The Essential Meta Tags for Social Media | CSS-Tricks’ but while sharing you would expect to show a clean title, i.e. ‘The Essential Meta Tags for Social Media’ while the bottom part will show css-tricks.com as the website. This is only one example of why you would want to use a proper Open Graph title.” — Lazza (2016)

For my webapp, it is useful because the title element programatically changes across pages within this single-page app. I do not want to change the link title across pages. So I add:

<meta property="og:title" content="Line-height Picker" />

Note that Facebook says it cannot be changed once the link attracts 50 likes/shares/ comments:

“This can be changed until it has 50 user interactions (ex. likes, shares, comments) associated with it. Once it has passed that threshold, the title cannot be changed.” — Facebook (2020d)

og:description

Similarly, as Wolfang (2016) points out, this tag is potentially redundant because the <meta name="description"> element may have the same information.

Again, for my webapp, the description meta tag programmatically changes across pages within the single-page app. So I use this tag to describe the app in general:

<meta property="og:description" content="A front-end web app to pick the best line-height CSS value"/>

og:url

Wolfang (2016) also says this tag is redundant because Facebook/Twitter will pick up the URL anyway.

A use case is when you want to aggregate the number of likes and shares for various pages of your website into one single URL. See Facebook (2020e) for detail.

For my webapp, I simply use the root URL:

<meta property="og:url" content="https://line-height-picker.app" />

Step 5: Meta tags needed for some types of websites

og:type

If your webpage is either an article, a book, a profile, a piece of music, or a video, then use this tag to explicitly specify the content type.

For detail on each type, see Open Graph protocol (2020).

If this tag is not specified, the type will be assumed to be website (Facebook 2020f).

og:locale

Add this meta tag if your website uses the language other than English or if you want to specify the location other than the U.S. For detail, see Facebook (2020g).

The default value is en_US, that is, English in U.S. (Facebook 2020f).

Step 6: Validation

Once you have uploaded the image and added all the necessary meta tags, validate your meta tags and preview how the link will be displayed in social media.

For Facebook, use Sharing Debugger. See Facebook (2020h) for how to use it.

For Twitter, use Card Validator.

After a bit of trial and error, I’m now happy about how the social media link to my webapp is displayed:

How Facebook will display the link to Line-height Picker
How Twitter will display the link to Line-height Picker

Notice the top and bottom of the image is slightly cropped in Twitter, because I use the 1200x630 image dimension that fits to Facebook, but not to the 2:1 aspect ratio in Twitter (scroll up to Step 1 for detail).

Hope this article helps you optimize how social media links to your webpage appear to the potential users, at least on Facebook and Twitter.

References

Coti, Adam (2016) “The Essential Meta Tags for Social Media”, CSS Tricks, Dec. 21, 2016.

Facebook (2020a) “A Guide to Sharing for Webmasters: images”, Facebook for Developers, accessed on Jul. 9, 2020.

Facebook (2020b) “Images in Link Shares”, Facebook for Developers, accessed on Jul. 9, 2020.

Facebook (2020c) “Best Practices: images”, Facebook for Developers, accessed on Jul. 9, 2020.

Facebook (2020d) “How to Change the Metadata for an Existing Link”, Facebook for Developers, accessed on Jul. 9, 2020.

Facebook (2020e) “Specify a Canonical URL”, Facebook for Developers, accessed on Jul. 9, 2020.

Facebook (2020f) “A Guide to Sharing for Webmasters: Basic Tags”, Facebook for Developers, accessed on Jul. 9, 2020.

Facebook (2020g) “Localization”, Facebook for Developers, accessed on Jul. 9, 2020.

Facebook (2020h) “A Guide to Sharing for Webmasters: Test Your Markup”, Facebook for Developers, accessed on Jul. 9, 2020.

Lazza (2016) “A comment to ‘The Essential Meta Tags for Social Media’”, CSS Tricks, Jul. 20, 2016.

Llobera, Lewis (2020) “Using the Public Folder”, Create React App, Feb. 13, 2020.

Open Graph Protocol (2016) “Object Types”, The Open Graph Protocol, Nov. 22, 2016.

Tibor (2016) “A comment to ‘The Essential Meta Tags for Social Media’”, CSS Tricks, Jul. 20, 2016.

Twitter (2020a) “Cards Markup”, Optimize Tweets with Cards, accessed on Jul. 9, 2020.

Twitter (2020b) “Summary Card with Large Image”, Optimize Tweets with Cards, accessed on Jul. 9, 2020.

Twitter (2020c) “About Twitter Cards”, Optimize Tweets with Cards, accessed on Jul. 9, 2020.

Twitter (2020d) “App Cards”, Optimize Tweets with Cards, accessed on Jul. 9, 2020.

Twitter (2020e) “Player Cards”, Optimize Tweets with Cards, accessed on Jul. 9, 2020.

Twitter (2020f) “Summary Cards”, Optimize Tweets with Cards, accessed on Jul. 9, 2020.

Twitter (2020g) “Getting Started with Cards”, Optimize Tweets with Cards, accessed on Jul. 9, 2020.

Wolfgang (2016) “A comment to ‘The Essential Meta Tags for Social Media’”, CSS Tricks, Jun. 21, 2016.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store