пятница, 15 мая 2015 г.

Заметки с тегом «microdata»

11:56 By No comments


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


<title> и <meta name="description">

Эти мета-данные были одними из самых первых, которые помогали роботам понять суть страницы.
В теге <title> размещают заголовок страницы. Для каждой страницы должен быть указан заголовок и лучше всего, если он будет уникальным для всего сайта. На размер строки заголовка нет явных ограничений, но из практических соображений не стоит делать его длиннее 70-80 символов.
В атрибуте content тега <meta name="description"> размещают кратное описание страницы. Длину стоит ограничить 150-160 символами потому, что оно активно используется для построения сниппета в поисковой выдаче и более длинное описание будет автоматически укорочено. Явного ограничения в спецификациях нет. Содержимое, как и в случае с заголовком страницы, должно быть уникальным для всего сайта.
Ещё одним классическим тегом считается <link rel="canonical">. Он нужен для того, чтобы сообщить роботам какая из страниц с одинаковым содержимым, если таковые имеются, считается основной. Адрес задаётся в атрибуте href.

Протокол Open Graph

С появлением социальных сетей и кнопок «Like» простого заголовка и описания стало недостаточно. Социальные сети хотели отображать у себя на страницах картинку, видео или аудио материалы, которые отметили пользователи.
Facebook разработал на основе RDFa упрощенный протокол Open Graph, который работает в одном пространстве имён og и имеет ограниченный набор типов данных (музыка, видео, статья, книга, персона и сайт).
<html prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#">
<head>
  <title>Больше семантики для логотипа :: Хранитель заметок</title>
  <meta property="og:title" content="Больше семантики для логотипа">
  <meta property="og:type" content="article">
  <meta property="og:url" content="http://noteskeeper.ru/945/">
  <meta property="og:image" content="http://noteskeeper.ru/wp-content/themes/nk/i/nk-logo-200.png">
  <meta property="og:description" content="Разметке логотипа можно добавить семантики с помощью microdata. Тип Brand позволяет указать логотип для продуктов и людей">
  <meta property="og:site_name" content="Хранитель заметок">
  <meta property="article:published_time" content="2013-08-26T03:31:18+00:00">
  <meta property="article:section" content="Вёрстка">
  <meta property="article:tag" content="microdata">
  ...
Протокол получил поддержку у множества социальных сервисов и поисковых систем. Некоторые из них, например, Twitter и Вконтакте, адаптируют его для своих нужд, используя часть полей Open Graph и дополняя необходимыми данными.

Microdata и RDFa

Почти одновременно в 2009 году появились черновики двух спецификаций, оперирующих со сложными типами объектов и поддерживающие их глубокую вложенность:
Оба формата используют дополнительные атрибуты HTML-элементов, чтобы указать тип объекта и его свойства. Значения свойств за некоторым исключением берётся из текстового содержимого элемента.
RDFa позволяет указывать значение свойства с помощью атрибута content у любого элемента:
<span property="dc:modified"
  content="2013-09-16T15:00:00+00:00"
  datatype="xsd:dateTime">16 сентября 2013 года</span>
В то время как парсерам Microdata требуются дополнительные элементы <meta> или <link>:
<span>16 сентября 2013 года</span>
<meta itemprop="dateModified" content="2013-09-16T15:00:00+00:00">
Разметка с помощью Microdata или RDFa позволяют сообщить роботам о семантике контента независимо от того какими тегами он размечен в HTML. Более того, форматы позволяют обозначить данные, невидимые пользователю в силу внешнего дизайна страницы.

“Shaken, not stirred”

При всём разнообразии мета-данных, которые можно впихнуть на страницу, складывается ситуация, когда одни и те же данные будут повторяться в HTML-коде несколько раз.
Например, описание страниц, которое фигурирует во всех форматах, можно передать в одном теге:
<meta content="Разметке логотипа можно добавить семантики с помощью microdata. Тип Brand позволяет указать логотип для продуктов и людей"
  name="description"
  property="og:description"
  itemprop="description"
  id="_articleDescription">
