我无法理解您对“隐藏”的定义。
我不明白为什么您希望从搜索引擎抓取的网站中隐藏有价值的、相关的内容,因此我假设您的意思是从结构化测试工具中隐藏。
由于您只提供了一个 sn-p 代码,因此很难知道您已经编写了什么。
标记
首先,在理想情况下,您希望使用article 标签来标记您的文章。
你的标记现在应该是这样的结构:
<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>
您应该将相关内容从<div itemprop="articleBody"> 中取出,并将其放在<article> 内的<aside> 中,原因如下。
aside的定义
HTML 元素代表页面的一部分,其内容与其余部分相切,可以被视为与该内容分开。这些部分通常表示为侧边栏或插入。它们通常包含边栏上的定义,例如词汇表中的定义;也可能有其他类型的信息,例如相关广告;作者的传记;网络应用程序;个人资料信息或博客上的相关链接。
来源 - Mozilla Developer Network
aside的用法
在文章元素中使用时,内容应与该文章特别相关(例如,词汇表)。在文章元素之外使用时,内容应与网站相关(例如,博客卷、附加导航组,如果内容与页面相关,甚至是广告)。
来源 - Aside Revisited
你的标记现在应该包含一个<aside>,并且结构如下:
<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>
验证
为了通过 Google 结构化数据测试工具的验证,您需要为 article 添加更多信息。
你可以有:
- 标记(可见,推荐)
- 使用
<meta itemprop="name" content="content" />(不可见)
例如:
<span itemprop="author">John Doe</span>
<meta itemprop="author" content="content" />
首选路由 1,因为您可以使用相关架构标记它们,在本例中为 Person
完整的标记
我已在 必需 HTML/Schema 中添加以通过 Google 结构化数据测试工具的验证。
<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
已验证