Hide content on articlebody schema structured data

Question

I have my itemtype="http://schema.org/BlogPosting" but inside the articleBody tag, I have content I want to hide for google, but keep visible for users.

<div itemprop="articleBody">
<p>Aliquam nisi libero, convallis sit amet lectus id, posuere rutrum dolor. Sed consectetur ligula at viverra rhoncus.</p>
<div class"related">list of related posts</div>
</div>

On the structured data testing tool, the content inside div class"related" appear on the articleBody as text. I would like to hide the entire content inside the div to make articleBoy only focus on post content.

Any help is really appreciated!

Many thanks

Peter

Answer 1

I'm having trouble understanding your definition of 'hide'.

I don't see why you would want to hide valuable, relatable content from your website that search engines will crawl, so I'm going to assume you mean hiding from the structured testing tool.

As you have only provided a snippet of code it's hard to know what you have already written.

---

Markup

---

First of all, in an ideal scenario you want to markup your article using the article tag.

Your markup should now be structured like:

<article itemscope itemtype="http://schema.org/Article">
  <header>
    <h1 itemprop="headline">Blog Title</h1>
    <time datetime="2016-10-03">03 September 2016</time>
  </header>
  <div itemprop="articleBody">
    <p>The article element represents a self contained article or document.</p>
    <div class="related">list of related posts</div>
  </div>
</article>

You should take the related content out of the <div itemprop="articleBody"> and place it within an <aside> within the <article> for the following reasons.

Definition of aside

The HTML element represents a section of the page with content connected tangentially to the rest, which could be considered separate from that content. These sections are often represented as sidebars or inserts. They often contain the definitions on the sidebars, such as definitions from the glossary; there may also be other types of information, such as related advertisements; the biography of the author; web applications; profile information or related links on the blog.

Source - Mozilla Developer Network

Usage of aside

When used within an article element, the contents should be specifically related to that article (e.g., a glossary). When used outside of an article element, the contents should be related to the site (e.g., a blogroll, groups of additional navigation, and even advertising if that content is related to the page).

Source - Aside Revisited

Your markup should now include an <aside> and be structured like:

<article itemscope itemtype="http://schema.org/Article">
  <header>
    <h1 itemprop="headline">Blog Title</h1>
    <time datetime="2016-10-03">03 September 2016</time>
  </header>
  <div itemprop="articleBody">
    <p>The article element represents a self contained article or document.</p>
  </div>
  <aside class="related">
    <header>
      <h2>Related content</h2>
    </header>     
  </aside>
</article>

---

Validation

---

In order to pass validation for Google Structured data testing tool you are required to add more information for article.

You can either have:

1. Marked up (visible, recommended)
2. Use the <meta itemprop="name" content="content" /> (invisible)

For example:

<span itemprop="author">John Doe</span>
<meta itemprop="author" content="content" />

Route 1 is preferred as you can mark them up with the relevant schema, in this instance Person

---

Complete Markup

---

I have added in the required HTML/Schema to pass validation for Google Structured data testing tool.

<article itemscope itemtype="http://schema.org/Article">
  <header>
    <h1 itemprop="headline">Blog Title</h1>
    <time itemprop="datePublished" datetime="2016-10-03">03 September 2016</time>
    <p itemprop="author" itemscope itemtype="http://schema.org/Person">
      <span itemprop="name">John Doe</span>
    </p>
    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
      <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
        <img src="http://placekitten.com/200/50" alt=""/>
        <meta itemprop="url" content="http://placekitten.com/200/50">
        <meta itemprop="width" content="200">
        <meta itemprop="height" content="50">
      </div>
      <meta itemprop="name" content="Blog name">
    </div>    
  </header>
  <div itemprop="articleBody">
    <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
      <img src="http://placekitten.com/300/300" alt="Kitten, cute kitten"/>
      <meta itemprop="url" content="http://placekitten.com/300/300">
      <meta itemprop="width" content="300">
      <meta itemprop="height" content="300">
    </div>
    <p>The article element represents a self contained article or document.</p>
  </div>
  <aside class="related">
    <header>
      <h2>Related content</h2>
    </header>     
  </aside>
</article>

Codepen demo

---

Validated

---

• ✔ HTML5 Validation
• ✔ Google Structured data testing tool