Why is Google saying that the rich snippet will not display

Question

I am trying to have Google display my author name and picture on my new Wordpress blog.

https://search.google.com/structured-data/testing-tool

I am submitting my page to the snippet checker and it indeed shows me the result with my name and a picture on the side of that, exactly what I want.

However, near the bottom of the page Google tells me the following:

Extracted structured data

hcard

    Warning: The information will not appear as a rich snippet in
    search results, because the marked-up content does 
    not appear to be the main focus of the page.
    More information. (Is this correct? Let us know.)

    Warning: This information will not appear as a rich snippet
    in search results, because it seems to describe an organization. 
    Google does not currently display organization information in rich snippets

    Warning: At least one field must be set for Hcard.

    Warning: Missing required field "name (fn)".

I have no idea why Google is complaining, I have set the fn and the vcard:

        <span class="author vcard">
            <a class="fn n url" href=">http://www.my_url.co.uk/about" rel="author">
                <?php the_author(); ?>
            </a>
        </span>

Also I have no idea why it thinks it is an organisation.

Do I have to worry about this? Perhaps the fact that Google is showing me my picture means they will link to it like that and the warnings are just in case I want to be an organsation.

Can someone explain?

Answer 1

Reason VCard/Hcard Not working

Warning: The information will not appear as a rich snippet in search results, because the marked-up content does not appear to be the main focus of the page. More information. (Is this correct? Let us know.)

The reason you are giving the above problem is because you need to ensure that all vcard data is complete on the page. If you take a look at the very bottom of your page:

<footer id="footer" class="footerCopyright source-org vcard copyright">
    <small> </small>
</footer>

The thing to notice here is class="footerCopyright source-org vcard copyright"

Notice how you have the vcard, its incomplete and will cause problems for the rest of the page (remove this vcard and use complete markup, ideally in schema if your switching over and use organization or something), further our discussion comments we discussed about going Schema, by removing the vcard element at the bottom of the page and the rest of the vcards it should work as intended. Let us know. Going Schema

OK the actual element of the content looks like this:

<div class="post-27 post type-post status-publish format-standard hentry category-internet-filters category-internet-monitoring" id="post-27">
  <div class="entry-header">
    <a href="#"><h1 class="entry-title">Title Goes Here</h1></a>
    <div class="entry-meta">
      Posted on 
      <span datetime="2013-05-06T14:50:07+00:00" class="updated entry-date">May 6, 2013</span>
      by      
      <span class="author vcard">
        <a rel="author" href="" class="fn n url">Name</a>
      </span>
    </div><!-- .entry-meta -->
  </div><!-- .entry-header -->
  <div class="entry-content">
  <p><a href="#"><img width="" height="" src="blah.jpg" alt="" class=""></a>
</div><!-- .entry-content -->
<footer class="entry-meta">
    Post published under <a rel="category tag" title="" href="">Category</a>, <a rel="category tag" title="" href="#">Category</a> by <a href="">Author</a>. Bookmark the <a rel="bookmark" title="" href=""></a>.   
      </footer><!-- .entry-meta -->
</div>

You can edit the template files of WordPress and have it include the markup for blog which will work with the author markup as well as some other markups like keywords which I have added for your consideration, This example was covered in a question I asked a while back: Using Schema for Blogging Article Vs Blogposting, below is what you would need to change to get it working with your current setup.

Change 1

From: <div class="post-27 post type-post status-publish format-standard hentry category-internet-filters category-internet-monitoring" id="post-27">

To: <div itemscope itemtype="http://schema.org/BlogPosting" class="post-27 post type-post status-publish format-standard hentry category-internet-filters category-internet-monitoring" id="post-27">

Change 2

From: <a href="#"><h1 class="entry-title">Title Goes Here</h1></a>

To: <h1 itemprop="name"><a rel="bookmark" title="Title Description" href="#">Article Header</a></h1>

Change 3

From: <span datetime="2013-05-06T14:50:07+00:00" class="updated entry-date">May 6, 2013</span>

To: <time itemprop="datePublished">2013-01-25</time>

Change 3

From: <span datetime="2013-05-06T14:50:07+00:00" class="updated entry-date">May 6, 2013</span>

To: <time itemprop="datePublished">2013-01-25</time>

Change 3

From:

<span class="author vcard">
    <a rel="author" href="" class="fn n url">Name</a>
</span>

To: <a rel="author" href="#">Author Name</a>

Alternatively

Alternatively you could use better markup and provide even more data like so:

<article itemscope itemtype="http://schema.org/BlogPosting">
  <div class="post-27 post type-post status-publish format-standard hentry category-internet-filters category-internet-monitoring" id="post-27">
    <header class="entry-header">
      <h1 itemprop="name"><a rel="bookmark" title="Title Description" href="#">Article Header</a></h1>
        <dl>
            <dt>Publish Date:</dt>
            <dd><time itemprop="datePublished">2013-01-25</time></dd>
            <dt>Author</dt>
            <dd><a rel="author" href="#">Author Name</a></dd>
        </dl>
    </header>
    <div class="entry-content">
      <aside>A image that floats left or right</aside>
      <p>Article Contents Here</a>
    </div>
    <footer class="entry-meta">
      <dl>
        <dt>Post published under</dt>
        <dd itemprop="keywords"><a rel="category" title="Title Description" href="#">Category 1</a></dd>
        <dd itemprop="keywords"><a rel="category" title="Title Description" href="#">Category 1</a></dd>
        <dt>Bookmark this page:</dt>
        <dd><a rel="bookmark" title="" href=""></a></dd>
      </dl>
    </footer>
  </div>
</article>