Search code examples
htmlsemantic-markupschema.orgmicrodata

Which Schema.org property should I use for related articles, quizzes, stories?


So there is a quiz & stories website, and on the right or bottom side of the screen (while you taking a quiz or read a story) there should be some lists of SIMILAR items, so the user can jump around at any time.

Examples, for story reader section (similar for quiz taker):

  • recent stories AND/OR
  • stories from same author AND/OR
  • stories of same category AND/OR
  • top rated stories of last week and so on

    • What schema.org should I use for this lists? I was thinking about ItemList. I would like to be as much SEO friendly as possible. Please tell me your opinion about the below ItemList. Or if you think I should be using some else Microdata, please share it.

    • Is it fine to use the HTML5 element article for items of this list, or should I use something else, like a simple div?

<aside id="rightSideBarAside" role="complementary" itemscope itemtype="http://schema.org/ItemList">

<article class="storyArticle1" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/Article">
 <h2 itemprop="name">Name1</h2>
 <a href="" itemprop="url">address1</a>
</article>

<article class="storyArticle2" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/Article">
 <h2 itemprop="name">Name2</h2>
 <a href="" itemprop="url">address2</a>
</article>

</aside>

Solution

  • Your example misses the ItemList type.

    You could add it to the aside element, e.g.:

    <aside itemscope itemtype="http://schema.org/ItemList">
    
      <article itemprop="itemListElement" itemscope itemtype="http://schema.org/Article">
      </article>
    
      <article itemprop="itemListElement" itemscope itemtype="http://schema.org/Article">
      </article>
    
    </aside>
    

    Using the article element for each related story seems to be appropriate, especially if you provide content like a description/teaser, the author name etc. However, if you only provide the title and the link, you could as well use an ul element (without any headings), e.g.:

    <aside>
    
      <ul itemscope itemtype="http://schema.org/ItemList">
    
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/Article">
          <a href="…" itemprop="url"><span itemprop="name">…</span></a>
        </li>
    
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/Article">
          <a href="…" itemprop="url"><span itemprop="name">…</span></a>
        </li>
    
      </ul>
    
    </aside>
    

    Schema.org’s Article type does not provide a property for referencing related Article items. But the WebPage type has the property relatedLink.

    So you could use the WebPage type for each page, and reference related pages with the relatedLink property. And each WebPage has, as mainEntity, an Article item.