How to Add Social Meta Tags to Your Website

12/8/2016

How to Add Social Meta Tags to Your Website

If you have built a business website or have established a web content strategy for your blog, social media can be a powerful tool to ensure that you expose your content to new readers and use your content to win over potential clients. But many website owners aren't getting everything they can out of viral content shares because they aren't playing an active role in how their content is presented when someone tweets a link to their website or shares a blog post on Facebook.

The good news is that it is easy to add social meta tags to your website, and doing so allows you to have a lot of control over how your content appears when it's shared on social media. This can help to increase the engagement your content receives when it is shared. It's easy to take advantage of these meta tags, and even site owners with no coding experience can do so.

In this article I'll walk you through how to add custom Meta OG tags and Twitter Card Meta Tags to your website with examples of how your content will appear with and without these additions (this will help to demonstrate what kind of impact they can have.

What is a Social Meta Tag, And Why is it Important?

Meta Tags are defined by the W3C Schools as tags which provide information about the HTML document (webpage). They aren't visible to users or displayed anywhere on your webpage, but they are machine parsable.

Some examples of common meta tags are the Meta Title tag, the Meta Description tag, and more. These are used to help clarify the content of the page for search engines, and properly optimizing your meta tags can help with on-page SEO.

Optional tags, which are generally not included on HTML webpages by default are social meta tags, which are used by webmasters to specify the appropriate title, description and image which should be used when content is shared on social media.

Here's an example of a few identical tweets in which I share a link to a page on ardorlitmag.com. The first tweet occurred before I added social meta tags to the page:

And here's an identical tweet in which I shared the same link. The only difference was that I had added social meta tags to the page's <head> section:

Tweet with Twitter Card and Social Meta Tags Added

As you can see, there's a pretty huge difference in the visibility. Any share of the second page on Facebook or Twitter will enjoy a prominently displayed image (the one I've chosen), title (the one I've written), and description (the one I've written). This can translate into a lot more reach to every single share of your content.

So now that you know what adding social meta tags to your website content can do, let's quickly cover what you need to do to add them to your site.

What Are Meta OG Tags & How to Add Them

Meta OG tags are the most commonly used social Meta Tags. Adding these meta tags which use the Open Graph Protocol will specify the content you'd like social media platforms to reference and use to enhance shares of your content.

Open Graph Meta Tags should be added to your webpages and blog posts anywhere in your page's header (between <head> and </head>. There isn't really an incorrect placement within the head section of your pages, but I like to add them below the page's title and description, as I feel that's the most natural placement.

The basic Metadata I would recommend that you add to all of your web pages includes:

og:title - The title of your object as it should appear when shared. This can be different from your page's Meta Title which is optimized for search engines. Here you can specify an appropriate title designed to catch people's eye and generate clicks.
og:description - This is the basic description of your object which should appear when it is shared. Again, this does not have to match the Meta Description which you've written for SEO purposes, the og:description content should complement your title and be thoughtfully written to maximize social clicks.
og:image - This will be an image URL which is representative of your page's topic/content. It will be the image file which is used when your content is shared on Facebook or other social media platforms. This image does not necessarily need to appear within the page's content (though it can). This fact is nice, because it allows you to reference an image file which is large and sized appropriately for social sharing.
og:url - This is the canonical URL of your object. It will be the URL which is used as its permanent ID, and when you share a link to the page, anyone who clicks the enhanced open graph object which is displayed will be taken to this URL.

Here's an example of how these OG Meta Tags may look within the HTML of your page once implemented:

Of course there are many more structured properties which are considered optional metadata that you can add under the OG Protocol. There's a lot of great information about what these properties are, and how to add them on the official site. If you add the tags above, you'll have enough to benefit from the tags when links to your content are shared on social media.

What are Twitter Cards and How Do I Add Them via Social Meta Tags?

You've already seen an example of Twitter Cards enhancing a tweet in this post, and you can read more about them on the Twitter Developer's Site. In short, Twitter cards are a way to mark up rich media data like photos and videos to enhance shares of your content and drive additional traffic to your website.

There are presently four Twitter card types that you can easily add to your website, and you should choose the most appropriate type of card for each page, depending upon your goals. The four popular types of Twitter Cards are:

Summary Card: This type of twitter card includes data such as a unique title, thumbnail, and Twitter account attribution. Learn More
Summary Card with Large Image: This type of Twitter Card is similar to the generic summary card above - the primary difference is that the image is featured much more prominently. This is the Twitter Card type used in the example tweet eariler in this post, and it's what I recommend for most pages. Learn More
App Card: This is a card which is designed to detail a mobile app, and it features a link to download your app. It's a great choice to use this card on a page you share and use as your "Pinned Tweet," as it can really help to increase the number of app downloads you receive from Twitter users. Learn More
Player Card: This is a card which is intended to provide video, audio or other rich media embedded within the Tweet. Learn More

