How to use schema.org to identify footer links as being part of a WebPage defintion?

J

Junior

Guest
I am trying to utilize microdata to help search engines define all the content of my website as it is intended to be viewed.

I have the following markup

<!DOCTYPE html>
<html lang="en" dir="ltr" itemscope itemtype="http://schema.org/WebPage">
<head>
<link itemprop="url" href="https://example.com/link-to-canonical-url-of-this-page" />
</head>
<body>

<div itemprop="isPartOf" itemscope itemtype="https://schema.org/WebSite">
<link itemprop="url" href="https://example.com" />
</div>
<header itemscope itemtype="https://schema.org/WPHeader">
<ul class="list-unstyled mb-0 pb-0 mt-2" itemprop="citation" itemscope="" itemtype="http://www.schema.org/SiteNavigationElement">
<li>
<a title="" itemprop="url" href="/some-uri" class="btn btn-link text-white" style="font-size: larger;">
<strong itemprop="name">Popular Searches</strong>
</a>
<meta itemprop="position" content="1">
</li>
</ul>
</header>
<main role="main">
</main>

<footer itemscope itemtype="https://schema.org/WPFooter">
<ul class="list-unstyled mb-0 pb-0 mt-2" itemprop="citation" itemscope="" itemtype="http://www.schema.org/SiteNavigationElement">
<li>
<a title="" itemprop="url" href="/some-uri" class="btn btn-link text-white" style="font-size: larger;">
<strong itemprop="name">Popular Searches</strong>
</a>
<meta itemprop="position" content="1">
</li>
</ul>
</footer>
</body>
</html>


But when I view the above in Structured Data Testing Tool It detects everything I intended expect for the position of each element.

The tool detects the data as three different nodes. Since all these nodes are part of the WebSite or WebPage, I am hoping to somehow link the header and footer inside the WebPage node.

How can I indicate that the WPHeader and and WPFooter are part of the WebPage node?

enter image description here

UPDATED I am able to combine all 3 nodes into the main WebPage. However, I had to use multiple mainContentOfPage to do that. I am not sure if having mainContentOfPage is the correct way to do it. It kinds contradict the name as there should always be a main-content of a single page.

Here is the updated HTML markup

<!DOCTYPE html>
<html lang="en" dir="ltr" itemscope itemtype="http://schema.org/WebPage">
<head>
<link itemprop="url" href="https://example.com/link-to-canonical-url-of-this-page" />
</head>
<body itemprop="mainContentOfPage">
<div itemprop="isPartOf" itemscope itemtype="https://schema.org/WebSite">
<link itemprop="url" href="https://example.com" />
</div>
<header itemprop="mainContentOfPage" itemscope itemtype="https://schema.org/WPHeader">
<ul class="list-unstyled mb-0 pb-0 mt-2" itemprop="mainEntity" itemscope="" itemtype="http://www.schema.org/SiteNavigationElement">
<li>
<a title="" itemprop="url" href="/some-uri" class="btn btn-link text-white" style="font-size: larger;">
<strong itemprop="name">Popular Searches</strong>
</a>
<meta itemprop="position" content="1">
</li>
</ul>
</header>
<main role="main">
</main>
<footer itemprop="mainContentOfPage" itemscope itemtype="https://schema.org/WPFooter">
<ul class="list-unstyled mb-0 pb-0 mt-2" itemprop="mainEntity" itemscope="" itemtype="http://www.schema.org/SiteNavigationElement">
<li>
<a title="" itemprop="url" href="/some-uri" class="btn btn-link text-white" style="font-size: larger;">
<strong itemprop="name">Popular Searches</strong>
</a>
<meta itemprop="position" content="1">
</li>
</ul>
</footer>
</body>
</html>

Continue reading...
 
Top