Добавляем микроформаты для блога на WordPress

Микроформаты

— это тэги, которые служат для описания определенного типа информации на веб-странице. Например отзыва, мероприятия, товара, компании или человека.

Любая информация имеет собственные свойства. Например, «человек» включает такие свойства, как: имя, адрес, должность, место работы и адрес электронной почты.

В общем случае микроформаты определяются с помощью атрибута class внутри HTML-тегов

<span>

или

<div>

Пример из Википедии

Предположим, что имеется контейнер с уже размеченной информацией о человеке:

<div>
   <div>Василий Пупкин</div>
   <div>Рога и Копыта</div>
   <div>495-564-1234</div>
   <a href="https://example.com/">Мой сайт</a>
</div>

С помощью микроформата hCard можно добавить семантическую значимость этому блоку кода:

<div class="vcard">
   <div class="fn">Василий Пупкин</div>
   <div class="org">Рога и Копыта</div>
   <div class="tel">495-564-1234</div>
   <a class="url" href="https://example.com/">Мой сайт</a>
</div>

Содержимое самих элементов не изменилось; к ним только были добавлены атрибуты, указывающие, где именно в блоке находится та или иная информация (имя, телефон и так далее). Весь блок при этом имеет атрибут class=»vcard», который является родительским для микроформата hCard. Это означает, что данный элемент и все вложенные в него элементы вместе составляют микроформат hCard.

Микроформаты для блога на WordPress

Для блогов и других подобных сайтов лучше всего подходит микроформат hAtom. Вот его мы и будем внедрять.

Редактируем файлы нашей темы index.php, single.php, search.php

1. Найдите контейнер div с id «content» и добавьте класс «hfeed».
Например:

<div id="content" class="narrowcolumn hfeed">

2. Далее находим div с классом «post» и добавляем класс «hentry».
Например:

<div class="post hentry" id="post-<?php the_ID(); ?>">

3. Заголовок поста редактируем так, чтобы он стал одновременно ссылкой с классом «entry-title».
Например:

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>" class="entry-title">

или

<h1 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>

4. Теперь самая сложная часть. Дату публикации поста нужно привести в такой вид.
Пример:

Было:

<?php the_time('Y-m-d H:i') ?>

Стало:

<abbr class="published" title="<?php the_time('Y-m-d\TH:i:s\Z') ?>"><?php the_time('Y-m-d H:i') ?></abbr>

5. В файле single.php меняем класс «entry» на «entry-content».
Например:

<div class="entry-content">

6. В файле index.php меняем класс «entry» на «entry-summary».
Например:

<div class="entry-summary">

7. В файле comments.php строку с comment_time или comment_date заключаем в div с классом «updated».
Например:

<div class="updated"><small class="commentmetadata"><a href="#comment-<?php comment_ID() ?>"><?php comment_date('j F Y') ?> в <?php comment_time() ?></a></small></div>

Вот и все. Теперь Гугл всегда правильно будет определять содержимое наших страниц и делать правильные сниппеты.