Social media can be a powerful tool you can use to take your website to a whole new level of customer engagement. You can gain maximum exposure, boost your online traffic, and gain additional leads through various social media platforms. While creating meta tags isn’t a ranking factor, the way your page appears on social media posts will influence online traffic and subsequently search engine ranking. That’s why it’s important that you pay attention to how your site is presented when someone shares a post about your business online. Want to know what meta tags are and how to create them for your social media platforms? Read on to find out.
What are Meta Tags?
Meta tags, in simple words, are a set of HTML codes. They are inserted into the webpage content in order for Google and other search engines to understand what your webpage is all about. Meta tags are also known as metadata. This data is also relevant to the webpage title, description, and website content which helps the search engines to provide results to the users (SERPs).
Similar to how webpage title tags and description tags help in rankings; social meta tags are the elements in HTML that can help improve and increase social exposure, traffic through social media, and also higher click-through rates.
Importance of Social Media Meta Tags
We all use social media in our daily lives right? When we decide to post something on a platform, may it be a selfie, a group photo, or anything of any sort, we tend to add a thoughtful caption that provides a description of the content of the image. You want the image and text to be as attention-grabbing as possible so that people will investigate your content further, and maybe even end up on your website.
A standard Social Media post includes a high-quality image with an eye-catching heading title. From there you either add a short description or the description is generated when you include the URL. Here social media platforms such as Facebook, Twitter, and others draw these features from the website you share it from to make it look the way you want it to be. You can control what is being pulled from the post you decided to share including social media meta tags.
When you share it on Facebook, meta tags are used to help determine what will be displayed in the Facebook post. If you don’t include these facebook meta tags, then there is a chance the posts will be displayed in a way that won’t get you clicks. The same works for Twitter as well, in this case, it has Twitter meta tags.
Why do you need social meta tags?
Social meta tags are one of the most crucial elements in social media platforms. If you plan to start specific campaigns on these social platforms, it is wise to control the content that is displayed. Ensure the title, description, URL and other factors are present and optimized. This can be done by social meta tags. Social meta tags amplify and highlight your content improving its search visibility and helping to boost and improve traffic with clicks and shares.
Now let’s take a look at the different types of social meta tags and how they work:
Types of Social Meta Tags
1. Open Graph Tags (og tags)
Open graphs or otherwise abbreviated to “og:” tags. Using Open Graph tags (OG tags) is the standard way to implement social media tags. These tags are technically used for Facebook as they were created by Facebook itself. Apart from Facebook, open graph tags are used in LinkedIn and Twitter as well.
A sample og: tag looks something like this:
<meta property="og:title" content="How to create Awesome Meta Tags for your Social Media Platforms?" />
The example above is for input for a title text which will be shown for the post. It is called og:title tag.
The table below shows the common OG tags that are used for displaying the link.
Table – OG Tags for Social Media
The OG tags are added to the HTML code, and they look something like this.
<head>
…
<meta property=”og:title” content=”Digital Marketing Checklist” />
<meta property=”og:description” content=”This updated digital marketing checklist will help to identify & implement your forthcoming online business strategies in 2019.” />
<meta property=”og:image” content=”https://webbymonks.com/blog/wp-content/uploads/2018/05/Digital-Marketing-check-list-2018-2019-1024×375.jpg”/>
<meta property=”og:type” content=”article” />
…
</head>
If you scroll through Facebook and you come upon a post, look for its custom thumbnail with a title and short description. You can see the og tags being in place in the thumbnail. Open graphs affect the sharing potential of a post's content. It is comparatively easy to add as there are several plugins available to do so.
2. Twitter Tags
Using Twitter cards is another way to add social media tags for Twitter. Twitter cards can be depicted as the image shown below:
In Twitter cards, you can attach photos, video clips, and other media which can help drive traffic to your website when you provide a link to the website as well.
Using the codes can enhance tweets and get additional traffic to your site. The tags can be used to create metadata for photos and videos.
At present, you can add four types of Twitter cards. You should select one that is appropriate for a webpage.
- Summary Card with a Large Image — This tag gives information about the unique image, title, and Twitter account attribution of a webpage.
- Summary Card — This tag is similar to the above tag with the exception that the image is small and less prominent.
- Player Card — The tag is used to embed rich media, such as audio and video, in the Tweet.
- App Card — The tag is designed for a mobile app with a link for downloading the app. Using the card can boost the app downloads from Twitter users.
Similar to Facebook tags, Twitter uses open graph tags to determine the content and how it shows when being posted on the platform.
Here is a sample of how the Twitter card tags look when added to HTML.
<head>
…
<meta name=”twitter:title” content=”White Label SEO Services”>
<meta name=”twitter:description” content=”Click here to learn about effective White label SEO practices.”>
<meta name=”twitter:image” content=”https://www.webbymonks.com/blog/white-label-SEO-services”>
<meta name=”twitter:site” content=”@WebbyMonks”>
<meta name=”twitter:creator” content=”@WebbyMonks”>
….
</head>
If you would like to test the Twitter Card tag, you can use Twitter’s Card Validator Tool. You can preview how the Twitter card will appear and make changes if required.
3. Schema Tags
Schema tags can also be used to create social media tags to display your site. The schema markup is an alternate solution for Google+, LinkedIn, and Pinterest.
Similar to the OG tags, the schema meta tags are used to customize the title, URL, description, and image that is shown when a website is shared on a social media site. Here is how the schema meta tag appears when inserted into HTML.
<head>
…
<meta itemprop=”name” content=”White Label SEO Services”>
<html itemscope itemtype=”https://webbymonks.com/search-engine-optimization.html>
<meta itemprop=”description” content=”Want to know about time-tested SEO tips and tactics? Here are some tips to boost website search engine ranking”>
<meta itemprop=”image” content=”https://www.webbymonks.com/white-label-SEO-services”>
…
</head>
You can use the Google Structured Data Testing Tool to test the schema meta tags. Just copy and paste the code and click on test.
4. Facebook Meta Tags
Facebook Meta tags include open graph tags which are basically created by Facebook itself as we discussed earlier in the open graph section. These meta tags or properties are social meta tags or og tags. There are seven og meta tags in HTML:
- og: title
- og: description
- og: url
- og: site_name
- og: image
The following are og property tags that are aligned with og: image meta tag:
- og:image:type
- og:image:alt
- og:image:width
- og:image:height
Guideline on using social meta tags
Facebook and Twitter have guidelines on how to use and include these social meta tags. The guidelines with respect to its meta tags are shown in the table below:
| Meta Tags | ||
| Title | og:titleThe main title of the article. | Twitter title:Title of the content with a maximum of 70 characters. |
| URL | og:URLThis tag should include the canonical URL of your page. The URL should be undecorated without counters or user identifying parameters or session variables. | No Twitter URL is used for Twitter cards. |
| Image | og image:When someone shares any post to Facebook, a URL of the image shows up. The size should not exceed 5mb and the pixel sizes should be a minimum of 600x315 to 1200x630 and higher according to the limited size. | Twitter image:Twitter cards support images with less than 5mb in size and with a minimum of 144x144 pixels to a maximum of 4096x4096 pixels. Image formats such as JPEG, PNG, GIFs, and WEBP are supported. The URL should be related to the content, your website logo, photo of the author, or any other irrelevant images. |
| Description | og description:It is better to not include a description with more than 2 to 4 sentences. Short creative sentences make it easier for the user to understand what the post is and force him/her to click on the post. Like any other, the description will be displayed after the title. | Twitter description:The description for the Twitter card should not be more than 200 characters. It should include the summarization of the whole content. You should add the general services provided by the website or re-use the title as the description. |
Tips for optimizing social media meta tags
It is important to find out how your posts are appearing on social media platforms. Several issues may arise such as the title is not up to standard, the description exceeds the limit, the image is not up to the required size or pixels, etc.
When an image is not up to the standard or recommended size of the platform, it can affect the post in general thereby making it difficult for the user to interact with, and it will lead to reduced traffic on your website.
To improve the user experience, it is important to create and upload images of different sizes and pixels on each social media platform. This can have a great impact on your website traffic. Another issue can include the usage of metadata and control over how your posts are displayed on different social media platforms. Use og tags or sigma tags according to the platform you want it to be.
Looking Ahead
Creating social media meta tags and implementing them across different social media platforms can have a huge impact on your overall website traffic. Apart from adding meta tags in HTML, you can also use tools such as WPSSO, WordPress SEO by Yoast, and JM Twitter Card for adding social media tags.
FAQs
Definition of social media tags
Social media meta tags help in specifying how your content should be displayed.
What is meta description
Meta description is generally just a summary of the webpage content explained in 160 characters.
How many characters should consist of meta description?
The meta description of a website should not exceed more than 160 characters.
Why are social meta tags added?
Social meta tags help in generating more traffic and improve search visibility.
Is it important to add social meta tags?
It is the ideal option to add social meta tags. You only have to add it once and never be bothered about it again.
Are meta tags a strategy for SEO?
Meta tags are important for SEO. Adding social meta tags, and optimizing the content with more shares and clicks will have a positive impact on SEO.
on
Amazing post, thanks for sharing this article.
on
Thanks for sharing information about Meta Tags in Social Media Marketing platforms unique content preferences
on
You should test different versions of an image to see which displays the best. Also, you should modify the image on each social media platform to appeal to the unique preferences of the network’s online audience.
nice post
on
Thank you nick! Your provided information is very good. It’s really helpful.
on
Hi Nick, I have recently started to going through the entire process of re-doing all my META info on my website and this article in particular helped me make a few decisions I hadn’t yet decided on. Appreciate the info. Cheers