Как сделать микроразметку главной страницы сайта и страницы комментариев

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

Вот, наконец дошла очередь до микроразметки Главной страницы сайта и страниц категорий.

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

Микроразметка главной страницы сайта

Добавление микроразметки на сайт процесс не сложный — нужно найти в файле нужный раздел, затем обернуть его блоком, после чего задать тип разметки (например, статья, изображение, видео и пр.). А к отдельным элементам добавить специальные параметры разметки (заголовок, текст статьи, метаданные, автор, дата и пр.).

Если же, нужные нам данные не заключены в теги, нужно добавить к ним теги span или div, а внутри тегов написать параметры разметки. Например, так:

<div itemprop="mainEntityOfPage">

Итак, как сделать микроразметку Главной страницы сайта и страниц категорий?

Сначала, нам нужно выбрать подходящую сущность – полный перечень сущностей можно найти на этой странице.

Поскольку у нас сайт (или блог), нам подойдет сущность Article или BlogPosting.

Микроразметку для Article я уже описывала (ссылку на нее вы найдете внизу поста), поэтому сегодня рассмотрим BlogPosting.

В спецификации сущности blogPosting выберем пункты, которые нам подходят, это:

  1. articleBody – собственно, статья,
  2. mainEntityOfPage – указание на то, что статья является основным материалом по этой теме,
  3. description – описание, по-сути, анонс статьи,
  4. articleSection – раздел, в котором она находится (разделов может быть много),
  5. url - полный адрес статьи,
  6. author - автор,
  7. headline - полное название статьи,
  8. datePublished - дата публикации,
  9. dateModified – дата изменения,
  10. commentCount - количество отзывов или комментариев.

Теперь, нам нужно добавить разметку в файлы темы, отвечающие за вывод анонсов на Главной и в категориях. Это могут быть home., index., category. или archive.php.

В них находится цикл вывода анонсов или подключение файла с этим циклом.

Цикл вывода анонсов начинается кодом:

 if (have_posts()): while (have_posts()): the_post();

Подключение выглядит примерно так:

require_once(TEMPLATEPATH."/includes/loop.php");

Или так:

include(TEMPLATEPATH."/includes/loop.php");

Или как-то так:

get_template_part( 'content' );

Далее, нужно открыть указанный файл.
В первом случае это loop.php, а в последнем content.php.

Ход действий:

  1. Находим div, которым обернут цикл, добавляем к нему объявление основной сущности для этой страницы: itemscope itemtype=http://schema.org/BlogPosting. Вот так:
    <div itemscope itemtype="http://schema.org/BlogPosting">
  2. Далее, отслеживаем нужные элементы на странице и добавляем к ним параметр itemprop="", со значениями, перечисленными выше (articleBody, mainEntityOfPage, description).
    Например, к div, который оборачивает вывод статьи, добавляем itemprop="articleBody" . Вот так:

    <div itemprop="articleBody">

    Так же поступаем со всеми другими блоками на странице.

Правила добавления разметки:

  1. Параметр itemprop добавляется к div, оборачивающему только нужную сущность.

    Пример неправильного использования:

    <span itemprop="articleSection">Категория: <?php the_category(', ') ?></span>

    Пример правильного использования:

    Категория: <span itemprop="articleSection"><?php the_category(', ') ?></span>
  2. Параметр itemprop может содержать несколько значений.

    Например, itemprop="url contentUrl".
    Здесь 1й параметр понимает Google, а 2й – Яндекс.

  3. Если вы не хотите показывать некоторые сущности, например, свое имя или ссылку на полный текст статьи, эти сущности можно сделать невидимыми для пользователей.
    Для этого их нужно добавить к тегу META, вот так:

    <meta itemprop="author" content="Иван Петров" />

    Обратите внимание!
    Параметр content тега meta не может содержать ссылок.

    Чтобы скрыть от посетителей, ссылки лучше добавлять их к тегу LINK, вот так:

    <link itemprop="url" href="Здесь ссылка" />

Файл с микроразметкой Главной страницы сайта и страниц категорий скачайте по ссылке внизу поста ↓.

Теперь о том, как сделать микроразметку комментариев:

Код комментариев находится в файлах comments или functions.
Найдите вывод комментария, обычно он заключен в теги li, выглядит примерно так:

<li <?php comment_class(); ?> id="li-comment-<?php comment_ID( ); ?>">  
    <div id="comment-<?php comment_ID( ); ?>" class="single_comment">  
        <?php echo get_avatar( $comment, 50 ); ?>
        <div class="commentmetadata">
            <?php comment_author() ?> 
             <span class="time"><?php comment_date('Y.m.d') ?> в <?php comment_time('H:i') ?></span> 
             <?php if (function_exists('comment_subscription_status')) { if (comment_subscription_status()) { echo '(подписан на отзывы)'; } } ?> 
             <?php edit_comment_link('Редактировать &raquo;','',''); ?>
        </div>  
        <?php if ($comment->comment_approved == '0') : ?>  
        <span class="moderation">Ваш отзыв на модерации.</span>  
        <?php endif; ?>  
            <div class="comment_text">
                <?php comment_text() ?>  
            </div>  
            <?php echo comment_reply_link(array('before' => '<div class="reply">', 'after' => '</div>', 'reply_text' => 'Ответить &raquo;', 'depth' => $depth, 'max_depth' => $args['max_depth'] ));  ?>
    </div>
</li>


К тегу li нужно добавить объявление сущности комментария: itemscope itemtype="http://schema.org/Comment" и параметр itemprop="comment". Вот так:

<li itemprop="comment" itemscope itemtype="http://schema.org/Comment" <?php comment_class(); ?> id="li-comment-<?php comment_ID( ); ?>">

Далее, нужно найти вывод имени автора:

<?php comment_author() ?>

Обернуть его тегами span и добавить к открывающему тегу itemprop="author", вот так:

<span itemprop="author"><?php comment_author() ?></span>

Осталось последнее - вставить itemprop="text" в div, оборачивающий текст комментария. Вот так:

<div itemprop="text" class="comment_text">
   <?php comment_text() ?>  
</div>

↓ Мои подписчики могут скачать файл с разметкой по ссылке ниже

Уже скачали 29 раз(а)

Открыть ↓

Проверить корректность микроразметки можно валидаторами микроразметки Яндекса и Google.

Хотите получать сообщения о скидочных акциях,
новых постах и темах для wordpress?
  1. Людмила, а в Вашей адаптивной теме Sabrina Responsive микроразметка уже вписана или нужно вписывать самой?
    Ой, Людмила, у Вас это окошко для коментов шире, чм поле сайта, я чуть не потерялась.

    • В этой теме есть частичная микроразметка - хлебных крошек и автора.

  2. Спасибо большое Люда!
    Приятно получать только полезный и качественный контент.

    • Не за что.
      Я рада, что эта информация вам пригодилась.

  3. Здравствуйте. А вы не делаете микроразметку на заказ? И сколько это будет стоить?

    • Делаю.
      Цены можно увидеть в верхнем меню, на вкладке "Платные услуги - Микроразметка сайта".

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

Для того чтобы снять блок и увидеть скрытый контент или ссылку на закачку, подпишитесь на обновления блога.

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 194
Отзывов 4295