В сегодняшней публикации «Что такое schema org и как проверить микроразметку Schema», я расскажу о разметке Schema ( в переводе означает Схема) и с помощью каких сервисов проверить страницу с этой микроразметкой. Разметка Schema — это определенные правила разметки контента в сети, которые были приняты в 2011 году поисковиками.
При помощи этой разметки структурируют контент на странице вашего сайта. Благодаря ей работа поисковиков упрощается. Она похожа на применение блок-схем разных алгоритмов. Пошаговыми схемами сложные данные очень четко представлены . С разметкой Схема схожая ситуация: простым языком о сложных данных рассказываются поисковикам. С этой информацией аккуратно составляется сниппет в выдаче — с привлекательными предложениями, необходимыми данными посетителю.
Для чего нужна микроразметка schema org
Данная разметка говорит ботам поисковиков, как надо составлять сниппет для страницы. Абсолютно разный контент может быть на странице — статьи, видеоматериалы и так далее. И чтобы информация о странице в выдаче была интересной посетителям для этого применяют особые теги, в которых заключена информация о содержании.
На плохо составленный сниппет пользователи будут кликать гораздо реже, чем на хороший. Надо сразу знакомить потенциальных посетителей с контентом, который ожидает их на вашей странице. Это понизит количество отказов и хорошо повлияет на поведенческие факторы, а это отлично скажется на позиции вашего сайта в выдаче.
Наиболее распространенные форматы контента:
- Видео.
- Адреса и организации.
- Сервисы отзывов.
- Часто задаваемые вопросы.
- Банки рефератов и докладов.
- Софт.
- Интернет-магазины.
- Рецепты.
- Статьи блога.
- Картинки.
Что такое schema org — это словарь смысловых данных, позволяющие поисковым системам лучше понять структуру и содержание находящегося на странице контента.
Использование микроразметки schema.org
Чтобы информация была заключена в код страницы, необходимо применять теги, а внутри тегов разные атрибуты.
Теги микроразметки
Разметка прописывается с помощью этих тегов:
- <div>...</div>— описание сущности помещаются сюда.
- <span>...</span> — словесные свойства сущности вставляются в эти теги.
- <link>с внутренним атрибутом href — применяют данное сочетание для ссылок на страницы и перечислений, скрытых от обычных посетителей.
- <time>...</time> с внутренним атрибутом datetime — благодаря ему задается дата и время.
- <a>...</a> — данными тегами обозначают ссылки видимые посетителями.
- <meta> — этот тег применяется для скрытия информации от посетителя. Его слишком часто лучше не использовать, так как Google этого не любит.
Атрибуты микроразметки
Вот эти элементы служат атрибутами разметки:
- itemscope — показывает боту поисковика, что в коде есть описание сущности.
- itemtype — показывает какой тип сущности. Весь список можно посмотреть на официальном сайте микроразметки schema.org.
- itemprop — в нем содержится свойство применяемой сущности. К примеру, если сущностью является фильм, тогда в свойствах пишется имя режиссера, название, ссылка на трейлер, жанр и так далее.
Микроразметка Schema служит образцом семантической разметки различных данных в интернете. Данный формат поддерживается такими крупными поисковиками, как Гугл, Bing, Яндекс и Yahoo!. При помощи словаря разметки Схема размещается контент на странице для поисковиков.
Как с Schema делать разметку контента на блоге
С этой разметкой могут быть размечены разные виды контента. В частности, страницы сайта. Сперва надо определить, чему конкретно мы будем делать разметку. В данном примере для микроразметки Schema будем работать со статьей, которую назовем сущностью. Чтобы все было наглядно, нашу сущность выделим визуально, а также ее некоторые блоки информации, мы их назовем свойствами.
Важные параметры микроразметки для статьи:
- headline - эту запись нужно прописать в заголовке статьи,
- articleBody - данная метка должна быть в теле статьи,
- author - этой меткой выделяем автора,
- datePublished - для даты,
- image - для изображений,
- publisher - данной меткой выделяем автора статьи.
Рекомендуемые параметры:
- dateModified - метим дату редактирования статьи,
- mainEntityOfPage – с помощью этой метки выделяем основную страницу по данной теме,
- articleSection - метим рубрику статьи.
Теперь мы знаем, что статья — наша сущность. Сейчас в коде страницы надо найти тег, в котором находится наша сущность. Можно применять разные инструменты в зависимости от ситуации.
Атрибут itemscope необходимо добавить в открывающий тег. Это значит в данном теге содержится какая-то сущность. После этого необходимо указать тип сущности при помощи атрибута itemtype, оно идет после itemscope. С виду названия типов похожи на URL. На официальном сайте Схема можно узнать о типах микроданных. В нашем случае у типа будет название http://schema.org/Article.
Далее буду описывать примеры для сайтов на WordPress.
Итак, в вашей теме оформления (свой_домен/wp-content/themes/тема_сайта) находим файл page.php (если тема twentytwenty, то файл singular.php). И внутри него в теге div или main напишем следующее:
<div itemscope itemtype="http://schema.org/Article" id="primary" class="content-area">
Теперь после того, как объявили сущности, необходимо обозначить свойства. Также на официальном сайте schema.org можно найти синтаксис свойств сущностей. Чтобы объявить свойство применяется атрибут itemprop. Для этого на странице надо найти тег, который содержит заголовок нашего поста. И туда пропишем атрибут с названием свойства. В данном случае это свойство называется — headline.
Сейчас в вашей теме необходимо найти тег h1, в разных темах оно может находится в различных местах:
- папка темы – "twentyseventeen", далее – "template-parts", затем – "page" и ищем в "content-page.php";
- папка темы – "twentysixteen", далее – "template-parts" и ищем в "content-page.php"";
- папка темы – "twentynineteen", далее – "template-parts", затем – "header" и ищем в "entry-header.php";
- папка темы – "twentytwenty", далее – "template-parts" и ищем в "entry-header.php".
И пропишем его вот таким образом:
the_title( '<h1 itemprop="headline" class="entry-title">', '</h1>' );
Затем, там где располагается php функция the_content:
- папка темы – "twentytwenty", далее – "template-parts" и ищем в "content.php",
- папка темы – "twentysixteen", далее – "template-parts" и ищем в "content-page.php",
- папка темы – "twentyseventeen", далее – "template-parts", затем – "page" и ищем в "content-page.php",
- папка темы – "twentynineteen", далее – "template-parts", затем – "content" и ищем в "content-page.php".
Вставим itemprop="articleBody" в следующий тег:
<div itemprop="articleBody" class="entry-content"> <?php the_content(); ?> </div>
Если у вашей темы отсутствует функция по выводу автора, то с помощью нижеследующего кода его можно вывести:
<span itemprop="author"><?php the_author_posts_link(); ?></span>
Но если есть эта функция, то просто добавьте данную разметку с тегами.
Далее надо найти то место, где выводится дата размещения статьи the_time(). Но если его нет, то следующим кодом добавьте:
<span itemprop="datePublished"><?php the_time('Y-m-d') ?></span>
Также необходимо передать ссылку на изображение. Её можно прописать так, чтобы пользователь не увидел её, с помощью тега link:
<link itemprop="image" href="https://ваш_домен/wp-content/uploads/2020/02/112-768x568.png">
Запись Publisher – имеет отношение к сущности "Организация".
Следующий код можете прописать после или перед выводом функции the_content():
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo image" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url image" src="<?php echo esc_url(get_template_directory_uri()); ?>/images/logo.png" alt="logo" />
<meta itemprop="width" content="6" />
<meta itemprop="height" content="6" />
</div>
<meta itemprop="name" content="<?php bloginfo('name'); ?>" />
<meta itemprop="address" content="ваш_адрес" />
<meta itemprop="telephone" content="ваш_номер_телефона" />
</div>
В этом коде помечена ссылка логотипа сайта, расположенная в вашей теме оформления внутри папки images. Если его нет, то создайте данный каталог и добавьте logo.
В итоге у нашего сайта сделана семантическая разметка страницы.
Не так уж сложно, правда же?
Как проверить микроразметку schema org?
Для проверки микроразметки Schema вашего сайта необходимо воспользоваться специальными сервисами. В первую очередь, такие сервисы имеются у двух самых известных поисковиков Яндекс и Google. С помощью них можно узнать, какие есть претензии к микроразметки Схема. Ввиду этого, лучше провести проверку в обоих сервисах. Google, чаще всего, предъявляет больше претензий и выдает много ошибок и предупреждений.
Проверка микроразметки в поисковике Google
По этой ссылке вы можете попасть на сервис валидатора – https://search.google.com/structured-data/testing-tool
Валидатор разметки Google проверяет вот такие форматы:
- JSON-LD;
- schema.org;
- RDFa;
- микроданные.
Есть два варианта проверки микроразметки страницы:
- Получение URL;
- Фрагмент код.
Второй вариант хорош в том случае, если вы ведёте разработку веб-ресурса на локальном компьютере и вы можете вставить фрагменты кода вашего будущего сайта, чтобы узнать правильно ли сделана разметка. А первый подходит для готового сайта с опубликованными страницами и с помощью проверки URL можно узнать верно ли они размечены. Если применяете готовые шаблоны различных движков, то тут также можно провести проверку страничек блога, в которых могут быть ошибки с микроразметкой schema.org.
Вслед за тем, как вставили URL или HTML код нужно кликнуть на кнопку "Запустить тест". После недолгой проверки появится результат и слева вы сможете видеть код проверяемой страницы, а с правой стороны увидите микроразметку с ошибками и предупреждениями, если таковые имеются. Все элементарно.
При помощи этого сервиса можно и в хлебных крошках искать ошибки разметки.
Проверка микроразметки в поисковике Yandex
По данной ссылке вы можете пройти на сервис валидатора (придется авторизоваться) – https://webmaster.yandex.ru/tools/microtest/
Яндекс поддерживает следующие форматы:
- микроформаты;
- Open Graph;
- RDFa;
- schema.org;
- микроданные.
Проверка микроразметки схема (schema.org) в Яндексе примерно схожа с Google, имеются те же способы проверки:
Только выдача результата немного отличается. Ошибки будут показаны вместе с текстом кода.
И следующие ошибки могут быть обнаружены валидатором:
- Микроразметка не обнаружена – отсутствует разметка или в корневых элементах найдена ошибка;
- Страница не может быть загружена – указана неверная ссылка;
- Принадлежность полей невозможно определить – неверное размещение полей или имеются ненужные атрибуты;
- Поле отсутствует или пусто – обязательных полей нет;
- Для продуктовых сниппетов обязательное условие не выполнено;
- В теге meta ссылка не может содержаться у свойства content – чтобы применять ссылки, вместо meta, необходимо использовать тег link.
Помимо ошибок, могут быть предупреждения:
- Неправильный тип данных – данный тип не похож на образец;
- Некорректное значение поля – значение не схожа со стандартным;
- Дополнительная разметка не указана, она используется с основной разметкой в связке – в данном случае поисковик не сможет использовать правильно передаваемые данные.
После проверки, на основе полученных правильных данных, поисковик Яндекс по истечении двух недель обновит сниппет.
На этом пост «Что такое schema org и как проверить микроразметку Schema» завершается, если у вас возникли вопросы по сегодняшней публикации, тогда напишите их в комментариях.