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

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

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

Питер

1 ответ

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

    Использование 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 Structured data testing tool необходимо добавить дополнительную информацию для статьи .

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

    1. Маркированный вверх (видимый, порекомендованный)
    2. Используйте <meta itemprop="name" content="content" />(невидимый)

    Например:

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

    Маршрут 1 является предпочтительным, так как вы можете пометить их соответствующей схемой, в данном случае Person


    Полная Разметка


    Я добавил в требуемую HTML / Schema для прохождения проверки для 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


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