Social Meta Tags: How to Grow Engagement on Social With Simple Adjustments to Your Website
Steve Shaw
Founder, EverywhereMarketer.com ~ Grow Visibility, Attract Customers, and Scale With Confidence
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, showing how it would look without the use of such tags:
Not too visually appealing or engaging, right?
Here’s what happens once you add 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:
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:
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:
Some other tags are optional:
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 Card Types
These are the potential values for the twitter:card tag:
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:
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:
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:
For Twitter Card tags, click the Twitter tab, and then:
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="https://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
Twitter Cards
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.