Open Graph​ meta tags for Facebook and Twitter Cards

Open Graph(OG) technology was first introduced by Facebook in 2010. It permits a user to integrate their website with Facebook by allowing them to become rich “graph” objects with the same functionality as other Facebook objects.

Facebook’s Open Graph gives permits you to specify metadata to optimize how your content appears in a user’s timeline at the time of sharing.

Open Graph is designed principally to social networks like LinkedIn, Facebook, Google +, Twitter and not to search engines like Google, Bing etc.

Twitter has launched its own Twitter cards and if its robots can’t find any on a website they use the Facebook open graph meta tags alternately.

Why Open Graph tags are Important?

Open graph tags provide correct information about your website and search engines check them.

Social shares help SEO because it signals to Google that people like your content.

The information contained in the open graphs protocol of a website helps in raising its ranking to higher positions on the search result page.

It means that open graph tags on a website will increase visibility on Facebook and other social media sites and also better ranking better.

These are exactly those goals that a webmaster and website owner want to achieve.

So ignoring social for SEO is not a great idea.

Learn On page SEO and check the On-Page SEO Checklist.

Types of Open Graph

og:title

This is the title you would like to appear when your content is shared on social media.

It serves a similar purpose as the common meta title tag in your code. In fact, if Facebook doesn’t find the og:title tag on your page, it uses the meta title alternately.

The ideal length is between 60 and 90 characters, although sites like Facebook will break at 88 characters, so try to keep below that.

<meta property="og:title" content="INSERT TITLE HERE"/>

og:description

This is a one to two sentence description of your content, Same like the HTML meta description tag. 

Unlike a regular meta description tag, it won’t affect your SEO in the same way, but you should pay attention to what about your post here because it will display in the description section underneath the og:title. 

Facebook can display up to 300 characters, but the recommended character length is around 200.

<meta property="og:description" content="INSERT DESCRIPTION HERE"/>

og:image

For me as a digital marketer its a most important Open Graph tag, because a picture always helps create attention to content. 

This is how a particular thumbnail will be shown when your page URL is shared.

It can be very helpful for your conversion rates.

The recommended size for og:image is 1200 x 627 pixels, as the most display at a 1.91/1 ratio. Don't share an image that exceeds the 5MB size limit.

<meta property="og:image" content="INSERT IMAGE URL HERE"/>

og:url

This is the recognized URL for the page you are sharing. 

Basically, you’re representing what URL all shares from this page will link to, so think of it as its permanent URL.

This is help like the canonical URL for the page you are sharing.

<meta property="og:url" content="INSERT WEB PAGE URL HERE"/>

og:type

This describes the type of content you are sharing like a blog post, video, picture, audio file, etc.
<meta property="og:type" content="INSERT CONTENT TYPE HERE"/>

There is a list to choose from, you can view them below.

• og:video :- If you have a video on one of your pages, this is the place to put its URL.

<meta property="og:video" content="INSERT VIDEO URL HERE" />

• og:audio :- A URL to an audio file to follow this content like og:video.

<meta property="og:audio" content="INSERT AUDIO URL HERE" />

• og:determiner :- The word that appears before this object’s title in a sentence.

<meta property="og:determiner" content="INSERT DETERMINER" />

• og:locale :- It’s the language of your page. The default is en_US.

<meta property="og:locale" content="en_US" />

• og:site_name :- If your content is part of a larger website, the name which should be displayed for the overall site

<meta property="og:site_name" content="INSERT SITE NAME"/>

Facebook Open Graph for BlogSpot

<!-- Facebook OpenGraph starts-->
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<!-- Title, URL & Description -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl.https' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<!-- Image -->
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<b:else/>
<meta content='YOUR-WEBSITE-LOGO-URL' property='og:image'/>
</b:if>
<!-- FB specific -->
<meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='YOUR-FACEBOOK-APP-ID' property='fb:app_id'/>
<!-- Facebook OpenGraph ends-->

Check Facebook Open Graph Tags

After you implement the Facebook Open Graph Tags in your website source code follow these steps

• Go to: Facebook Sharing Debugger
• In "Sharing Debugger", add a link to be checked.
• You will see the details of the page fetched by Facebook Open Graph Tags shown on the same page.  

Twitter cards meta Tags

Twitter cards meta Tags are pretty much exactly like Open Graph meta tags, except that there is only one network, Twitter, that looks at them.

Unlike Open Graph, Twitter actually gives you two types of meta tags that you can implement on your website:

• Summary Cards: Title, description, thumbnail, and Twitter account attribution.
• Summary Cards with Large Image: Similar to a Summary Card, but with a prominently featured image.

<meta name="twitter:title" content="INSERT TITLE HERE"/> <meta name="twitter:description" content="INSERT DESCRIPTION HERE"/><meta name="twitter:image" content="INSERT IMAGE URL HERE"/><meta name="twitter:url" content="INSERT WEB PAGE URL HERE" /><meta name="twitter:site" content="@USERNAME"><meta name="twitter:creator" content="@USERNAME">

Twitter Card Tags for BlogSpot

<!-- Twitter Card Tags Start-->
<meta content='summary_large_image' name='twitter:card'/>
<!-- Title, URL & Description -->
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.url' name='twitter:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<!-- Image -->
<b:if cond=' data:blog.postImageUrl'>
<meta expr:content=' data:blog.postImageUrl' name='twitter:image'/>
<meta content='280' property='twitter:image:width'/>
<meta content='150' property='twitter:image:height'/>
</b:if>
<!-- Twitter specific -->
<meta content='YOUR-TWITTER-PAGE-USERNAME' name='twitter:site'/>
<meta content='YOUR-TWITTER-PROFILE-USERNAME' name='twitter:creator'/>
<!-- Twitter Card Tags Ends-->

Check Twitter Cards Tags

The Twitter Validation Tool no need requires any permission. It provides you a lot of reviewed data about Twitter Cards Tags.

• Go to: Twitter Card validator
• In "Card URL", add a link to be checked.
• You will see details of the page fetched by "Card validator" shown on the "Card preview" along with the log. 

 Visit: SEO Tutorial: Learn SEO from Basic to Advance

In case you know more about Open Graph meta tags for Facebook and Twitter Cards welcome to share them by commenting below!