О внедрении микроразметки Schrma.org

для записей блога самостоятельно — мой опыт

Здравствуй, читатель!
Однажды я обнаружил, что для записей на моем блоге отсутствует микроразметка для сайта. И хотя тема платная, но она не «генерирует» микроразметку. А поддержка микроразметки не входит в область внимания разработчиков – такой ответ я нашел на форуме компании-разработчика темы.

Нельзя сказать, что микроразметки вообще нет — на блоге установлен плагин Yoast SEO, и он «генерирует» разметку OpenGraf. Однако «погуглив» Интернет, я пришел к выводу, что этого недостаточно. Для поисковиков на сайте нужна еще микроразметка Schema.org. И я решил внедрить эту микроразметку для статей блога.

Данная статья описывает мой опыт внедрения микроразметки Schrma.org на блоге.

Теория: Что такое микроразметка сайта и для чего она нужна?

Обычно это не читают, но на всякий случай пару слов напишу

Микроразметка (или семантическая разметка) — разметка страниц дополнительными тегами и атрибутами в тегах, которые структурируют данные и указывают поисковым роботам на то, о чем написано на странице.

Существуют основные 2 задачи микроразметки:

  1. улучшение выдачи за счет построения красивых и структурированных сниппетов в Яндексе, Google, Bing и Yahoo!
  2. пополнение баз знаний Яндекс Entity Search, Google Knowledge Graph, Bing Satori

Микроразметка для сайта состоит из словаря и синтаксиса.
Словарь — это «язык» ( набор классов и их свойств), с помощью которых указывается суть содержимого на странице. Например, словарь определяет, с помощью какого термина указывать название — «name», «title» или «n».
Синтаксис — это способ использования такого «языка». Синтаксис определяет , какими тегми и каким образом будут указываться сущности и их свойства на веб-странице.

Наиболее распространенные словари:

  • Open Graph
  • Schema.org
  • Микроформаты

Open Graph — словарь, который разработал Facebook для того, чтобы любой сайт смог стать частью этой социальной сети и красиво в ней отображаться.

микроразметка состоит из словаря и синтаксиса

Schema.org — словарь, который вместе разрабатывают крупнейшие поисковые системы для того, чтобы вебмастерам не приходилось размечать страинцы отдельно для каждого поисковика.

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

Стандартов синтаксиса, как и словарей, несколько:

  • Microdata — Микроданные (словарь Schema.org чаще всего встречается именно в этом синтаксисе)
  • Microformats.org — Микроформаты (объединенный стандарт синтаксиса и словаря)
  • RDFa и RDFa Lite (в упрощенном виде RDFa рекомендуется создателями словаря Open Graph)
  • JSON-LD — расширение JSON

Практика: шаг 1 — c чего начать

Итак, решение принято, статью мне нужно разметить по словарю Shema.org, синтаксис — микроданные.

Заглянув в словарь Shema.org я увидел большое количество описаний. И у меня появился первый вопрос: какое описание из словаря использовать для статьи блога : Article или BlogPosting.
Не найдя однозначного ответа – интуитивно я решил использовать Article.

Описание Article имеет много полей. Самый простой способ понять, какие поля необходимы – спросить у поисковых систем, а именно на их сервисах проверки микроразметки:


Проверка структурированных данных Гугла

Валидатор микроразметки Яндекса

Задумка моя такова — внести изменение в файл шаблона описания записи темы, объявив там использование микроразметки Shema.org. Далее обновить записи на сайте и проверить их у поисковиков на предмет ошибок структурирования данных (ссылки даны выше). По идее, поисковики должны сами подсказать, какие поля им обязательно нужны для микроразметки.

Для «включения» микроразметки нужно вставить в тег, обрамляющий «тело» записи, следующий код:

itemscope itemtype="http://schema.org/Article"

Содержимое записи выводится файлом шаблона темы single-post.php или single.php. Если в каталоге с темой есть оба файла – преимущество имеет single-post.php.

Практика: шаг 2 — Первая редакция файлов

С помощью программы FilleZila по ftp зашел на сайт в каталог с темой, нашел там файл single-post.php и скачал его к себе на компьютер. А c помощью программы Notepad++ открыл файл, и нашел в файле то место, где начинается вывод содержимого записи (рис 1).

