How to add Open Graph Tags in Blogger?


#1

Hi,

I have seen the Meta OG tags a lot in many popular websites such as Filehippo, MBT, I have searched the whole internet and couldn’t find a good tutorial to follow and even couldn’t find the code can anyone here please provide me the tutorial or can show me clearly step by step to add these tags onto my Blogger blog?. @Templatezy and @Mohammad Can you guys please help me out Take your time :smile: Thank you very much. And will it help my SEO?


#2

Add this code just below the tag


 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

Like if this helped you. :smile:


#3

Thank you @NamanKumar, I also used this on my website, when Mohammad posted it.


#4

@alex_khan See this post

How to set a custom Facebook post thumbnail for a blogger page?


#5

Dear @alex_khan why search the internet when you can search the forum where we have already share the solution for Facebook OpenGraph Tags :slight_smile:

Kindly read this post


#6

You also need to tell him to remove this logo and replace it with his blog logo buddy


#7

Thank you very much guys I really appreciate your help :slight_smile:


#8

Thank you sir to correct me. Also sorry @alex_khan , for not providing you the complete inforation.


#9

Or try this, it’s integrated with Twitter Card too :blush:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <meta content='article' property='og:type'/>
    <b:if cond='data:blog.metaDescription'>
        <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
        <meta expr:content='&quot;Read article about &quot; + data:blog.pageName + &quot; On &quot; + data:blog.title + &quot;&quot;' property='og:description'/>
    </b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
    <b:if cond='data:blog.metaDescription'>
        <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
        <meta expr:content='&quot;Please visit &quot; + data:blog.pageTitle + &quot;To read more cool stuff.&quot;' property='og:description'/>
    </b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/><b:else/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/><b:else/>
        <meta content='YOUR BLOG LOGO' property='og:image'/>
    </b:if>
</b:if>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='YOUR TWITTER USERNAME' name='twitter:creator'/>
<meta content='YOUR FB ID' property='fb:admins'/>
<meta content='YOUR FB PAGE ID' property='fb:profile_id'/> 

Remember to edit this tags again :blush:


#10