How to Add Social Meta Tags to Your Website
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?
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:
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
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.
<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" />
....
</head>
What are Twitter Cards and How Do I Add Them via Social Meta Tags?
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
<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>
Final Tips for Optimizing Your Image for Social 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.