Рис 1 Начало записи в шаблоне

Рис.1 Где начинаеться «тело» записи

В моей теме «тело» записи обрамляет тег <article>. Вставил в тег код «включения» микроразметки Schema.org (рис.2).

Рис 2 Куда вставить обявление микроразметки

Рис.2 Куда вставить «обявление» микроразметки

Сохранил файл и отредактированный файл после этого «вернул» обратно на сервер. Я использую дочерную тему, и посему отредактированный файл я записал в каталог дочерной темы.

Практика: шаг 3 — проверка поисковиками

Сервисом проверки структурированных данных Гугла проверяю запись на блоге и получаю от поисковика 11 ошибок. Это список всех незаполненных полей микроразметки, которые на данный момент нужны Гуглу (рис.3).

Рис.3 Какие поля микроразметки нужны Гуглу

Рис.3 Какие поля микроразметки нужны для поисковика Google

Практика: шаг 4 — Вторая редакция файлов

И вот теперь шаг за шагом «прописываю» поля.
Нахожу в шаблоне место, где прописывается заголовок статьи и вставляю туда «метку» для заголовка: itemprop=»headline»(рис.4):

Рис.4 Размечаем заголовок статьи

Рис.4 Разметка заголовка статьи

Далее нахожу в файле шаблона место, где размещено содержание статьи (в моем случае это div со свойствами класса post-wrap) и вставляю туда код микроразметки itemprop=»articleBody»(рис.5):

Рис.5 Размечаем содержание статьи

Рис.5 Разметка содержания статьи

И в заключение, нахожу в файле шаблона то место, где заканчивается статья (закрывающий тег </article> в моем случае) и вставляю перед тегом код для остальных полей микроразметки:

<pre>
<!--микроразметка статьи Schema.org -->
<div style="display:none;">
    <meta itemscope="" itemprop="mainEntityOfPage" itemtype="https://schema.org/WebPage" itemid="<?php the_permalink() ?>">                
    <span itemprop="name"><!--?php the_title(); ?--></span>
    <span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
        <span itemprop="name">Александр Коваль</span>
    </span>     
    <meta itemprop="datePublished" content="<?php the_date('Y-m-d'); ?>">
    <meta itemprop="dateModified" content="<?php the_modified_date('Y-m-d');?>">
    <span itemprop="publisher" itemscope="" itemtype="https://schema.org/Organization">
        <meta itemprop="telephone" content="+380 671717147">
        <meta itemprop="address" content="Украина, г.Житомир">
        <meta itemprop="name" content="www.alexkoval.name">                                
        <span itemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject">
            <img alt="Лого www.alexkoval.name" itemprop="image url" src="https://www.alexkoval.name/wp-content/uploads/2016/02/1newlogo2016Logo3.png">
            <meta itemprop="width" content="60">
            <meta itemprop="width" content="67">        
        </span>
    </span>
    <span itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject">    <!-- миниатюра записи - -->
        <!--?php $attachment_id =  get_post_thumbnail_id( $post--->ID ); // ID вложения
        $image_attributes = wp_get_attachment_image_src( $attachment_id, 'full' );// вернулся массив array    путь и размеры миниатюры                                                                
        $alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);                                
        ?&gt;                            
        <img itemprop="image url" alt="<?php echo $alt?>" src="<?php echo $image_attributes[0] ?>" height="<?php echo $image_attributes[2] ?>" width="<?php echo $image_attributes[1] ?>">
        <meta itemprop="width" content="<?php echo $image_attributes[1];?>">
        <meta itemprop="height" content="<?php echo $image_attributes[2];?>">
    </span>            
</div>                            
<!-- конец кода микроразметки-->
</pre>

Практика: шаг 5 — Проверяем результат

После этих правок «заливаю» файл на сервер и проверяю с помошью гугл и яндекс. Ошибок нет, цель достигнута.

Результат внедрения микроразметки - Гугл
Результат внедрения микроразметки Яндекс

Возможно, ты знаешь лучший способ или в статье нашел «полезности» для себя — поделись в комментариях внизу страницы.

Удачи!
Александр Коваль

Метки: