Social media sites can be a powerful tool 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. That’s why it’s important that you pay attention to how your site is presented when someone shares a post on Facebook or tweets a link to your website.
Using meta tags, you can customize the way your website appears in tweets and posts. The tags that are hidden from the sight of online users tell social media platforms exactly how to display your website online.
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.
Adding social media tags to a website is not that difficult. In this article, you will know how to create the perfect meta tags for different social media platforms.
1. Open Graph Tags
Using Open Graph tags (OG tags) is the standard way to implement social media tags.
The tags are recognized by all major social media platforms including Facebook, Twitter, Google+, and LinkedIn. These sites will pull information from the meta tags and display your website link accordingly.
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.
<meta property=”og:title” content=”Digital Marketing Checklist” />
<meta property=”og:url” content=”https://webbymonks.com/blog/trends/digital-marketing-checklist-2018-2019/” />
<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” />
You can use Facebook for developer’s Open Graph Debugger to test whether the OG meta tags have been properly configured. The online tool allows you to see how your website appears to others when it’s shared on Facebook, Google+, Messenger, and other social media platforms.
2. 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 also 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.
<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”>
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.
3. Twitter Cards
Using Twitter cards is another way to add social media tags for Twitter. 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.
You can add the Twitter cards to your webpage, and it is quite similar to adding the OG tag and Schema tags mentioned above. Similar to the other tags, you add the Twitter cards to the header section of the website. Here is a sample of how the Twitter card tags look when added to HTML.
<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”>
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.
Tips for Optimizing Social Media Meta Tags
You must use online tools to review how posts about your site would appear on social media sites. One issue you may face is that the image does not fill the full width of the feed. To resolve this problem, you should use a large image with a width that exceeds 400 pixels. However, the image should not be more than 5mb in size.
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.
Another issue that may occur is an older image being displayed when you’ve updated the meta tag. A fix for this problem is to clear the cached version of the OG metadata of the page.
Lastly, you should consider using different versions of meta tags for more control over how your post displays on different networks. Consider using both Twitter cards and OG or schema meta tags for the best results.
Creating social media meta tags is a good way to make posts about your site more presentable on social media. This will also improve your 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 the social media tags.