Open Graph Meta Tags

What Are Open Graph Meta Tags?

<meta property="og:title" content="Yoga for beginners" />
<meta property="og:description" content="This article explains yoga to beginners." />
<meta property="og:image" content="https://yourdomain.com/beginner-tiger-pose.jpg" />
<meta property="og:url" content="https://yourdomain.com/yoga-for-beginners" />
<meta property="og:type" content="article" />

Similarly, this is what an Open Graph meta tag looks like in the site’s code. 

The Open Graph protocol was initially developed by Facebook in 2010. However, it is currently used by multiple social media and messaging apps, including X (formerly Twitter), WhatsApp, Telegram, and Slack. 

Uses of the Open Graph Meta Tag

You may have observed that whenever you share a link on social media or messaging apps, it displays as a preview containing the details of the content. The specific details will differ but it usually includes the content’s title, image, and description.

The data used for the preview is extracted from the Open Graph meta tag. Search engines, for their part, do not typically display any preview using the Open Graph meta tag. However, they usually crawl it to better understand your content.

Importance of the Open Graph Meta Tag

The Open Graph meta tag is important because it gives you control over how your content appears on social media apps. This ensures your content is attractively and accurately displayed when shared. This can in turn improve its shareability, engagement, and click through rates. 

That said, you can add Open Graph meta tags to your site using Rank Math. All you have to do is to install Rank Math, and Rank Math would automatically generate your Open Graph meta tags and add it to your posts and pages without requiring any additional effort from your end. 

List of the Required Open Graph Meta Tags

There are multiple Open Graph meta tags out there and a page can contain as many as a blogger decides to include in the content. However, some Open Graph meta tags are compulsory while others are optional. These are the five Open Graph meta tags that every blog must have.

1 og:type

The og:type tag specifies the type of content being shared. This helps social media platforms understand how to display your content. For example, a “video” type will trigger a video player, while an “article” type may highlight the author and publication date. 

2 og:title

The og:title tag specifies the title of your content. This title is often the first thing users see, so it should be concise, engaging, and relevant to the content.

3 og:description

The og:description tag offers a brief summary of the content, giving users a preview of what to expect when they click through. This description should be concise, informative, and enticing to encourage engagement. Note that unlike meta descriptions created for search engines, this tag is tailored for social media audiences. 

4 og:url

The og:url tag provides the canonical URL of the content being shared. This is particularly important for avoiding duplicate content issues and ensuring accurate analytics tracking. It also ensures that social media apps attribute shares and interactions to the accurate URL.

5 og:image

The og:image tag specifies the URL of the image that will represent your content when shared on social media. This image is crucial for grabbing attention and encouraging clicks, as visuals are often the most noticeable element in a social media post. 

There are also other Open Graph meta tags including many specifically created for X (formerly Twitter), Yandex, and ecommerce products. You can refer to this guide to learn about the available Open Graph meta tags and how to configure them to ensure your content appears exactly as you want on social media apps. 

Open Graph Best Practices

The Open Graph allows you to display your content the way you want and optimize it for shareability. Here are some best practices to put in mind when optimizing your it.

1 Use a Compelling, Accurate, and Clickworthy og:title

The og:title tag should be engaging and accurately reflect the page’s content. It should be concise, ideally under 60 characters, to ensure it fully displays on social platforms. A well-crafted title increases click through rates and improves user engagement.

2 Include a High-Quality, Relevant, and Well-Formatted og:image

The og:image tag should be relevant, visually appealing, and meet the recommended dimensions and format. For example, it is recommended to use a 1200px X 630 px image as anything smaller or larger may not display accurately. 

High-quality images also grab attention and make your content stand out in crowded social feeds. Low-quality, low-resolution, and unrelated images, on the other hand, can deter users from clicking.

Overall, the Open Graph protocol requires your image to meet certain specifications and be formatted in a certain way before it can be displayed. You can refer to this guide for your Open Graph image requirements. 

3 Specify the Correct og:type For Your Content

The og:type tag defines the nature of your content, such as whether it is an article, video, or website. Make sure to use the correct og:type tag as it ensures the social apps understand your content and correctly categorizes and displays it on their platforms.

4 Provide a Clear, Concise, and Descriptive og:description

The og:description should summarize the content in a way that entices users to click. It should be under 200 characters and must be informative and relevant. That way, visitors who view the description know what to expect when they access the content. 

5 Specify the Canonical URL Using og:url

The og:url should point to the canonical URL of the content. It helps to avoid duplicate content issues and ensures that the shares are attributed to the canonical URL rather than to the duplicate page. 

6 Use Unique Open Graph Tags for Each Page

Each page should have its own unique Open Graph meta tag. This avoids confusion, provides uniqueness to the page, and improves the chances that your content will be clicked when shared. 

7 Validate Your Open Graph Tags

Several apps have validator tools that allow bloggers to preview their URLs and ensure their Open Graph meta tags work properly. For example, Meta has the Sharing Debugger while LinkedIn has the Post Inspector. 

Enter your URLs into the relevant tools to see how they would appear on that specific platform. Each platform may render tags differently, so testing helps identify and fix potential issues.