Social media sites are a valuable tool to encourage customer engagement, gain maximum exposure and boost online traffic. Consequently, it is essential now to pay close attention to how your site is presented when someone shares a post on Facebook or tweets a link to your website. Meta tags are a way to customize your website appearance in tweets and posts. These tags are hidden from the sight of online users and tell social media platforms exactly how to display your website online. The representation of your page on social media posts greatly influences online traffic and subsequently the search engine ranking.
The best part is that adding social media tags to a website is not a complicated job. In this article, we explain how you can 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. These tags are recognized by all major social media platforms including Facebook, Twitter, Google+, and LinkedIn. These sites will extract information from the meta tags and present your website link accordingly.
The table below shows the common OG tags used to display the website link:
The OG tags are added to the HTML code, and appear something like the below representation:
To ensure the OG meta tags are properly configured, one can use Facebook for the developer’s Open Graph Debugger. This tool allows you to check how your website appears to others when shared on Facebook, Google+, Messenger or other such platforms.
2. Schema Tags: Another way is using schema tags which are an alternate solution for Google+, LinkedIn, and Pinterest. Somewhere similar to the OG tags, the schema meta tags are also used to customize the title, URL, description, and image that appears when a website is shared on a social media site.
Here is how the schema meta tag appears when inserted into HTML:
The Google Structured Data Testing Tool can be utilized to test the schema meta tags.
3. Twitter Cards: Using Twitter cards to add social media tags for Twitter codes can enhance tweets and fetch additional traffic to your site. These tags can be used to create metadata for photos and videos.
Currently, four types of Twitter cards can be added and one should select the tag appropriate for his webpage. The four types are:
Summary Card with a Large Image — This tag provides information about the unique image, title, and Twitter account attribution of a webpage.
Summary Card — This tag is similar to the above tag, however, the image is smaller and less prominent.
Player Card — The player tag is used to embed rich media such as audio and video in the tweet.
App Card — This is designed for a mobile app with a corresponding link to download the app. Using this card can increment the number of app downloads from Twitter users.
Twitter cards can be added to the header section of the website in the same way as OG and Schema tags. Below is a sample of how Twitter card tags look when added to HTML.
To test the Twitter Card tag, you can use the Twitter Card Validator Tool and preview how the tag will appear on the webpage. Necessary modifications can be made thereafter.
Next, we review a few tips for optimizing Social Media Meta Tags:
It is essential to use online tools to review how posts about your site appear on social media pages. This will reduce the probability of an unappealing tag. For example, it may happen that the image does not fill the full width of the feed. To resolve this you can use a large image with a width that exceeds 400 pixels. Hence, using tools minimizes the risk of error and improves tag appearance.
1) It is recommended to test different versions of an image to see which displays the best. Additionally, modify the image on each social media platform to appeal to the unique preferences of the network’s online audience.
2) Another issue that may occur is an older image being displayed after updating the meta tag. To fix this problem, clear the cached version of the OG metadata of the page.
3) Lastly, consider using different versions of meta tags for better control over how your post displays on different networks. Try using both Twitter cards and OG or schema meta tags for the best results.
4) Apart from adding meta tags in HTML, you can also employ tools such as WPSSO, WordPress SEO by Yoast, and JM Twitter Card for adding social media tags. Creating social media meta tags is a good way to make your website posts more presentable on social media and increase your website traffic.