Open Graph Meta Tags For your Websites To Boost Your Social Media Shares [Blogger]

"Open Graph Meta Tags" is one of the most important tags that every blogger should incorporate into the body of their blog's HTML to show the title, description, images whenever a web page is shared on social media websites such as Facebook, Twitter, Google+, Pinterest and more.

Protocol Graph Protocol -

Webmasters used to search; What is an open graph tag? What is a Twitter card? Are there any open examples of graphs? What is an open graph on Facebook? How to enable Open Graph meta Facebook tags? What is a mark on social media? How do the open-source Facebook protocol agreement and Twitter cards help improve SEO? How can open source graphs enhance what happens in social networks?

Also, Read More:-How To HTML sitemap generator On Blogger

A blogger is required to disclose his blog title, images, and description on social advertising sites. Open graph meta tags (dog tags) help integrate your blog with social networking websites by giving them details of your page to make richer graph elements for related functionality. The open graph protocol is designed to promote, accelerate, and optimize SEO and share social media with local tools provided by Google, Facebook, W3C, and Twitter.

To convert your pages into graph objects, you need to add open metadata related to one of your HTML body pages. There are various types of open graphs i.e. social meta tags (Facebook and twitter tags) for different social sites you need to add to your HTML blog, which will provide different content to the right site. This "Open graph meta tags" puts you in line with successful sales that allow you to manage any information displayed on social media sites where any of your pages are shared. Selling content remains the most powerful way to find links to improve your SEO efforts.

Also, read more:-Fast Loading 5 Google AMP Blogger Template 2019 SEO Friendly

To work out the graph tags that are open to you, you need to add these meta tags manually to the HTML code of your blog. To add Open Graph tags to your custom WordPress blog you can check out the "Facebook Revised Open Graph Meta Tag" plugin. Here I will share some of the most common ways to add the open graph tags you need to your website and a brief description of each. If you want to see the growth of digital marketing you need to add Open Graph tags that will enable you to increase your social sharing rate and improved conversion rate.

Social networking sites such as Facebook, Twitter, and Google+ have significant potential to drive huge traffic to your blog. But to make it work, social hackers need to crawl and download relevant information from a page to share. All pages need to be customized SEOs with OpenGraph meta tags to find the URL structure that has the engine to search, navigate, and index your website ASAP. By using these open graph meta tags you are able to manage the page content that will be displayed on the shared snippet on social media accounts.

There is so much more to learn about SEO than adding a title and meta description tags and it's worth spending some time reading it. With or without Open Graph, social sites can download the data and snippet data for your links when shared. But it may fail to remove specific content such as the right title, description, image, correctly taken from your web page link.

If a social site cannot find relevant information about a link, such as an unnamed subject, or an image of an unreleased food icon, a visitor who shares your page will not be able to send and so on, the website traffic will negatively impact. Therefore, you need to include open meta tags in the HTML of your website/blog.

The 5 essential features that are included in open graph tags throughout the page are:

• og: title: This tag is used to download the exact link title.
• og: URL: This tag is used to find the canonical URL of the page you are sharing.
• og : description: This tag contains 2-3 lines of short description about the page.
• og: image: This photo tag emits a relevant image and is displayed when a link is shared on social media sites.
• og: type: This tag shows your blog type/page/website.
• og : site_name: This tag is used to display the product name for this site.

Before you can add open graph tags you need to know the basic rules of SEO: 

• Topic: best SEO practice for making title tag lengths to keep titles under 60 characters on all social sites. 
• Descriptions Text: SEO Meta definitions must be improved, Google results in search with images up to 300 characters. 
• Size of images: You should know the size of the photos and social media ratings like; Facebook allows 400x300, Twitter cards download 280x150 photos and Google+ tags receive 180x120 photos size to display on the cover.

Open meta tags for social media help control the visibility of your shared social media links. Choosing which meta tags you need to add, or deleting them can be difficult to decide.

Introducing a final guide that will help you add an open meta gadget/tag to your HTML template and make your web data look more relevant to public sites:

 1. Google Open Graph Publisher tags

<!-- Google Open Graph Tags -->
<!-- Title, URL & Description -->
<link expr:href='data:blog.canonicalUrl.https' rel='canonical'/>
<meta expr:content='data:blog.canonicalUrl.https' property='url'/>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<b:else/>
<meta expr:content='data:post.snippet' itemprop='description'/>
</b:if>
<!-- Image -->
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/>
<meta content='180' property='width'/>
<meta content='120' property='height'/>
</b:if>
<!-- Google + specific -->
<link href='GOOGLE-PAGE-URL' rel='publisher'/>
<!-- Google Open Graph Tags -->

2. Facebook Open Graph Tags 

These graphical log elements can control what is displayed in the Facebook feeds share. Proper use of Facebook Open Graph tags can have a positive impact on SEOs and improve social sharing. 

Add the below Facebook Open Graph Tags just before the </head> tag:

<!-- 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 out Facebook Open Graph Tags with Facebook Debugger

3. Adding Twitter Cards

<!-- 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 out Twitter Cards Cards with Twitter Verification Tool:

All of these well-developed graphic tags and meta descriptions can have a huge impact on improving your SEO. These open graph meta tags are designed to download, manage relevant information and content such as a topic, a brief description of the connection, and the thumbnail image to showw them effectively while engaging on social media.