2

On my wordpress site, my theme outputs the breadcrumbs inside the "main" content div So it looks like this :

<main class="content" itemtype="http://schema.org/Blog ETC
   <div class="breadcrumbs">
   <div class="entry-title"> Post title here
And so on.

But, i would like to move breadcrumbs above the content div. Because I am using Genesis, I can do this easily using hooks. But if I do so, the breadcrumbs will no longer be part of the main content and the schema.org markup data for that content.

So I guess my question is: Do the breadcrumbs really need to be inside the main content div and therefore be inside the Blog/CreativeWork/or whichever schema.org markup data is used for that post or can i move them outside and search engines will still use them without any problem? Can I even move them above the header (I know it makes no sense placing above the header but I asked this just to see if it makes any difference )?

Improve this question
6
  • In your example, the breadcrumbs don’t have any Microdata property, i.e., they are not using Schema.org. Is this correct? Or does your actual page use Schema.org also for the breadcrumbs?
    – unor
    Apr 18 '15 at 14:41
  • they have micro-data property, however i did not write the complete markup. The main question was , If it's ok to move the breadcrumbs outside the main class. Or, if semantic markup requires the breadcrumbs to take part of the main content div .
    – ClawDuda
    Apr 19 '15 at 10:45
  • I know, but for answering this question it’s important to see this semantic markup of the breadcrumbs. There are cases where it’s fine, and there are cases where it’s not.
    – unor
    Apr 19 '15 at 10:47
  • The breadcrumbs are created using Yoast plugin. It uses data-vocabulary i think. But anyway, they do show in google webmasters tools correctly. So, getting back to the main question, is moving them outside of "main" going to be a problem?
    – ClawDuda
    Apr 19 '15 at 22:46
  • 1
    The website I am talking about is not live. But, it's exactly as here for example : webhostpress.net/hosting-reviews/inmotion-hosting . Same markup 100%. And what I want to do is move the breadcrumbs outside the main content , just before "content-sidebar-wrap" .
    – ClawDuda
    Apr 20 '15 at 6:12
2

It won't hurt your SEO because Google establishes what is what on page regardless, things like breadcrumbs get detected by Google regardless of the positioning and markup used in the source code.

However, if you want a semantic website then you should resolve this, a simple fix would be to edit your 'loop' in your WordPress, and if I'm not mistaken your using the theme Genesis framework, so editing the loop can be as easy as making use of genesis_custom_loop(), or alternatively duplicate the single post file and add an additional div after breadcrumbs with schema.

Improve this answer
1
  • Excellent. Thanks for the custom_loop tip too. This answers all my questions.
    – ClawDuda
    Apr 18 '15 at 10:01
1

The relevant markup from the linked example is:

<body itemscope itemtype="http://schema.org/WebPage">

  <main itemprop="mainContentOfPage">

    <div itemprop="breadcrumb">

      <span prefix="v: http://rdf.data-vocabulary.org/#">
        <span typeof="v:Breadcrumb"><a href="/" rel="v:url" property="v:title">Home</a></span> ▸ 
        <span typeof="v:Breadcrumb"><a href="/foo" rel="v:url" property="v:title">Foo</a></span> ▸ 
        <span typeof="v:Breadcrumb"><strong class="breadcrumb_last" property="v:title">Bar</strong></span>
      </span>

    </div>

  </main>

</body>

Contrary to your example snippet, the item (WebPage) is specified on the body element, not the main element. This allows you to move the breadcrumbs out of the main element, as they will still be in scope of the WebPage item:

<body itemscope itemtype="http://schema.org/WebPage">

  <div itemprop="breadcrumb">
  </div>

  <main itemprop="mainContentOfPage">
  </main>

</body>

If you’d not use the body but the main element for specifying the item, you’d have to use Microdata’s itemref attribute:

<body>

  <div itemprop="breadcrumb" id="breadcrumbs">
  </div>

  <main itemscope itemtype="http://schema.org/WebPage" itemref="breadcrumbs">
  </main>

</body>

In that case, you may not specify any other item as parent of the breadcrumbs (e.g., on the body).

Improve this answer
5
  • thanks a lot. I was a bit confused. It was part of the blogpost element not the webpage element. Thank you for clarifying. Answer selected
    – ClawDuda
    Apr 20 '15 at 13:03
  • Since we are on the subject and you know your stuff, please help me wit ha related question. Can I move the post title element outside too? It will still be part of the webpage element but NOT part of the "maincontentofpage" element. Is it ok ?
    – ClawDuda
    Apr 20 '15 at 13:10
  • 1
    @ClawDuda: Not sure to which element you refer, but it all depends on the markup: if you move this element out of its parent itemscope, you’d have to use itemref and take care that it does not become a child of a different itemscope; if you move this element inside of its parent itemscope, it’s probably okay. But again, without seeing the actual markup, this can’t be answered with certainty.
    – unor
    Apr 20 '15 at 13:43
  • on the link i gave before, webhostpress.net/hosting-reviews/inmotion-hosting , I am referring to the post title ( the H1 tag )
    – ClawDuda
    Apr 20 '15 at 15:21
  • 1
    @ClawDuda: This is a headline that is part of the CreativeWork item (as specified on the article element). Inside of this article, you can move it. But if you’d move it outside of the article, it would no longer apply to this CreativeWork.
    – unor
    Apr 20 '15 at 15:27

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.