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.
Open Graph Meta Tags
Open Graph Meta Tags 

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?


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.



  • Follow Subscribe



  • 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.

    Why is Open Graph tagging & data needed?

    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.

    What is an open graph tag?

    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.

    Open Graph Status

    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.

    Installing Open Graphs meta tags on the Blogger Web Site

    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

    Add the below Google Open Graph Tags just before the </head> tag:
    <!-- 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

    After using the Facebook Open Graph tag in your HTML, enter the URL of your page in the Facebook debugger tool to get it highlighted. Go to: Facebook Sharing DebuggerIn "Debugger Sharing", add the link to view. -Facebook Open Graph Tags are shown on the same page.

    3. Adding Twitter Cards

    These Twitter card tags can be very useful for your website to influence followers and help increase user engagement. Once you've added a Twitter card and posted any link, it will look like small expandable tweets that will increase click-through rate, improve brand awareness, and ultimately drive more targeted traffic.


    Add the below Twitter Card Tags just before the </head> tag:

    <!-- 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:

    Twitter Verification Tool does not require prior permission. To provide more updated information about Twitter Cards Tags. You will see details of the page taken by the "Confirmation Card" displayed in the "Preview Card" and log.




  • Follow Subscribe

  • 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.

    Read it Too

    Post a Comment

    get more nice stuff
    in your inbox

    instantly by Subscribing to us. So you will get email everytime we post something new here