• Open Graph meta tags are mainly meant for social media sharing
• Open graph meta tags define your social sharing success
• Appropriate open graph meta tags are crucial for posts engagement on social platforms

“Many web developers don’t know how to implement the open graphs appropriately and end up implementing the same as the SEO meta tags or not implement at all!”

Open Graph meta tags help one to share the HTML webpage with appropriate and specific Title, Description and image on the social platform. The webmaster/web developer can decide what to be implemented here and the same will be picked for social sharing.

• Not implementing the open graph tags on the webpage will usually pick the SEO meta tags and random images from the webpage if at all if that image fits the size of the social share.
• If there is no open graph tag, it may just show the domain name on the social share and nothing apart from that.

Importance of Open graph tag:

Open graph meta tags come into the picture only when there is a need for social share, and open graphs objective/purpose is to allow great customization so that you will be able to give a specific message to your audience instead of the messaging or info given to search engines.

SEO meta tags are mainly Keyword focused and speak about it.

Social tags are mainly for clickbaiting so that the posts achieve maximum engagement/drive traffic to the website. If open graph tags are not implemented or implemented in the wrong way the search engine defaults many times may not make some sense to the user or many serve the purpose completely and hence open graph tags are extremely important for the content which often gets shared on social media or built for social sharing.

How to Implement the Open Graph meta tags?

Each social media platform has its own suggestion or way of implementing the open graph tags so that they pull out it accordingly to their platform from the webpage you implement the open graph tags.

FaceBook and Most of the social platforms except the twitter

The below open graph tags are suitable for all social platforms, which need the following fields to be filled.

Og:title

This section holds the title of your webpage and which you prefer to show on social media platform after the share is been done.

<meta property=”og:title” content=”Your clickbaiting/cathy content goes here for max social traction”>

Og:url

This is the webpage URL and in case if there are dynamically generated webpages, they all be pointing to the parent page. This works exactly like the canonical, where all the dynamic/session id/query parameter pages will be pointed to the main page. Same is the case here, where the actual URL will be mentioned in the og:url

<meta property=”og:url” content=”http://www.yourdomain.com” />

Og:type

This is the section where you define the type of the object, and the type of object can be a,

• Webpage
• Article
• Blog
• Video
• Image
• Etc

You can find all the types here

Usually, the type can be defined as “website” as the content/object is pulled from the webpage, but not necessarily have to be a webpage, it can be defined with the respective objective name.

If this is empty by default it considers to be as a web page.

<meta property=”og:type” content=”website” />

og:description

This is very much similar to your SEO meta description, which is the gist of the complete web page/object, the description has to be well written for social media so that they gain much traction and objectives of post engagement and traffic to the webpage can be achieved.

<meta property=”og:description” content=”This is the section where a beautiful gist of the webpage goes in, which should be very attractive and written as per the social media traction norms.” />

og:image

Your webpage may or many not have images and many times may have an inappropriate images for social share or may be the share would randomly pick some random image including logo of the page, just to avoid all these a specific image can be set for social media and thats what goes into the og:image tag.

<meta property=”og:image” content=”http://www.yourwebsite.com/image-name.jpg” />

This is how it exactly looks on the webpage source code,

<meta property=”og:title” content=”Your click biating/cathy content goes here for max social traction”>
<meta property=”og:url” content=”http://www.yourdomain.com” />
<meta property=”og:type” content=”website” />
<meta property=”og:description” content=”Your entertaining and descriptive copy here, if your meta description is good, use it.” />
<meta property=”og:image” content=”http://www.yourdomain.com/image-name.jpg” />

Twitter Open Graph:

Twitter has its own open graph, based on the platform objectives of sharing the content, here are a few  that you need to take care of in implementing the twitter open graph cards.

<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:title” content=”Your title here” />
<meta name=”twitter:description” content=”Your 200-character description here” />
<meta name=”twitter:url” content=”http://www.yourwebsite.com” />
<meta name=”twitter:image” content=”http://www.yourwebsite.com /image-name.jpg” />

The final implementation in the source code may look like this,

Plugins for various Content Management systems to implement open graph

Most of the themes may have a dynamic implementation of picking the SEO meta tags or may have an additional custom field to fill in the custom details. In many other cases, an additional plugin is a must,

• Wordpress – Yoast
• Joomla – EFSEO
• Drupal –

Conclusion:

Open graph meta tags are very crucial, especially the one that usually gets shared on social platforms. Implementing open graph cards is crucial for all kinds of objects on the internet.

Manjunath Chowdary

Digital Marketing Consultant