Введение
В теме Divi и в теме Extra отсутствует микроразметка для сайта.
Микроразметка сайта не входит в область внимания разработчиков – такой ответ я нашел на форуме компании-разработчика тем Divi и Extra
Данная статья описывает 2 способа внедрения микроразметки Schrma.org на сайте: кодом и плагином.
Теория: Что такое микроразметка сайта и для чего она нужна?
Обычно это не читают, но на всякий случай пару слов напишу
Микроразметка (или семантическая разметка) - разметка страниц дополнительными тегами и атрибутами в тегах, которые структурируют данные и указывают поисковым роботам на то, о чем написано на странице.
Существуют основные 2 задачи микроразметки:
- улучшение выдачи за счет построения красивых и структурированных сниппетов в Яндексе, Google, Bing и Yahoo!
- пополнение баз знаний Яндекс Entity Search, Google Knowledge Graph, Bing Satori
Микроразметка для сайта состоит из словаря и синтаксиса.
Словарь — это «язык» ( набор классов и их свойств), с помощью которых указывается суть содержимого на странице. Например, словарь определяет, с помощью какого термина указывать название — «name», «title» или «n».
Синтаксис — это способ использования такого «языка». Синтаксис определяет , какими тегми и каким образом будут указываться сущности и их свойства на веб-странице.
Наиболее распространенные словари:
- Open Graph
- Schema.org
- Микроформаты
Open Graph — словарь, который разработал Facebook для того, чтобы любой сайт смог стать частью этой социальной сети и красиво в ней отображаться.
Микроформаты разработаны энтузиастами из 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 scheme.org, описывает статью, например новостную статью или отчет о расследовании. В газетах и журналах есть статьи самых разных типов, и это описание призвано охватить их все.
Описание BlogPosting scheme.org описывает сообщение в блоге.
Поэтому я перевел статьи блога на описание BlogPosting.
Задумка моя такова - внести изменение в файл шаблона описания записи темы, объявив там использование микроразметки 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).
<article>. Вставил в тег код "включения" микроразметки Schema.org (рис.2).
Шаг 3 - проверка поисковиками
Проверяю запись на блоге сервисом проверки структурированных данных Гугла и получаю от поисковика 11 ошибок. Это список всех незаполненных полей микроразметки, которые на данный момент нужны Гуглу (рис.3).
Шаг 4 - Вторая редакция файлов
И вот теперь шаг за шагом «прописываю» поля.
Нахожу в шаблоне место, где прописывается заголовок статьи и вставляю туда "метку" для заголовка: itemprop="headline"(рис.4):
</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);
?>
<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
Установите плагин на сайт - и вы сможете просто добавить и настроить микроразметку сайта для страниц и постов:
Удачи!
Александр Коваль
Некоторые ссылки в этой статье являются партнерскими.
Если вы кликните на такую ссылку и приобретете что-либо, я получу партнерскую комиссию.
Заказать у вас можно? И сколько будет стоить?
Сейчас не готов ответить — т.к. «загружен». «Спишемся» по почте.
Александр, добрый день. Буду Вам признателен как эксперту за консультацию по микроразметке. На сайт была добавлена микроразметка schema.org, сущности product и offer. Валидатор яндекс не обнаружил ошибок:
resource = http://breloknomerok.ru/
product
itemType = http://schema.org/Product
description = Сделайте заказ брелока с номером машины на нашем сайте. Выбирайте готовое изображение или заказывайте свой индивидуальный дизайн.
offers
offer
itemType = http://schema.org/Offer
price = от 350.00
pricecurrency = RUB
name = Брелок с номером машины на заказ
Но в панели веб мастер появилось сообщение:
«На многих страницах сайта breloknomerok.ru отсутствуют или некорректно заполнены мета-теги . Это может негативно повлиять на представление сайта в результатах поиска. »
И действительно, в выдаче, в снипете не содержится информации из поля description.
В чем ошибка ?
Буду признателен за ответ
Здравия, Михаил. Похоже, у тебя на сайте есть ошибки в коде: в секции <head> присутствует тег <div>. Насколько я понимаю, секция <head> служит для служебной информации. Проверь страницы сайта валидатором: https://validator.w3.org и увидишь ошибки страниц.
И еще — микроразметка «schema.org/Product» описывает конкретный товар — поэтому желательно размещать ее в коде в том месте, где этот товар описывается. На странице [linl]http://schema.org/Product[/link] внизу приведены различные примеры внедрения этой микроразметки. Рекомендую посмотреть.
Александр, спасибо за найденную ошибку, буду исправлять)
Здравствуйте как разметить видео в divi?