Скрыть содержимое структурированных данных схемы articlebody

У меня есть itemtype="http://schema.org/BlogPosting", но внутри тега articleBody есть контент, который я хочу скрыть для Google, но который должен оставаться видимым для пользователей.

<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 "related" отображается в articleBody в виде текста. Я хотел бы спрятать весь контент внутри div, чтобы articleBoy фокусировался только на публикации контента.

Любая помощь очень ценится!

Большое спасибо

Питер

Источник

1 ответ

У меня проблемы с пониманием вашего определения "скрыть".

Я не понимаю, почему вы хотите скрыть ценный релевантный контент с вашего веб-сайта, который будут сканировать поисковые системы, поэтому я предполагаю, что вы хотите скрыться от инструмента структурированного тестирования.

Поскольку вы предоставили только фрагмент кода, трудно понять, что вы уже написали.

наценка

Прежде всего, в идеальном сценарии вы хотите разметить вашу статью, используя 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

Использованиеaside

При использовании внутри элемента статьи содержимое должно быть конкретно связано с этой статьей (например, глоссарий). При использовании вне элемента статьи содержимое должно быть связано с сайтом (например, блог-ролик, группы дополнительной навигации и даже реклама, если этот контент связан со страницей).

Источник - В стороне Пересмотрено

Ваша разметка должна теперь включать <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, вам необходимо добавить дополнительную информацию для статьи.

Вы можете иметь:

  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 демо

Утвержденный

Источник
Другие вопросы по тегам