隐藏有关articlebody架构结构化数据的内容

Question

我有我的itemtype =＆＃34; http：//schema.org/BlogPosting"但在articleBody标签内，我有想要为谷歌隐藏的内容，但对用户保持可见。

<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>

在结构化数据测试工具上， div class＆＃34;相关＆＃34; 内的内容在文章身上显示为文本。我想隐藏div中的所有内容，使articleBoy只关注帖子内容。

非常感谢任何帮助！

非常感谢

彼得

Answer 1

我无法理解您对＆＃39; hide＆＃39; 的定义。

我没有看到为什么您希望隐藏您网站上有价值的，可关联的内容，搜索引擎会抓取这些内容，所以我会假设您的意思是隐藏在结构化测试工具。

由于您只提供了一段代码，因此很难知道您已编写的内容。

标记

首先，在理想情况下，您希望使用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">中取出相关内容，并将其放在<aside>中的<article>内，原因如下。

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添加更多信息。

你可以拥有：

1. 标记（可见，推荐）
2. 使用<meta itemprop="name" content="content" />（隐身）

例如：

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

首选路由1，因为您可以使用相关架构进行标记，在本例中为Person

完成标记

我已添加必需 HTML /架构，以通过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

验证

• ✔HTML5 Validation
• ✔Google Structured data testing tool