Boost your social media engagement through meta tags

Estimated reading time: 3 minutes

Enhance the social media sharing features of your site links by implementing the following meta tags:

1) Open Graph (OG) meta tags

These are pieces of code that control how your site’s URLs are displayed when shared on Facebook, but these are also used on other platforms like LinkedIn and Twitter when no Twitter markup tags are detected (more on this later).

These help social media platforms understand what your content is about, and will help increase your brand’s visibility through search. Further, users are more likely to see and click content with optimized OG tags, which can increase your website’s traffic.

^{(Figure 1: Open Graph tags used on 1902 Software’s price list page.)}

Facebook lists 17 OG tags, but only four are the most basic meta tags that you should use:

• og:image – set URL of the image that represents the web page’s content.
• og:url – represents the URL to a unique image representing the content of the page.
• og:title – represents the title of the web page. It should not include any branding such as your site name.
• og:description – set a brief description of the web page’s content, usually between 2 to 4 sentences.

Facebook has created the Sharing Debugger tool to check if there are errors and suggestions for OG tags. It also shows what the og:image looks like, the title and description used, and so on.

^{(Figure 2: The ‘Link Preview’ section shows how https://1902software.com/pricelist/
will appear when shared on Facebook.)}

2) Twitter Card markup tags

These work the same as Open Graph meta tags. These tags will control the preview of your site’s links when shared on Twitter.

^{(Figure 3: Twitter Card markup tags used on 1902 Software’s price list page.)}

There are different card types you can choose from, and each type supports and requires a specific set of properties. In the example above, we used the ‘summary’ card type and here are the properties used:

• twitter:card – represents the card type. In this case, we used ‘summary’
• twitter:image – represents the URL to a unique image representing the content of the page. Generic images like the website logo or author photo should not be used.
• twitter:title – represents the title of the web page.
• twitter:description – set a description that summarizes the web page content. Do not re-use the title as a description.

Like Facebook, Twitter also has a card validator tool that can be used to test if there are errors on the markup tags implemented. As of August 2022, however, the Twitter card preview was moved to the Twitter composer. If you want to check the Twitter card preview, you can see it directly on the Twitter composer as you post your tweet. You can still use the card validator tool’s log section for debugging purposes.

^{(Figure 4: The ‘Log’ section shows the meta tag information detected from https://1902software.com/pricelist/ page)}