: Do breadcrumbs need to be inside the "main" content div and take part of the article's structured data? On my wordpress site, my theme outputs the breadcrumbs inside the "main" content div So
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 )?
More posts by @Berryessa370
2 Comments
Sorted by latest first Latest Oldest Best
The relevant markup from the linked example is:
<body itemscope itemtype="http://schema.org/WebPage">
<main itemprop="mainContentOfPage">
<div itemprop="breadcrumb">
<span prefix="v: 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).
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.