Заметки за март 2013 года

Разметка «хлебных крошек» с помощью microdata

«Хлебные крошки» (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». Поисковик прекрасно воспринимает контент, скрытый такой техникой.

Комментарии к заметке: 23

Повседневные задачи для команды OpenSSL

Мне порой бывает нужно закодировать содержимое файла в base64 или наоборот раскодировать. В этом случае выручает команда openssl. Она, скорее всего, уже установлена в большинстве ОС. И 100% есть в Windows, если вы пользуетесь Git.

Содержимое файла кодируется следующей командой

openssl base64 <file.bin >file.base64

Если в выходных данных не нужны переносы строк, то их легко можно убрать

openssl base64 <file.bin | tr -d '\n' >file.base64

Декодируется файл аналогично с дополнительным ключом -d

openssl base64 -d <file.base64 >file.bin

Вообще, команда openssl – это многофункциональный комбайн. Он может создавать ключи и сертификаты для подписи и шифрования, вычислять контрольные суммы (message digests), шифровать и расшифровывать данные, проверять подпись, тестировать SSL/TLS клиенты и серверы.

Так, например, можно подсчитать md5-сумму файла

openssl md5 <file.bin

или строки текста

echo "Hello" | openssl md5
Оставте свой комментарий

Вложенные объекты microdata

Связывание нескольких вложенных в друг друга объектов 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 будут не доступны.

Комментарии к заметке: 2

Обратные связи в микроразметке microdata

Экспериментируя с микроразметкой и отслеживая реакцию поисковиков на это, я пришел к печальному выводу, что Google не очень-то любит так называемые обратные связи. Если, например, вы размечаете AggregateRating, то он должен быть частью структуры CreativeWork.

Хорошая разметка:

<div itemscope itemtype="http://schema.org/CreativeWork">
  <link itemprop="url" href="http://noteskeeper.ru/807/">
  <meta itemprop="name" content="Обратные связи в микроразметке microdata">
  <span itemprop="aggregateRating" itemscope
      itemtype="http://schema.org/AggregateRating">
    Оценка читателей <span itemprop="ratingValue">4</span> на основе
    <span itemprop="reviewCount">1</span> комментария
  </span>
</div>

Не совсем хорошая разметка:

<div itemscope itemtype="http://schema.org/AggregateRating">
  <span itemprop="itemReviewed" itemscope
      itemtype="http://schema.org/CreativeWork">
    <link itemprop="url" href="http://noteskeeper.ru/807/">
    <meta itemprop="name" content="Обратные связи в микроразметке microdata">
  </span>
  Оценка читателей <span itemprop="ratingValue">4</span> на основе
  <span itemprop="reviewCount">1</span> комментария
</div>

Оба фрагмента имеют валидную структуру. Но, к сожалению, в сниппетах будет отображаться только первый фрагмент. Возможно, что поисковику нужно значительное время для корректного связывания объектов.

Есть подозрение, что по тем же причинам Google игнорирует объекты, соединённые через itemref. Хоть валидаторы и формируют правильную структуру, но поисковик эту связь почему-то не учитывает. Хочется верить в то, что это временное явление.

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