Open Graph Checker

About Open Graph Generator & Preview Tool

It takes a lot of time and effort to build a website and a lot of relevant content to maintain that website. But that efforts are worthless without the followers.

What comes to mind when you want to reach a broader audience for your new website or post?

Without any doubt, the social media platforms. The massive audience of Facebook and Twitter make them the best platform for sharing.

But the question is, do you know how to optimize for these platforms?

What is Open Graph?

Open Graph is a protocol introduced by Facebook in 2010. Open Graph is an internet protocol created to standardized the use of metadata within the web page to represent that page's content on social media platforms.

What is the purpose of Open Graph?

The Open Graph allows the user to integrate their website with Facebook by allowing them to become rich graph objects to have the same functionality as the other Facebook objects. The other social media platforms like Twitter and LinkedIn also recognize Open Graph meta tags. Twitter has its meta tags for the Twitter Cards, but if its crawler cannot find them. Twitter uses Facebook Open Graph meta tags instead.

Some basic Open Graph Meta tags

To get the advantage of the Open Graph protocol, you will need to add the following meta tags to your website's HTML code.

The tags will be added in the following pattern.

<meta property="[NAME]" content="[VALUE]" />

Some basic Open Graph meta tags are

• og:title The tag defines the title of your content. There is no limit to the characters' number, but it should stay between 60 to 90. If your title is lengthier than 100 characters, Facebook will limit it to 88. It's better to have it under 55 characters because it ensures that your title will be visible on both desktop and mobile.

  Example: <meta property="og:title" content="Title of your content" />

• og:url The defines the URL of the webpage with which the object is linked.

  Example: <meta property="og:url" content="https://www.yourdomain.com" />

  Use the canonical URL. That helps to consolidate all the connected data, such as likes, across all the duplicate URLs posted.

  The provided URL will not show on the Facebook newsfeed. Only the domain will be visible.

• og:type The tag defines the content type that you are sharing. Either it's web-based, entertainment, place, people, or business. There are several other types. You can get the complete list of types from here.

  Example: <meta property="og:type" content="content-type" />

• og:description The tag defines your content's short description, but it should be more than 200 characters. However, there is no proper limit. You can display up to 300 characters, but it's better that you should limit this to 200.

  However, the best practice is that it should be under 55 characters.

  Example: <meta property=" og:description" content=" your content short description."/>

• og:image Everyone knows the importance of placing the image in the content. The eye-catching image always stands out. Without the image, your content is boring. Therefore, it's better to place an image in the meta tag.

  Ensure that the image should not exceed 5MB and 1200 x 630 pixels (1.91/1 ratio) as Facebook imposes these limitations for image tags.

  Example: <meta property="og:image" content="image URL" />

  Note: Add og:image:width and og:image:height meta tags to ensure a perfect snippet the first time someone shares it.

  <meta property="og:image:width" content="1200"/>

  <meta property="og:image:height" content="630"/>

Some advanced Open Graph Meta tags

There are some advanced tags that you can use to provide more in-depth information.

• og:locale It defines the language. Use that if you want to localize your tags. American English en_US is the default.

• og:site_name It defines the name of the overall website on which your content is. If you are on a blog post page, your title would be the blog post's title, and the site_name would be the site of the blog or the website on which your blog post is.

• og:audio or og:video For adding the additional audio or video files.

• fb:app_id For linking a Facebook application with the object.

What is Open Graph in SEO?

Integrating Open Graph meta tags within your website allows the developers to control what content or information should be shown or shared when their website or webpage is linked with Facebook or other social media platforms.

It provides a degree of control. The information contained in the Open Graph meta tags helps in raising your social media interaction. It increases your webpage visibility on Facebook, Twitter, and other social media platforms. These are the same goals that a website master wants to achieve.

What happens if I don't have Open Graph Tags?

Often, social media sites try their best to create a preview of your web content when linked with them. But sometimes that doesn't usually go so well. If you don't have Open Graph meta tags on your website, you are left at the mercy of the social media site's content generator. That may not represent your website on social media platforms as you would prefer. Therefore it is advised to create your Open Graph meta tags and incorporate them with your HTML code (in the <head> section of the website). It allows you to retain control on your Open Graph meta tags, and you can change their content as per your needs.

My website isn't showing correctly on social media sites; what should I do?

When sharing your website on social media, there're possibilities to look different from the preview here. The main reason is your website is shared before, so any changes you made might not appear.

Click any of the official Open Graph debugger tool below to validate your tags:

• Facebook: https://developers.facebook.com/tools/debug/
• Twitter: https://cards-dev.twitter.com/validator
• LinkedIn: https://www.linkedin.com/post-inspector/
• Pinterest: https://developers.pinterest.com/tools/url-debugger/