Want to improve how your site shows up on social platforms like Facebook, Twitter and LinkedIn?
By adding some simple social meta tags, you can do just that.
They improve your visibility and increase your traffic by making your updates more engaging, thereby attracting more clicks and shares.
With the right image and description, you can improve engagement by often 100s of percent.
Social meta tags are how you control exactly what’s shown, including:
- The title
- The description
- The image
Let's see a quick example of the difference this can make. Here's what would show on Twitter for someone sharing the link for a previous post before putting the right tags in place:
As you can see, not too too engaging, right? Few people are going to feel encouraged to either click on the link or share it.
But here's what it looks like after adding the right social meta tags:
As you can see there's a big, big difference. It's going to attract more engagement with people far more willing to share it and click through on the link.
Is it really worth adding these social meta tags?
And the good news is that you only have to take care of it once. Then you don't have to think about it again.
Even better, as you'll see below, it's relatively quick and simple to do. Or you can point your web developer to this page and ask them to take care of it.
But it is one of the steps you absolutely have to get in place for your website—and this Ultimate Guide shows you exactly how—to give it the right foundation on which to grow.
Do These Tags Impact SEO and How Well I Rank on Search?
Yes and no.
There’s no direct benefit for your search visibility.
But you do benefit indirectly.
As we've already seen, using these tags means that your updates on social are more engaging, shareable and clickable.
- You attract more social signals—on search engines it means your content grows in authority.
- You attract more backlinks from other websites because:
— With more social media users clicking through, you simply have more eyeballs on your content—so more people who may want to link to it.
— Similarly, presuming you're maximizing your opt-in rates, you also end up with an increasing number of subscribers you can send to your content to, which in itself can lead to more backlinks.
— With more comment, social shares, and so on, you benefit from an increasing level of social proof, which further encourages such backlinks.
All of this builds the authority of your content and helps your site climb through the rankings.
Types Of Social Meta Tags
There are two main types of tags you need to maximize your results from social:
- Open Graph tags
- Twitter Card tags
You'll see below how to add these to your website, but here's a quick overview of:
- What these tags are.
- How they work.
Both are referred to as meta tags.
You'll find meta tags in the section in the HTML source code of most websites, including likely your own.
While they don't affect what people see when they visit the page, they exist to provide information about it to search engines and social media platforms.
For example, you may have heard of the meta description tag that's used in some circumstances by search engines for the description of your web page in the search engine results pages (SERPs).
Using the right text can help attract clicks from search... and higher click-through rates can improve your rankings.
This example from the popular SEO site Moz.com shows how the meta description tag translates into what shows for a web page in the search engines:
Social meta tags work in a similar way for social media platforms.
When a social update contains a link to a page on your site, the platform takes a look at your site and determines what information to display.
If they find social meta tags, great—they will use them (as shown below).
Otherwise, you're essentially leaving it up to them to decide what to display, which is unlikely to be what you want.
So you use social meta tags to tell social platforms exactly how you want links to your website to be displayed.
For example, this shows how Open Graph tags—as used by Facebook and other platforms—translate into what's actually displayed:
Sometimes the description is used, but not always—this is what Facebook's link validation tool brings back for the same link:
The Open Graph protocol was created by Facebook. It defines:
- Which meta tags on a web page are 'read' by social platforms.
- What each one does.
Open Graph tags are not just used by Facebook, but platforms like LinkedIn and Twitter too.
(However, note that Twitter defers to their own social meta tags known as Twitter Cards if provided—more info on Twitter Cards below).
A typical Open Graph tag looks like this:
<meta property="og:title" content="Ultimate Guide To Social Meta Tags: Open Graph And Twitter Cards" />
This is the og:title tag. As the name implies, and as shown in the examples above, this tag determines the title text that's shown for a link.
Open Graph tags
Here's the full list of Open Graph tags:
- og:locale Optional. Defaults to en_US which is suitable for most English websites, both inside and outside the USA.
- og:type Optional. Defaults to website. Alternatively, you can set it to article, which is more suitable for blog posts for example (you'll find out below how to add Open Graph tags to a blog).
- og:title The title of the page or article.
- og:description The description of the page or article. This should be different to the og:title setting.
- og:image The full URL for the image you want to show—for example, https://yoursite.com/image.jpg rather than /image.jpg.
- og:url The full URL for the web page, minus any parameters—for example, https://yoursite.com/page.html rather than /page.html or (with parameters) http://yoursite.com/page.html?category=2
- og:site_name The name of the website—for example, My Website rather than the domain name, mywebsite.com.
Starting to look complicated?
You'll get full instructions shortly on how to add them to your site, including an example.
You'll likely find it's a lot easier than you think! Or just pass this page on to your web developer and let them take care of it.
Twitter Cards are social meta tags that are used exclusively for Twitter.
When provided, Twitter uses Twitter Card tags, and give you more options and control. Otherwise it defaults to Open Graph (again, if provided).
With Twitter Cards, other content is embedded automatically within the Tweet, such as photos, videos and other media, greatly improving engagement.
Let's see an example of how this works in practice.
YouTube uses Twitter Cards. When you publish a video and tweet a link to it, the video shows directly within the Tweet:
Twitter Card tags are actually very similar to Open Graph. Here's how one such Twitter Card tag looks:
<meta name="twitter:title" content="Ultimate Guide To Social Meta Tags: Open Graph And Twitter Cards—Takanomi" />
This twitter:title tag is equivalent to Open Graph's og:title tag, detailed above.
Twitter Card tags
Here's the full list of tags:
twitter:card Determines the type of card to use. These are the options (the actual value to set in the meta tag is shown in italics, though more information is below):
— content—provides a Summary Card, which has a small image alongside summary text.
— summary_large_image—provides a Summary Card again, but this time with a large image.
— app—provides an App Card, only relevant if you develop mobile applications.
— player—provides a Player Card, with embedded video clips, audio streams and other media (such as in the YouTube example above).
- twitter:title Title of the page or article (equivalent to Open Graph's og:title).
- twitter:description Description of the page or article (equivalent to Open Graph's og:description).
- twitter:site The Twitter handle for your website or business, for example, @takanomi
- twitter:image Full link to the image you want to use for the page (equivalent to Open Graph's og:image). For best results, use an image specific to the link, rather than something more generic like your company's logo.
- twitter:creator Optional. Set to the Twitter username of the content creator. Note this tag's only relevant where twitter:card is set to summary_large_image.
So how do you actually add these tags—Open Graph and Twitter Cards—to your website?
You're about to find out. Here's what's coming up:
- How to add social meta tags to Wordpress or non-Wordpress sites.
- How to validate the tags using freely available online toolsy.
How to Add Social Meta Tags To a Non-Wordpress Website
To add the tags to a non-Wordpress site, the relevant code needs to be manually added to your pages.
Start by checking what tags you already have, if any. Examine your site's source code and search for e.g. og:type or twitter:card in the section at the top.
If you find some, check links to your pages display as you want them to on social media.
See also the section below on validating the tags—the validation tools give you a preview of what's likely to be displayed.
Open Graph tags need to be added to the section of each page on your website. Use this template to copy from and then just adjust with your own information.
(See above for more information on the options for each tag).
<meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Title Of Your Content Here" /> <meta property="og:description" content="Description of your content here" /> <meta property="og:url" content="http://www.yoursite.com/yourcontent.html" /> <meta property="og:site_name" content="The Name Of Your Site" /> <meta property="og:image" content="http://www.yoursite.com/yourimage.jpg" />
Once added, validate the tags via the tool referred to in the final section of this post below.
Similarly, use this template for Twitter Card tags. Again, the options for each tag are detailed above.
<meta name="twitter:card" content="summary_large_image"/> <meta name="twitter:title" content="Title Of Your Content Here"/> <meta name="twitter:description" content="Description of your content here"/> <meta name="twitter:site" content="@yourusername"/> <meta name="twitter:image" content="http://www.yoursite.com/yourimage.jpg"/> <meta name="twitter:creator" content="@yourusername"/>
(Remember—the twitter:creator tag is only relevant when twitter:card has been set to summary_large_image).
Once on your site, see the section below to validate them.
Adding Social Meta Tags To a Wordpress-based Website or Blog
WordPress plugins and themes mean that adding social meta tags to a Wordpress-based website or blog is quick and easy, and may already be taken care of.
As with non-Wordpress sites, the first step is to check your source code and see exactly what's showing up. You don’t want a set of Open Graph tags to show up multiple times, which can happen if you're using a plugin only to find your theme has already added them.
The best plugin to use to add adding social meta tags is Yoast, which you may already have to help with SEO.
Presuming you have the plugin installed, here's how you use it to add the tags to your site:
- Go to SEO > Social
- Click on the Facebook tab
- Click to Add Open Graph meta data—this automatically creates the Open Graph tags you need for all your posts and pages
- Optionally set the title, description and image for the front page of your blog via Frontpage settings:
— Image URL: Set this to avoid an image being used from a recent blog post being used instead.
— Title and Description: Only set these if you want different information to what you already have set as the blog title and meta description (*Titles & Metas *within Yoast) .
- Under Default settings, set the Image URL to be the same as the Image URL above—this means a suitable image will be used even if a particular post or page doesn't contain any images itself.
- Click Save Changes.
- Adding Twitter Card tags to your site is even simpler:
— Click the Twitter tab. — Tick the Add Twitter card meta data checkbox, and select the type of card you want to use. — Click Save Changes.
How To Validate The Tags Once Added
Check your social meta tags have been added in the right way with these free online validation tools. There's one for Open Graph and and one for Twitter Cards.
Check multiple pages on your website, rather than e.g., just your home page.
Here's how to use each one...
- Go to Facebook’s validation tool
- Enter the URL of the link you want to validate, and click Debug
Check for any errors and correct accordingly.
- Go to Twitter’s Card Validator
- Enter the URL you want to check, and click Preview card
Again, check for errors and adjust as needed.
You now have everything you need to take full advantage of social meta tags for your site and optimize engagement levels when people share links to your website.