В этом примере свойство description типа http://schema.org/Article подключается в объект с помощью ссылки по id в атрибуте itemref. Если это позволяет разметка, то тип самого важного объекта на странице можно объявить у корневого элемента документа. Тогда все теги metaестественным образом окажутся в области видимости этого объекта.
<html prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#" itemscope itemtype="http://schema.org/Article">
<head>
  <title>Больше семантики для логотипа :: Хранитель заметок</title>
  <meta property="og:title" content="Больше семантики для логотипа" itemprop="name">
  <meta property="og:type" content="article">
  <meta property="og:url" content="http://noteskeeper.ru/945/" itemprop="url">
  <meta property="og:image" content="http://noteskeeper.ru/wp-content/themes/nk/i/nk-logo-200.png" itemprop="image">
  <meta property="og:description" content="Разметке логотипа можно добавить семантики с помощью microdata. Тип Brand позволяет указать логотип для продуктов и людей" itemprop="description">
  <meta property="og:site_name" content="Хранитель заметок">
  <meta property="article:published_time" content="2013-08-26T03:31:18+00:00" itemprop="dateCreated">
  <meta property="article:section" content="Вёрстка" itemprop="articleSection">
  <meta property="article:tag" content="microdata" itemprop="keywords">
  ...
Так как привязка нового объекта к «родителю» осуществляется только наличием у него атрибута itemprop, то при его отсутствии новый объект помещается на самый верхний уровень иерархии. Получается, что на странице можно безопасно размещать несколько независимых объектов.

Атрибуты role и aria-*

Особняком стоят атрибуты Web Accessibility Initiative (WAI). Они используются вспомогательными технологиями для обеспечения доступности контента для пользователей с ограниченными возможностями.
Скринридерам часто приходится специально сообщать о назначении элемента (атрибут role), его названии (атрибуты aria-label, aria-labelledby, aria-describedby) или состоянии, так как у него нет другого способа передать эту информацию пользователю.

Заключение

  • Старайтесь сообщить как можно больше полезной информации о содержимом страницы для роботов даже если она останется невидимой для человека.
  • Избегайте повторения одних и тех же мета-данных в разных форматах. Чаще всего их можно объединить, используя разные техники.
  • Проверяйте качество разметки с помощью соответствующих парсеров и валидаторов.
1

Уже долгое время не утихают споры о том как «правильно» разметить логотип. О некоторых интересных доводах можно, например, прочесть в статье «Ваш логотип — всё еще изображение … как и мой!». Независимо от того какими именно тегами размечен ваш логотип, логотип компании или продукта, этой разметке всегда можно добавить семантики.
В словаре Schema.org у объекта Organization есть поле logo, которое указывает на картинку с логотипом.
<div itemscope itemtype="http://schema.org/Organization">
  <a href="http://www.apple.com/" itemprop="url">
    <span itemprop="name">Apple</span>
    <img itemprop="logo" alt="Apple Logo"
      src="http://www.apple.com/apple-logo.png">
  </a>
</div>
У Product, Person и Organization есть другое поле — brand. Оно, в свою очередь, может ссылаться на Organization или Brand, в котором уже есть поле logo.
<!-- разметка продукта -->
<div itemscope itemtype="http://schema.org/Product" itemref="_brandApple">
  <a href="http://www.apple.com/pr/products/iphone/iphone.html" itemprop="url">
    <span itemprop="name">iPhone</span>
    <img itemprop="image" alt="iPhone 5 Black"
      src="http://images.apple.com/products/iPhone_5_Black.jpg">
  </a>
</div>

<!-- разметка логотипа -->
<div itemscope itemtype="http://schema.org/Brand" itemprop="brand" id="_brandApple">
  <a href="http://www.apple.com/" itemprop="url">
    <span itemprop="name">Apple</span>
    <img itemprop="logo" alt="Apple Logo"
      src="http://www.apple.com/apple-logo.png">
  </a>
</div>
Итак, чтобы добавить семантики разметке логотипа, опишите его схемой Brand и ссылайтесь на него, там, где это потребуется. Безусловно, логотип может быть так же и самодостаточным объектом на странице.
5

Каждый значимый объект микроразметки должен иметь свойства name и url. Эти свойства наследуются всеми объектами от Thing. Хоть форматом и не накладывается жестких ограничений на их обязательное присутствие, но фактически, чтобы получить максимальную пользу от микроразметки, они просто необходимы.

