Social Meta Tags — How to Grow Engagement On Social By Simple Adjustments to Your Website
Want to control how links to your site are displayed on social media?
Grow engagement levels by making your links more attractive?
Control the text shown in a preview snippet?
Social meta tags are the answer.
I’ll show you exactly how to use them, including the image sizes you need for the different types of tag.
But first, get your copy of the cheatsheet you need to help you add social meta tags to your website:
What Exactly Are Social Meta Tags?
It’s easier to explain by illustrating the difference social meta tags make to social posts.
Here’s a Tweet for a link to a post (which since this was originally written has moved to everywheremarketer.com), showing how it would look without the use of such tags:
Not too visually appealing or engaging, right?
Here’s what happens once we’ve added the social meta tags:
That’s now a completely different experience, with engagement likely a lot higher…
That’s the value of social meta tags.
You’re essentially telling social sites like Facebook and Twitter exactly what to display when links to your site are shared.
Neat, right?
They can even help your SEO…
Not directly.
But they still help.
When links to your site get shared more often, your social signals increase, and that can boost your search ranking.
Indirectly it can lead to more backlinks too, such as through:
- Increased authority levels of your content, because it’s been shared more often.
- More comments from visitors on your blog post.
Backlinks of course again boost your SEO.
But to get all the benefits, you need to make sure you‘ve installed social meta tags in the right way… this post shows you how.
The good news is this is a one-time-only job. Set them up once for your website, and then that’s it.
There are two main types of social meta tag you need to be aware of:
- Open Graph tags — used by Facebook, LinkedIn, Twitter and other social platforms.
- Twitter Card tags — these are just for Twitter. Twitter uses these if supplied, otherwise it defaults to Open Graph.
They’re a type of meta tag that live in the <head> section of your website’s source code.
In other words, when you look at your site’s source code, they should be in the stuff right at the top.
Other ‘meta’ tags live there too.
You may have already heard of the meta description tag, for example?
That‘s a type of tag used by search engines to help inform their listings.
Here’s an example of a meta description tag from the SEO site, Moz.com:
Social meta tags are just another type of meta tag, but this time used by social platforms rather than search engines.
Make sense? Good.
How do they actually work to determine what’s shown?
Here’s an example of how Open Graph tags are translated into what’s shown on say Facebook:
The description is sometimes shown too:
As you can see, social meta tags actually involve a grouping of different tags, all supplying different bits of information.
What do they each mean?
Let’s move onto that now.
We’ll start with how to use Open Graph tags…
Open Graph
Remember, these are used by Facebook, LinkedIn, Twitter (unless you’ve installed Twitter Cards) and other social platforms
One of the tags — the og:title tag — looks like this:
<meta property="og:title" content="How to Use Social Meta Tags" />As you’ve already guessed, this one determines the title shown for a link.
What about the others?
Here‘s the list for Open Graph:
- og:type — for blog posts, use article. Another option is website. Click here for others.
- og:title — the title to display
- og:image — the image you want to show. Make sure it’s the full link starting with https:// or http://
- og:url — the full URL for the page
Some other tags are optional:
- og:site_name — the name of the website, e.g. Medium
- og:description — the description to display
- og:locale — if not supplied, then en_US is used
Image Sizes
Based on Facebook’s guidelines for Open Graph, images should be at least 1200x630 pixels to get the best display on high-resolution devices.
If an image is any less than 600x315px, it will be displayed in a small image format (shown on the right here), which as you can see is much less engaging than the standard large image format:
The absolute minimum size of an image for Open Graph is 200x200 pixels.
In terms of the image’s dimensions, it doesn’t matter how large it is, but the file itself should be less than 8Mb.
I’ll show you how to actually add Open Graph tags to your website shortly.
Before I do that though, let’s quickly run through Twitter Cards too…
Twitter Cards
As I mentioned earlier, these are exclusively used by Twitter.
They’re not compulsory though.
If Twitter can’t find them, they’ll look to use Open Graph tags instead.
But ideally you should use them if you can, as they give you more fine-tuned control over what shows up on Twitter.
For example, you can embed rich media like videos into Tweets.
YouTube does exactly that — an example of a major website using Twitter Cards.
If you examine the HTML source code of a page on YouTube, you’ll see something like this:
It means that when someone posts a Tweet sharing a link to a YouTube video, the video is embedded and playable within the Tweet itself.
Here’s an example of a Twitter Card tag, up close and personal.
As you can see, it looks pretty much identical to an Open Graph one — the only difference here is that they’re using twitter:title instead of og:title:
<meta name="twitter:title" content="Ultimate Guide To Social Meta Tags: Open Graph And Twitter Cards—EverywhereMarketer" />As with Open Graph, there are lots of other Twitter Card tags too.
Here’s the full list:
- twitter:title — the title to display
- twitter:description — the description to display
- twitter:image — the image you want to show. As with Open Graph, make sure it’s the full link starting with https:// or http://
- twitter:site — the username for the Twitter account associated with your website, e.g. @EverywhereMktr
- twitter:creator — this is optional, but you can set this to the Twitter username of whoever created the content.
- twitter:card — this is how you tell Twitter the type of card to use… pick from one of the following…
Twitter Card Types
These are the potential values for the twitter:card tag:
- summary— a Summary Card, which shows a small square image next to the description
- summary_large_image — as the name suggests, a larger (potentially rectangular) image version of the Summary Card
- app —specific to mobile apps, provides an App Card
- player —a Player Card for videos, audio and other relevant media (as you’ve probably guessed, this is what YouTube uses.
As an example, the tag will look something like this:
<meta name="twitter:card" content="summary_large_image"/> Image Sizes
Here are the minimum and maximum image sizes, depending on the twitter:card type:
- summary — images should be square and between 144x144 and 4096x4096 pixels.
- summary_large_image — images should be between 300x157 and 4096x4096, and may be of a more rectangular aspect.
The main image formats are all supported — images ending in .jpg, .jpeg, .png, .webp and .gif are all fine. The max file size is 5Mb.
For animated gifs, they’ll just show the first frame.
How to Add Social Meta Tags to Your Website
Start by checking what tags you have already, so you don’t double up on any.
To do that, look at the source code for your site or blog.
Take a look at a few different pages, searching the source code (use Ctrl & F, or cmd & F on a Mac).
See if you can any instances of og:title or twitter:card type tags.
If you find any…
First check the other Open Graph or Twitter Card tags, and compare against the list of tags above.
Secondly, check how your pages are displayed on social media so you can be sure they’re displayed in the right way.
(The easiest way to do that is to use the social meta tag validation tools which I’ll describe shortly).
If you find any issues, adjust the information for your social meta tags accordingly.
If you don’t find any…
You’ll need to add them to your website.
I’ll run through how to do it on Wordpress first, followed by other types of website.
Wordpress Website
If your site’s on Wordpress, good news — it’s easy to start using social meta tags.
First, check if you have the popular Yoast plugin (it’s mainly associated with SEO).
If not, install it.
Once installed, do the following:
- Go to SEO > Social
- Click on the Facebook tab
- Click the Add Open Graph meta data checkbox, which will automatically add Open Graph tags to your posts and pages.
You‘ll probably also want to define the title, description and image for the front page of your site or blog. For that, you’ll need the Frontpage settings:
- Set the Image URL — if this is blank, an image from a recent post will be automatically used instead.
- Set the Title and Description if you want these to be different to what you’ve already set under Titles & Metas in Yoast.
For Twitter Card tags, click the Twitter tab, and then:
- Check the Add Twitter card meta data checkbox.
- Select the card type you want (use the list of Twitter card types above for reference).
Finally, don’t forget to click Save Changes.
Non-Wordpress Website
This can get more complicated, so you might want to point your developer to this page and ask them to take care of it.
For ease of reference, here’s what the full list of Open Graph tags might look like once added to your source code:
<meta property="og:title" content="Content Title" />
<meta property="og:description" content="Content description goes here" />
<meta property="og:url" content="https://www.mywebsite.com/page" />
<meta property="og:image" content="http://www.mywebsite.com/image.jpg" />
<meta property="og:site_name" content="Site Name" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />You’ll need to replace the token values above with relevant info for your website.
Similarly, here are the Twitter Card tags:
<meta name="twitter:title" content="Content Title"/>
<meta name="twitter:description" content="Content description goes here"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@username"/>
<meta name="twitter:image" content="https://www.mywebsite.com/image.jpg"/>
<meta name="twitter:creator" content="@anotherusername"/>As mentioned before, the last tag here, twitter:creator, is only used if you’ve set the card type (twitter:card) to summary_large_image.
Once added, your social meta tags now just need validating…
Final Step… Validate Your Tags
Use these free social meta tag validation tools to check what‘s shown on social for pages on your website.
Open Graph
- Click here to access Facebook’s validation tool.
- Enter the URL of the page you want to test.
- Click Debug.
Twitter Cards
- Click here for Twitter’s Card Validator tool.
- Enter the URL of the page you’re checking.
- Click Preview card.
Finally…
So that covers what social meta tags are, how they help your website, and how to install them. Don’t forget to grab the free cheatsheet to help you do so:
As you can see, they’re a key foundation to get in place for your website.
Once installed, you can look forward to improvements in how people engage with content links shared from your site, which will likely include higher traffic levels from social.
Sincerely,
Steve Shaw
EverywhereMarketer
PS. Like This Story? Please help us reach more people by clapping below. And don’t forget to follow EverywhereMarketer to get more content like this.
Recommended Related Reading:
