How To Show Article Description on Google+?


#1

The thumbnail image and post title appears fine when someone shares my posts on Google+ but I don’t know why the description snippet does not display correctly. I could not find a solution online. I would really appreciate if someone could help me fix this in my blog

I’m still figure out how to fix homepage and statistic page description. :tired_face:


#2

Hello @Mad Just Go To Template Editor and Paste this Code Under head section:

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
  <meta expr:content='data:blog.metaDescription' itemprop='description'/>
</b:if>

#3

This is my code, so where should I put that code ?

<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='-------' property='og:description' />
    </b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name' />

After this or inside the code:

<b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description' /><b:else/>
    <meta expr:content='-------' property='og:description' />
</b:if>

#4

@Mad Replace all that code with following

<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 != &quot;&quot;'>
      <meta expr:content='data:blog.metaDescription' property='og:description'/>
      <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
      <meta expr:content='data:blog.metaDescription' itemprop='description'/>
    </b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name' />

#5

By looking your code, I think i just need to replace my conditional tag:

<b:if cond='data:blog.metaDescription != &quot;&quot;'>

#6

I have provided your code to you by just customizing it. Try My given code. If it works, let it be as it is. But, If it not works, try your method. :smile:


#7

Where can I check my description ? Beside sharing it on Google+…?


#8

just by sharing on google plus.


#9

So…no tool like Facebook debugger or Twitter card Validator ?


#11

If you want facebook debugger, You should place following meta content:

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
  <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
  <meta expr:content='data:blog.metaDescription' itemprop='description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
  <meta expr:content='data:blog.postImageUrl' property='og:image'/>
  <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
  <meta expr:content='data:blog.postImageUrl' itemprop='image'/>
  <b:else/>
  <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
    <meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
  </b:if>
</b:if>

These Meta tags help facebook and twitter to get right description and right featured image from your blog. If you still need more help, let me know. :smile:


Optimizing Image for Facebook [Problem]
#12

Thanks :slight_smile: but only my G+ snippet not doing properly. For Facebook & Twitter it’s fine so far.

BTW, you dont need name='twitter:image', property='og:image' will do that, and the rest of it :slight_smile:


#13

Hmm Okk. Now Your Description Show on Google+?


#14

Still not showing yet, maybe need some time to update my blog data…IDK :disappointed:


#18

You asked a nice question and I would love to give the perfect solution here.

I guess this is one problem almost every second blog author is encountering and it is rarely properly addressed. So lets propose the best simple solution to it that will inshAllah fix the rich snippets display issue within minutes for you!

Every social media platform has different rules for displaying rich snippets data. For Facebook we call the standard as OpenGraph Tags, for twitter we call it Twitter Cards and for Google+ or Search engines we use Schema Markup using microdata

What @Shivansh proposed were for Facebook and Twitter but not GooglePlus so I would draw his attention here too to the solution shared below.

Microdata is a set of tags, introduced with HTML5 so it will not work with blogger blogs which are built on HTML4. Luckily in your case your blog is built with HTML5.

Follow these steps:

Is your Template upgraded to HTML5?

These tags will only work on your template if it is upgraded to HTML5, if not yet upgraded then wait for my tutorial at mbt where I will guide how to do it.

TIP: Templates using HTML5 have the html tag in capital i.e. <HTML> and templates using HTML4 have it in lowercase i.e. <html>.

Add Microdata Tags in Blogger

RICH SNIPPETS FOR HOMEPAGE

  1. Go To Blogger > Template
  2. Must Backup your template
  3. Click Edit HTML
  4. Inside the <HTML> tag paste the following itemtype and itemscope values

itemscope=’’ itemtype=‘http://schema.org/Blog

add microdata in blogger HTML

  1. Next paste the following microdata meta tags just below <head>

    <b:if cond=‘data:blog.pageType == “index”’> </b:if>

  • Replace BLOG LOGO with your Logo. Make sure the logo size must have a width no less than 520px and height no less than 245px

Result will be like the one shown for MBT homepage when shared on google plus:

RICH SNIPPETS FOR BLOG POSTS

Now lets fix the rich snippets display for posts.

1- Search for the following code inside your template

<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

2- Replace it with this code

<article class='post hentry' itemprop='description articleBody'>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image_url'/>

3- Just near the above code you will find

<div class='post-outer'>

4- Replace it with this code

<div class='post-outer' itemscope='' itemtype='http://schema.org/BlogPosting'>

5- Save the changes and now visit your google plus account and add your post and homepage URL to see if description is displaying correctly as you wanted! :smile:

Output would be like the one shown for mbt post below:

Must make sure to add search description while publishing posts, the description often don’t display for posts with no meta description available. So you must check rich snippets for posts for which you have added the search description.


How to include Schema/Rich Snippets in my blog?
Please Suggest Must Have Meta Tags for Blog SEO
Add Review Schema in Blogger Templates [Star Ratings]
Bundle of "data type=hatom" errors in webmaster tools
[Urgent] Does adding custom Domain will effect on Search Rank?
Is Schema Tags integration Important for Blogger Sites?
Why Wrong Picture is Posted when sharing to google+
How to set a custom Facebook post thumbnail for a blogger page?
I need criticism and suggestions on my blog
#19

Thanks @Mohammad for your great answer :smile: , but i have two of this code. Should I replace all of it ? or just one code ?


#20

Try replacing both and see how it works


#21

It works :smiley: but not showing my real article description ?


#22

@Mohammad Thank You so much more your this post. I could not understand one things:

  • Before reading this post, My PFCI Tech’s Data was showing properly (with description and image) without adding the schema. How? My Blog template don’t have the word ‘schema’.

#23

Some blogs have schema markup added by default and sometimes Google+ automatically picks the right snippets to display


#24

@Mohammad, I have done everything but still my blog’s description is not showing when sharing. This problem is of my new blog http://bloggerguiders.blogspot.com

When Sharing Homepage, Description is Appearing Fine! But on Post Pages, These are not working! :frowning: