Введение

В теме Divi и в теме Extra отсутствует микроразметка для сайта.

Микроразметка сайта не входит в область внимания разработчиков – такой ответ я нашел на форуме компании-разработчика тем Divi и Extra

Данная статья описывает 2 способа внедрения микроразметки 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.

 

Дополнение от 24.08.21.

Описание Article scheme.org, описывает статью, например новостную статью или отчет о расследовании. В газетах и журналах есть статьи самых разных типов, и это описание призвано охватить их все.

Описание BlogPosting scheme.org описывает сообщение в блоге.

Поэтому я перевел статьи блога на описание BlogPosting.

Описание 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> в моем случае) и вставляю перед тегом код для остальных полей микроразметки:
<!--микроразметка статьи 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="alexkoval.name">                                
        <span itemprop="logo" itemscope="" itemtype="https://schema.org/ImageObject">
            <img alt="Лого AlexKoval.name" itemprop="image url" src="https://divitheme.space/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>                            
<!-- конец кода микроразметки-->

Шаг 5 — Проверяю результат

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

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

Микроразметка сайта с помошью плагина

Для поисковой оптимизации в общем и микроразметки сайта в частности я использую плагин
Rank Math SEO

Установите плагин на сайт — и вы сможете просто добавить и настроить микроразметку сайта для страниц и постов:

Микроразметка сайта
Если вы знаете лучший способ или есть вопросы или замечания; поделитесь комментариями внизу страницы или в социальных сетях.

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

Некоторые ссылки в этой статье являются партнерскими.
Если вы кликните на такую ссылку и приобретете что-либо, я получу партнерскую комиссию.

Рубрики: SEO и продвижение Метки: Тема Divi

Об авторе:

Александр Коваль

Александр Коваль

Предприниматель. IT-специалист. Создаю интернет-магазины, лендинги и другие сайты. Помогаю поддерживать их работу. Расширяю функционал и возможности сайтов на WordPress. Пишите если нужна помощь с сайтом или разработка "с нуля"

Share via
Send this to a friend