Question

for other areas of a web page it is simple to mark up; i.e. navigation element, header, footer, sidebar

Not so with mainContentOfPage; I've seen a number of different ways to implement this, most recently (and I found this one to be the most strange) on schema.org itself:

<div itemscope itemtype="http://schema.org/Table">
  <meta itemprop="mainContentOfPage" content="true"/>
  <h2 itemprop="about">list of presidents</h2>
  <table>
    <tr><th>President</th><th>Party</th><tr>
    <tr>
      <td>George Washington (1789-1797)</td>
      <td>no party</td>
    </tr>
    <tr>
      <td>John Adams (1797-1801)</td>
      <td>Federalist</td>
    </tr>
    ...
  </table>
</div>

I could use some examples; the main content of my page is in this case a search results page, but I would plan to use this on other pages too (homepage, product page, etc.)

Edit, I found some more examples:

Would this be valid? I found this on a blog:

<div id="main" itemscope itemtype="http://schema.org/WebPageElement" itemprop="mainContentOfPage">
    <p>The content</p>
</div>

I also found this even simpler example on another blog (might be too simple?):

<div id="content" itemprop="mainContentOfPage">
    <p>The content</p>
</div>
Was it helpful?

Solution

The mainContentOfPage property can be used on WebPage and expects a WebPageElement as value.

But Table is not a child of WebPage and true is not an expected value. So this example is in fact strange, as it doesn’t follow the specification.

A parent WebPage should use Table as value for mainContentOfPage:

<body itemscope itemtype="http://schema.org/WebPage">
  <div itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/Table">
  </div>
</body>

EDIT: Update

Your second example is the same like mine, it just uses the more general WebPageElement instead of Table. (Of course you’d still need a parent WebPage item, like in my example.)

Your third example is not in line with schema.org’s definition, as the value is Text and not the expected WebPageElement (or child) item.

OTHER TIPS

A valid option would be:

<body itemscope itemtype="http://schema.org/WebPage">
 <main itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/WebPageElement">
  <div itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
   <h1 itemprop="name">whatever</h1>
  </div>
 </main>
</body>

Of course you may add related properties to top-level or nested elements, and change Thing into any other item type listed at Full Hierarchy. I also recommend to use mainEntity, documentation still doesn't clarify if it's really necessary, but according to 1st example here, using WebPage you may want to specify a mainEntity:

<body itemscope itemtype="http://schema.org/WebPage">
 <header><h1 itemscope itemprop="mainEntity" itemtype="http://schema.org/Thing">whatever</h1></header>
  <main itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/WebPageElement">
   <div itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
    <h2 itemprop="name">whatever</h2>
    </div>
 </main>
</body>

Cannot tell if also this would be valid:

<body itemscope itemtype="http://schema.org/WebPage">
 <main itemprop="mainContentOfPage" itemscope itemtype="http://schema.org/WebPageElement">
  <div itemprop="mainEntity" itemscope="" itemtype="http://schema.org/Thing">
   <h1 itemprop="name">whatever</h1>
  </div>
 </main>
</body>    

Documentation doesn't say nothing about setting mainEntity to nested items.

In any case, consider that "[...] Every web page is implicitly assumed to be declared to be of type WebPage [...]" as stated in WebPage description, and use of HTML tags as <main>, <footer> or <header> already gives information about what type of elements are used in a page. So if actually you do not need to add relevant information to those elements or to your web page itself, with a proper use of HTML tags you could easily do without mainContentOfPage or even WebPage.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top