Свойство name

Отвечает за название объекта. Оно, скорее всего, будет использоваться для отображения пользователю.
<div itemscope itemtype="http://schema.org/Event">
  <span itemprop="name">Собрание рыцарей круглого стола</span>
  <time datetime="2013-08-23T12:00:00+06:00"
      itemprop="startDate">23 августа 2013 в 12:00</time>
</div>
Для английского языка вычленить в тексте подходящее название объекта не составляет труда. В русском тексте приходится сталкиваться с тем, что слова употребляются в различных падежах. Слова, подвергшиеся склонению, лучше не использовать в качестве значения поля name. Дело в том, что в дальнейшем они будут использоваться только в единственном числе и именительном падеже, и будут выглядеть более чем странно. Несмотря на то, что сегодня уже существуют технологии, преобразующие разные формы слова к основной форме, но на практике они пока почти не применяются.
Если подходящего слова или словосочетания не нашлось, то явно укажем его в теге <meta>.
<div itemscope itemtype="http://schema.org/Event">
  <span itemprop="name">Собрание рыцарей
    <span itemscope itemtype="http://schema.org/Product">
      круглого стола
      <meta itemprop="name" content="круглый стол">
    </span>
  </span>
  <time datetime="2013-08-23T12:00:00+06:00"
      itemprop="startDate">23 августа 2013 в 12:00</time>
</div>
Эта разметка будет разобрана на два объекта:
event
  itemType = http://schema.org/Event
  name = Собрание рыцарей круглого стола
  startdate = 2013-08-23T12:00:00+06:00

product
  itemType = http://schema.org/Product
  name = круглый стол

Свойство url

Однозначно указывает на то, где располагается описываемый ресурс. Благодаря этому свойству можно точно выявить одинаковые объекты, даже если они имеют разное имя. Ведь свойство name получается из текста, написанного для пользователя, и вполне может слегка варьироваться от случая к случаю.
<div itemscope itemtype="http://schema.org/Event">
  <a href="/meetups/2013-08-23/" itemprop="url name">Собрание
      рыцарей круглого стола</a>
  <time datetime="2013-08-23T12:00:00+06:00"
      itemprop="startDate">23 августа 2013 в 12:00</time>
