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:
- Marked up (visible, recommended)
- 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
