How To Show Article Description on Google+?


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


#25

This is because your blog is using HTML4 and not HTML5. Microdata are set of tags introduced for HTML5 only. I will write a tutorial on how to update your blogs from html4 to 5. Stay tuned


#26

Hi @Mohammad, you say:

does it replace the previous meta tags?
then look for the tag <article>, I did not find any in my template. only meta tag like this:
<meta content='article' property='og:type'/>
or you mean this?
<div class='post hentry'>

Hope you fix it when reviewing my blog


#27

I see no <article...> on your blog @fadlybiluping . But u can change <div class='post hentry'> to <article class='post hentry'>


#28

Can I also change that code with article class?


#29

Yes you can @Shivansh . Also replace </div> with </article>


#30

Thank you @Mad . Do i need to also replace this?
<div class='post hentry uncustomized-post-template'>
I see that something similar.

Then, do you replace these two codes?
<div class='post-outer'>


#31

@fadlybiluping just replace <div... to <article...

No, i dont relpace those two, BTW my description is still not showing :confused:


#32

I was going to try to follow the steps above, then you say it does not appear.

do you put a description when writing a post? and i see, you are still using two meta description.

Maybe @Mohammad will telling the source of the problem and solution.