Блог

Главная - Вопросы по программированию - Как я могу включить articleBody, который находится за пределами itemscope статьи?

Как я могу включить articleBody, который находится за пределами itemscope статьи?

#schema.org #microdata

#schema.org #микроданные

Вопрос:

Я пытаюсь изменить существующий HTML для включения микроданных, используя Schema.org онтология.

По историческим причинам HTML не структурирован в надлежащей иерархии, которая легко позволила бы использовать один itemscope . В этом примере объект articleBody фактически отделен от name , author , и datePublished .

Вот простой фрагмент, демонстрирующий пример проблемы и то, что я пытаюсь выполнить:

 <html>
  <body>

    <div itemscope itemtype="http://schema.org/NewsArticle">
      <h1 itemprop="name">Example News Article Page</h1>
      <span itemprop="datePublished">January 1, 2014</span>
      <span itemprop="author">John Doe</span>
    </div>

    <div itemprop="articleBody">
        <p>
          Lorem Ipsum
        </p>
    </div>

  </body>
</html>

Очевидно, articleBody что не содержится внутри itemscope , и поэтому любой анализатор не будет иметь понятия, с чем связан этот фрагмент.

Я попытался использовать itemref , чтобы связать articleBody с фактическим NewsArticle .

 <html>
  <body>

    <div itemscope itemtype="http://schema.org/NewsArticle" id="myArticle">
      <h1 itemprop="name">Example News Article Page</h1>
      <span itemprop="datePublished">January 1, 2014</span>
      <span itemprop="author">John Doe</span>
    </div>

    <div itemprop="articleBody" itemref="myArticle">
        <p>
          Lorem Ipsum
        </p>
    </div>

  </body>
</html>

Похоже, это не сработало. Я также изменил его, чтобы использовать варианты добавления itemscope , повторного itemtype объявления и т. Д… К сожалению, ни один из этих методов, похоже, не сработал. Я предполагаю, что это просто неправильное использование itemref .

Я также предпринял попытку с itemid . Например:

 <html>
  <body>

    <div itemscope itemtype="http://schema.org/NewsArticle" itemid="foo">
      <h1 itemprop="name">Example News Article Page</h1>
      <span itemprop="datePublished">January 1, 2014</span>
      <span itemprop="author">John Doe</span>
    </div>

    <div itemprop="articleBody" itemscope itemtype="http://schema.org/NewsArticle" itemid="foo">
        <p>
          Lorem Ipsum
        </p>
    </div>

  </body>
</html>

Опять же, похоже, это не сработало. В обоих случаях тестер структурированных данных Google не показывает ожидаемых результатов (тело либо не существует, либо не связано с самой статьей), и Яндекс выдает мне ошибку unable to determine affiliation of these fields. There are two possible reasons: this fields are incorrectly placed or an orphan itemprop attribute is indicated

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

Возможно ли сделать то, что я пытаюсь реализовать? Если да, можете ли вы показать мне простой пример кода или указать на недостаток в моих попытках?

Спасибо!

Обновить

Я получил articleBody для работы itemref . Проблема, с которой я столкнулся, заключается в том, что я использовал ссылку в обратном направлении — то есть я ссылался на NewsArticle from articleBody , а не наоборот. Вот мой фрагмент:

 <html>
  <body>

    <div itemref="content"  id="articleHeader" itemscope itemtype="http://schema.org/NewsArticle">
      <h1 itemprop="name">Example News Article Page</h1>
      <span itemprop="author">John Doe</span>
    </div>

    <div id="content" itemprop="articleBody">
        <p>
          Lorem Ipsum blah blah blah
        </p>
    </div>

  </body>
</html>

К сожалению, это не кажется масштабируемым. Допустим, я хочу сослаться copyrightHolder на то, что помечено в нижнем колонтитуле страницы. Если я добавлю еще itemref один в свою статью, то он, похоже, взорвется и articleBody не связан с NewsArticle . Например.

 <html>
  <body>

    <div itemref="content"  itemref="company" id="articleHeader" itemscope itemtype="http://schema.org/NewsArticle">
      <h1 itemprop="name">Example News Article Page</h1>
      <span itemprop="author">John Doe</span>
    </div>

    <div id="content" itemprop="articleBody">
        <p>
          Lorem Ipsum blah blah blah
        </p>
    </div>

    <div id="company" itemprop="copyrightHolder">
        My Awesome Company
    </div>

  </body>
</html>

Ответ №1:

Похоже, я был на правильном пути. Проблема, с которой я столкнулся, заключалась в том, что я пытался объявить itemref несколько раз, каждый раз для другого id . Согласно W3C, itemref на самом деле ожидается список значений, разделенных пробелами id .

Вот рабочий пример:

 <html>
  <body>

    <div itemref="content company" id="articleHeader" itemscope itemtype="http://schema.org/NewsArticle">
      <h1 itemprop="name">Example News Article Page</h1>
      <span itemprop="author">John Doe</span>
    </div>

    <div id="content" itemprop="articleBody">
        <p>
          Lorem Ipsum blah blah blah
        </p>
    </div>

    <div id="company" itemprop="copyrightHolder">
        My Awesome Company
    </div>

  </body>
</html>

Комментарии:

1. Как я могу использовать с json-ld?