【问题标题】:Hide content on articlebody schema structured data隐藏 articlebody 架构结构化数据的内容
【发布时间】:2016-10-01 14:46:07
【问题描述】:

我有我的 itemtype="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“related”内的内容以文本形式出现在articleBody上。我想将整个内容隐藏在 div 中,让 articleBoy 只关注帖子内容。

非常感谢任何帮助!

非常感谢

彼得

【问题讨论】:

    标签: schema structured-data google-data


    【解决方案1】:

    我无法理解您对“隐藏”的定义

    我不明白为什么您希望从搜索引擎抓取的网站中隐藏有价值的、相关的内容,因此我假设您的意思是从结构化测试工具中隐藏。

    由于您只提供了一个 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>
    

    您应该将相关内容从&lt;div itemprop="articleBody"&gt; 中取出,并将其放在&lt;article&gt; 内的&lt;aside&gt; 中,原因如下。

    aside的定义

    HTML 元素代表页面的一部分,其内容与其余部分相切,可以被视为与该内容分开。这些部分通常表示为侧边栏或插入。它们通常包含边栏上的定义,例如词汇表中的定义;也可能有其他类型的信息,例如相关广告;作者的传记;网络应用程序;个人资料信息或博客上的相关链接

    来源 - Mozilla Developer Network

    aside的用法

    在文章元素中使用时,内容应与该文章特别相关(例如,词汇表)。在文章元素之外使用时,内容应与网站相关(例如,博客卷、附加导航组,如果内容与页面相关,甚至是广告)。

    来源 - Aside Revisited

    你的标记现在应该包含一个&lt;aside&gt;,并且结构如下:

    <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. 使用&lt;meta itemprop="name" content="content" /&gt;(不可见)

    例如:

    <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


    已验证


    【讨论】:

    • 回答您的问题:有时结构化数据测试工具会解析您不希望它检测到的标记,例如,&lt;template&gt; 元素内的标记。
    猜你喜欢
    • 2023-03-09
    • 1970-01-01
    • 2013-08-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-11-26
    • 1970-01-01
    相关资源
    最近更新 更多