</div>
url активно используется для генерации сниппетов Гугла. Поэтому даже при правильной разметке нужный сниппет не будет отображаться в выдаче только из-за отсутствия или не корректном значении этого свойства.
Распространённой ошибкой при указании значения url является банальная подстановка текущего URL страницы, на которой располагается объект. Это допустимо только, если на этой странице размещена только одна сущность. Когда сущностей несколько (например, список событий) или, что хуже, появляются сущности разного типа, то указать один и тот же URL для них нельзя.
В случае списка (предполагается, что отдельных страниц для каждой сущности нет), в значении нужно использовать разные фрагменты URL.
The fragment is an optional part separated from the front parts by a hash («#»). It holds additional identifying information that provides direction to a secondary resource, e.g., a section heading (in an article) identified by the remainder of the URI. When the primary resource is an HTML document, the fragment is often an id attribute of a specific element and web browsers will make sure this element is visible.
Формально URL уже будут отличаться друг от друга, хотя и ведут на одну и ту же страницу. Это и позволяет отличить различные объекты на ней.
<div itemscope itemtype="http://schema.org/Event" id="meetup-2013-08-23">
  <a href="#meetup-2013-08-23" itemprop="url name">Собрание
      рыцарей круглого стола</a>
  <time datetime="2013-08-23T12:00:00+06:00"
      itemprop="startDate">23 августа 2013 в 12:00</time>
</div>
Когда на странице оказывается несколько объектов разных типов, URL страницы рекомендуется назначать какому-то основному из них (например, статье), а остальным указывать URL страницы с разными фрагментами. Разумеется, что соответствующие идентификаторы должны быть доступны на ней.
И в заключении хочу обратить внимание, что значение атрибута id может начинаться только с латинской буквы или символа _. Любые другие символы могут встречаться только начиная со второй позиции в строке.
Оставте свой комментарий

«Хлебные крошки» (breadcrumbs) помогают пользователям ориентироваться в структуре сайта. Хотя, стоит заметить, что в современном дизайне их встречаешь всё реже и реже. Но сейчас они могут оказаться полезными не только пользователям, но и поисковикам.
Поисковики и сами прекрасно умеют определять структуру сайта. Google, например, может построить «крошки» от главной страницы сайта до целевой страницы из цепочки ссылок и вывести их в сниппете. Но, лучше всего «хлебные крошки» разметить с помощью microdata. В словареData-Vocabulary.org есть специальный тип для этого — Breadcrumb.
<div class="breadcrumbs">
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://noteskeeper.ru" itemprop="url">
      <span itemprop="title">Свежие заметки</span>
    </a> &#8250;
    <span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://noteskeeper.ru/topic/markup/" itemprop="url">
        <span itemprop="title">Вёрстка</span>
      </a> &#8250;
      <span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="http://noteskeeper.ru/527/" itemprop="url">
          <span itemprop="title">Вёрстка независимыми блоками</span>
        </a>
      </span>
    </span>
  </span>
</div>
Пример в выдаче Google
В примере видно, что под ссылкой на целевую страницу есть ещё две ссылки: на корень сайта, и на страницу категории статьи. Таких промежуточных ссылок может быть больше.
Формат разметки, возможно, ещё будет меняться. На текущий момент, все объекты типаBreadcrumb неявно связываются между собой. Последовательность в цепочке определяется их последовательностью в документе. Для явного связывания объектов есть поле child. В этом случае объекты должны быть вложены друг в друга (как в моём примере).
Казалось бы, с разметкой хлебных крошек в виде неупорядоченного списка можно было распрощаться. Однако я нашёл способ, как создать требуемую связанную структуру. На помощь приходит свойство itemref.
<ul class="breadcrumbs">
  <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
          itemref="breadcrumb-1">
    <a href="http://noteskeeper.ru" itemprop="url">
      <span itemprop="title">Свежие заметки</span>
    </a>
  </li >
  <li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
          id="breadcrumb-1" itemref="breadcrumb-2">
    <a href="http://noteskeeper.ru/topic/markup/" itemprop="url">
      <span itemprop="title">Вёрстка</span>
    </a>
  </li>
  <li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
          id="breadcrumb-2">
    <a href="http://noteskeeper.ru/527/" itemprop="url">
      <span itemprop="title">Вёрстка независимыми блоками</span>
    </a>
  </li>
</ul>
Технически, получилась точно такая же структура — чётко связанный список «крошек». Осталось только проверить на практике, как к нему отнесётся Google.
Обновление: Гугл нормально связал между собой крошки, через аттрибут itemref.
Ну, и напоследок напомню, что если «хлебные крошки» всё же не желательны в дизайне страницы, то их можно спрятать классом «visuallyhidden». Поисковик прекрасно воспринимает контент, скрытый такой техникой.
17

Связывание нескольких вложенных в друг друга объектов microdata происходит через атрибут itemprop.
<article itemscope itemtype="http://schema.org/CreativeWork">
  <aside itemprop="author" itemscope itemtype="http://schema.org/Person">
    <link itemprop="url" href="http://noteskeeper.ru/about/">
    <span itemprop="name">Владимир Кузнецов</span>
  </aside>
  <link itemprop="url" href="http://noteskeeper.ru/811/">
  <h1 itemprop="name">Вложенные объекты microdata</h1>
</article>
Получаем такую структуру:
creativework
  itemType = http://schema.org/CreativeWork
  author
    person
      itemType = http://schema.org/Person
      url = http://noteskeeper.ru/about/
      name = Владимир Кузнецов
  url = http://noteskeeper.ru/811/
  name = Вложенные объекты microdata
Если убрать атрибут itemprop="author", то объект CreativeWork потеряет связь с Person и тот, в свою очередь, переместится на корневой уровень в иерархии объектов, хоть, фактически, останется на том же самом месте в документе.
creativework
  itemType = http://schema.org/CreativeWork
  url = http://noteskeeper.ru/811/
  name = Вложенные объекты microdata

person
  itemType = http://schema.org/Person
  url = http://noteskeeper.ru/about/
  name = Владимир Кузнецов
Очевидно, что элементы, которые будут находиться внутри Person для объекта CreativeWork будут не доступны.

0 коммент.:

Отправить комментарий