If you already understand what Facebook Open Graph and Twitter Cards are, this article is not aimed at you. Please pass it on to someone who doesn’t understand what those are.
Did you gasp?
Tweets with image links get 2x the engagement rate of those without, says Buffer.
Now, these stats are just for Twitter. The combined stats for other popular social media platforms will blow your mind.
Bottom line is: humans are visual beings.
If your site is shared on social media, and it looks like a boring sour stew, the engagement will be low. Share a link that appears nicely in people’s timeline, and you are more likely to get the kind of engagement you seek.
Not taking these into consideration when building your site? You’re definitely doing something wrong.
What exactly is the shaming look?
Well, not all links are created equal. Consider the graphics below. They represent the appearance of two different links shared on Twitter. One is from Medium, the other from a website of mine.
The previous graphic has a large image, title, description, and looks good generally.
This just doesn’t look as good. So, what’s Medium doing under the hood to make their shared URLs look great?
Going from zero to hero
Let’s take a step-by-step approach to taking a site from “shaming look” to “freaking awesome”.
For our considerations, I’ll be using one of my sites,
TheReduxJSBooks.com, as the lab rat.
First, to preview how your link preview will be displayed on Twitter and Facebook, both companies provide debuggers where you paste in your link and have a look for yourself.
Starting at “zero”, let’s see what
TheReduxJSBooks.com looks like when shared now.
Here’s what we’ve got on facebook:
And this on Twitter:
Those don’t look impressive at the moment, but we will fix that shortly.
To have some control over how your links look when shared, Facebook developed the technology called Open Graph. It’s nearly becoming a standard across other services, and not just Facebook. Twitter calls theirs something different, Twitter Cards.
Let’s see how these work.
Facebook Open Graph
In the simplest of terms, the Facebook Open Graph is all about including certain
meta tags to the head of your
These metadata will be read from your site, and they affect how your link is previewed when shared.
Now, have a look at the final results we will achieve when the link is shared on Facebook.
What’s different now?
Now, that looks beautiful. With a custom image, title, and description, you totally control how your link preview is displayed.
Now, here’s the code that yielded the preview you see above:
<!-- Facebook Opengraph --> <meta property="og:url" content="https://thereduxjsbooks.com" /> <meta property="og:type" content="website" /> <meta property="og:title" content="The ReduxJS Books" /> <meta property="og:description" content="What you ar about to view is a complete guide to mastering Redux from total novice to badass, and with every skill level catered for. Ready?"/> <meta property="og:image" content="https://thereduxjsbooks.com/images/redux-trio-1200x630.png" /> <meta property="og:image:alt" content="3 books on ReduxJS. A sequel that takes you from beginner to pro." /> <meta property="og:image:type" content="image/png" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" />
I know it feels like a lot of code, but it isn’t.
These are placed in the head of your
html page. For example
<head> <!-- put them here --> </head>
Now, let’s go over each Open Graph
meta tag one after the other.
Here’s the first:
<meta property="og:url" content="https://thereduxjsbooks.com" />
What you have there is a
meta tag with two attributes,
property defines the property of the meta tag in question. In this case, it has the value,
As you may have guessed,
og is short for
Open Graph and
url denotes that this describes the
url of the shared link. The
content then holds the value for the
url, i.e “https://thereduxjsbooks.com”.
That was easy.
Now, the same goes for the
description tags. You see those?
The next set of
meta tags are those that describe the image preview. The first has a property,
og:image, and the
content is the URL to the image.
<meta property="og:image" content="https://thereduxjsbooks.com/images/redux-trio-1200x630.png" />
An important thing to note is that, for Facebook Open Graph, you must provide the
height of the image — preferably
1200px by 630px
The other tags just further describe the image’s
width , and
Great! Now you know the most important bits of the Facebook Open Graph.
Like Facebook, you also have total control over how your link is displayed when shared on Twitter.
If you share your link on Twitter, assuming you already have the Facebook Open Graph meta tags set, you’ll actually get some preview.
It may look something like this:
Not bad, but not great either.
When we are done, here’s what we’ll have on Twitter:
As you can see, the preview image is much larger, and the description isn’t as lengthy. Facebook takes in more characters — but not Twitter.
So, here are the basic tags you need.
<!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://thereduxjsbooks.com/images/redux-trio-560x300.png" /> <meta name="twitter:image:alt" content="3 books on ReduxJS. A sequel that takes you from beginner to pro." /> <meta name="twitter:description" content="For every book you buy, we will send a free copy to a developer in India, Nigeria, and Tunisia who can't afford the cost." />
meta tag is super important.
<meta name="twitter:card" content="summary_large_image" />
Unlike Facebook Open Graph with the
content attributes, Twitter cards use
Here, the name is
twitter:card and the content,
summary_large_image. This describes the type of Twitter card you want. There are many different types of Twitter cards available, but
summary_large_image gives you the large image preview you saw earlier.
Unlike Facebook, you do not need to describe the image’s
Just having the name,
content URL will do!
<meta name="twitter:image" content="https://thereduxjsbooks.com/images/redux-trio-560x300.png" />
Finally, just include the image
alt text and a shorter
description for Twitter.
<meta name="twitter:image:alt" content="3 books on ReduxJS. A sequel that takes you from beginner to pro." /> <meta name="twitter:description" content="For every book you buy, we will send a free copy to a developer in India, Nigeria, and Tunisia who can't afford the cost." '' />
And that is it!
What’s even more beautiful is that setting this up means other services can equally look up this metadata and display your links beautifully!
Here’s a preview for when the link is shared on Slack.
Slack’s just one of many services that honour the Facebook Open Graph and Twitter Card technology.
Now you know those beautiful link previews on Twitter and Facebook didn’t get there by magic.
Someone wrote the code, and now you know how.
Go build sites that look super awesome when shared on Twitter and Facebook!