When Adding your Twitter Card Meta Tags to a page, you can do so in a similar way to the Meta OG tags mentioned above. I generally recommend adding both, with the Meta OG tags first, followed by the Twitter Card Meta Tags. Here's an example of how you could implement both within the <head> section of your webpage:

<head>
<title>Your Search Engine Optimized Meta Title</title>
<meta name="description" content="This is your meta description, optimized for search engines." />
<meta property="og:url" content="http://www.YourSite.com/YourPage.html" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.YourSite.com/Your-Image.jpg" />
<meta property="og:title" content="Type Your Title Here" />
<meta property="og:description" content="Type Your Description Here" />

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourSite'sTwitterHandle">
<meta name="twitter:creator" content="@YourSite'sTwitterHandle">
<meta name="twitter:title" content="Type Your Title Here">
<meta name="twitter:description" content="Type Your Description Here">
<meta name="twitter:image" content="http://www.YourSite.com/Your-Image.jpg">
....
</head>

After you've added your Twitter Card Meta Tags and published your page, you can test it out with Twitter's Card Validator Tool, to preview how the card will appear when a link is shared, and to confirm that it's all working the way you'd hoped.

Final Tips for Optimizing Your Image for Social Meta Tags

Two final points I wanted to mention which address common issues people have with sharing links on Facebook and not having the post appear as they like or in the way they've specified in their Open Graph Protocol Meta Tags.

First, if you're seeing an image which is on the small side and doesn't fill the full width of the Facebook feed, this is likely because your image is too small, or the aspect ratio isn't quite right. I would recommend using a larger image (but no larger than 5mb) as the og:image file. This will ensure that your image will occupy the full width of the Facebook feed, LinkedIn, etc. where it is shared. Generally if your image is less than 400 pixels wide, it might appear small within the enhanced link card that gets generated upon a share.

And secondly, if you experience any issues when sharing a page on Facebook, you can use Facebook's OG DeBugger Tool to troubleshoot. One common issue is that you've updated your page's OG Meta Tags, but the old version still appears when you share a link on Facebook. To fix this, you just need to fetch the page URL using Facebook's De-Bugger. This will clear the cached version of the OG data associated with your page and should resolve the issue, or at least identify the issue, if it wasn't related to cacheing.

Good luck, and I hope you've found this article helpful!

You Might Also Like: How to Create an XML Sitemap or My Guide to SEO Keyword Research

10 Comments

Fonix link

8/25/2017 01:38:54 pm

Pls help me on how to fill in the text needed in the code
When i share my page link on Facebook ot will show "your description here"

Joe Hessert link

8/25/2017 02:03:36 pm

If you use the code above and update the og:description tag (adding your description inside the quotes following content= ) that should do it. You may need to use the Facebook debugger (linked in article) to do a fresh fetch of the page after adding the description, or it will continue to reference the "your description here" which it had cached.

Good luck!

Josh link

11/27/2017 09:20:14 pm

Hey Joe,

Thanks for sharing this content, really appreciated.

I’ve been noticing that my blog posts aren’t displaying the amount of facebook likes they receive (at least when I check the blog on my web browser) (I publish a post, then use Hootsuite to schedule daily statuses to my News Feed). I’ve checked the links (after posting to fb) and they include “https” but when I open up the fb OG debugger, and review the meta data of the https link, it shows the link as “http” under <meta-property=“og-url”...>

What do you suggest I do to ensure future blog posts include “https” in the OG content to ensure all likes are collected, and displayed, on each blog post?

11/28/2017 07:19:09 am

Hi, Josh

Usually this happens when there are too many redirects happening to force ssl in your site's htaccess or js config file, but I don't mind looking into it more for you.

Is there an article on your site where you're seeing this that you could point me to as an example?

azhar mujawar link

3/28/2018 10:06:59 am

Good Explanation of social tags .....

Joe link

4/5/2018 07:03:35 am

Thanks, Azhar! Glad you found it helpful.

sheetal link

4/5/2018 02:31:42 am

when we use another blog to share then title description etc show previous one blog how to set that it contain same blog title,description etc.i dont want to change title, img, description again and again.

4/5/2018 07:02:41 am

Hi Sheetal,

I'm not really sure what you're asking. Could you clarify?

4/5/2018 07:16:51 am

I used social media share button in my website used inline coding of sharethis website and used meta tag in index file like
<meta property="og:url" content="" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Financial Planning" />
<meta property="og:description" content="Financial Planning" />

then it contain fix title,description etc. how is it possible to use dynamic share button that when we share other blog than it contain other blog title,description and etc.

Michel link

12/27/2018 08:11:02 am

Is it useful to put both site and creator handler if they are the same ?

Search Engine Optimization