1

I try to create rich snippets for my blog posts, and after I write my articles, add images, I fill in all the data in the Rich Snippet plugin. Then I do Markup through the Webmaster Tools. (So all the data is there, Title, Author, Image etc)

I have a question here: When I am done with the marking, I export the HTML code, and try adding it to the "Text" console, then I run the code through the Structured Data Testing Tool. Is this the right way to do it?

The results from the Structured Data Testing Tool always throw the same errors:

  • datePublished - missing and required,
  • headline - missing and required
  • Breadcrumb 3 (url - missing and required)
  • image - missing and required

I have tried everything I could find, changed few Rich Snippet plugins, though I think it can be something in the template.

Errors reported by the Google Structured Data testing Tool

Get the raw HTML code here

  • Would you mind adding the raw code you're using to your post? This would make it easier to copy, paste and rework. Thanks – Seb Jul 31 '15 at 7:15
  • @Seb, Thanks for your interest! I have just added the raw html in the question box. Please have a look if you can open it. Thanks again! – Angelique82 Jul 31 '15 at 7:50
1

It's actually pretty straightforward - the breadcrumbs error is because you marked up the last (current) element as breadcrumb. However the requirement is to be link also, as the previous breadcrumbs. You have two options:

1). Add the url property to the last element too. It will be link to the article itself, will pass the validator (recommended): instead of

<span property="v:title">Here Is How To Get Rid Of A Hickey (No.13 Is A Lucky One)</span>

make it as the rest:

<a href="http://www.myhealthybase.com/how-to-get-rid-of-a-hickey/" rel="v:url" property="v:title">Here Is How To Get Rid Of A Hickey (No.13 Is A Lucky One)</a>

2). Remove the breadcrumb markup from the last element and leave it as a simple text.

Overall - using some WP plugin, like the Wordpress SEO by Yoast will fix that for you, it seems the error is because the current theme/plugin you use is not coded properly.

The BlogPosting issue is simple too - just add an itemprop to the image itself (itemprop="image"). The image is required for BlogPosting microdata.

The third issue is false alert (or you already fixed it), re-test your pages and you'll see it disappearing.

  • Hi again Barnett, I have managed to break my code few times :) I thought if I send the breadcrumb code, maybe you can help inserting the line correctly? It will be a tremendous help! – Angelique82 Jul 31 '15 at 12:52
  • if (is_single()) { echo "<div typeof='v:Breadcrumb'><span property='v:title'>"; the_title(); echo "</span></div>"; } } elseif (is_page()) { echo "<div typeof='v:Breadcrumb'><span property='v:title'>"; the_title(); echo "</span></div>"; } } } – Angelique82 Jul 31 '15 at 12:54
  • could you add also the code for the previous breadcrumb level – ePetkov Aug 2 '15 at 14:27
  • if (!function_exists('mts_the_breadcrumb')) { function mts_the_breadcrumb() { echo '<div><i class="fa fa-home"></i></div> <div typeof="v:Breadcrumb" class="root"><a rel="v:url" property="v:title" href="'; echo home_url(); echo '" rel="nofollow">'.sprintf( __( "Home","mythemeshop")); echo '</a></div><div><i class="fa fa-caret-right"></i></div>'; – Angelique82 Aug 3 '15 at 17:42
  • if (is_category() || is_single()) { $categories = get_the_category(); $output = ''; if($categories){ foreach($categories as $category) { echo '<div typeof="v:Breadcrumb"><a href="'.get_category_link( $category->term_id ).'" rel="v:url" property="v:title">'.$category->cat_name.'</a></div><div><i class="fa fa-caret-right"></i></div>'; } } – Angelique82 Aug 3 '15 at 17:42
0

The Errors

Let's have a look at the error messages.

1. Article Mark up

The date and headline information are missing. The first is not mark up in your code, the latter is misplaced.

2. Breadcrumb Mark up

Your breadcrumb is missing the last URL which apparently is the post URL.

3. BlogPosting Mark up

The BlogPosting mark up does not contain a URL for a post thumbnail.


The Code Chaos

Now the more complicated part. I can not figure out where the mark up is coming from. You mentioned that you have

changed few Rich Snippet plugins

but nothing worked right.

Two things go hand in hand here: the way the plug-in works and the way your theme works.

To keep it short: I'd recommend using JSON-LD instead of in line mark up.

Why?

Because it makes it easier to identify mark up issues and testing.

What's the difference?

You are using in line mark up, which is fine, but has some limitations if your pages code gets more and more complex depending on the theme you're using. Article markup works like this:

<div itemscope itemtype="http://schema.org/Article">
  <span itemprop="name">How to Tie a Reef Knot</span>
  by <span itemprop="author">John Doe</span>
  This article has been tweeted 1203 times and contains 78 user comments.
  <meta itemprop="interactionCount" content="UserTweets:1203"/>
  <meta itemprop="interactionCount" content="UserComments:78"/>
</div>

As you see, all the data concerning the Article item has to be placed within the <div> containing the itemtype specification. If Something is placed outside this div the data is literally lost. What happens in your case is that some information is misplaced and can not be connected to the right itemtype, as the elements containing the information are lost somewhere in code. They are hard to find and even harder to fix.

Utilizing JSON-LD creates an additional piece of code in your HTML document, which for example looks like this:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Article",
  "author": "John Doe",
  "interactionCount": [
    "UserTweets:1203",
    "UserComments:78"
  ],
  "name": "How to Tie a Reef Knot"
}
</script>

This type of code snippet can be placed anywhere, but is most likely placed at the end or the top of the html code.

As you can see its everything in one place, easier to identify and to fix if something is missing.

If you are fine with coding you can find a good how-to on utilizing JSON-LD data in Wordpress here:Implementing JSON-LD in Wordpress on builtvisible.com

If you rather like to have a plug-in doing the work for you look out for something like this: JSON-LD for Article PlugIn

  1. try to deactivate your RichSnippet plug-in and make sure no schema.org data is provided by your theme that may interfere with the JSON-LD data.
  2. Next install the JSON-LD plug-in and configure it the way you want.
  3. Test the code and be happy. :)

If you like to go with your plug-in, you may look for help on the plug-in page or in Stackexchange's Wordpress section

Sorry that there is no simple "click this then everything works fine"-solution, but I hope it helps you though.

  • Thanks a lot Seb, will try to follow your advice, and see if I manage to fix it. :) – Angelique82 Jul 31 '15 at 11:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.