В этой статье рассмотрим микроразметку статей, что это такое, для чего нужна и как применять.
Что такое микроразметка?
Микроразметка – это специальные метки на странице сайта, которые указывают поисковым системам, где на странице находится та или иная информация. Эта разметка невидима для людей, но понятна для роботов.
Микроразметка состоит из словаря и синтаксиса. Словарь – это язык разметки, набор терминов и свойств, которые описывают содержимое страницы сайта. Синтаксис – это метод описания, т. е. то, как словарь будет использован.
Популярные словари микроразметки:
- schema.org – сделан по инициативе поисковых систем и рекомендуется ими к применению;
- Open Graph – придуман Facebook для эффективного взаимодействия сайтов с этой соцсетью, и поддерживается прочими социальными сетями;
- Микроформаты – основаны на использовании элементов языка HTML, что и позволило ему в свое время обрести большую популярность;
- Data Vocabulary – разработан компанией Google, но прекративший свое развития из-за активной поддержки schema.org;
- Dublin Core – специализированный словарь для библиотек;
- Good Relations – специализированный словарь для интернет торговли;
- FOAF – специальный социальный словарь для разных сообществ.
Наиболее распространенные синтаксисы:
- микроданные – часто применяются со словарями schema.org и Data Vocabulary;
- RDFa – применяется со словарями Open Graph и Data Vocabulary;
- микроформаты – являются как синтаксисом, так одновременно и словарем.
Какой формат семантической разметки выбрать? Если нет уже наработанной базы и начинать разметку нужно с нуля, то лучше всего для статей использовать микроданные с schema.org и RDFa с Open Graph. Их мы и рассмотрим на конкретном примере.
Зачем нужна микроразметка?
Так ли уж нужна семантическая разметка? Может не стоит с этим возиться? Ведь наличие или отсутствие разметки не влияет на ранжирование страницы. По крайней мере так говорят представители поисковых систем. Но это только на первый взгляд. Если разобраться, окажется, что есть факторы, влияющих на позицию страницы в поисковой выдаче:
- На основе данных, переданных роботу разметкой, в выдаче формируется сниппет. Поскольку, улучшается его вид, то возрастает CTR со всеми вытекающими отсюда приятностями для ранжирования страницы.
- Так как поисковик лучше понимает, что находится на странице, то выдача становится более релевантной.
- Данные из разметки заносятся роботом в свои информационные базы и в дальнейшем используются в разных сервисах, предоставляющих информацию пользователю.
- С точки зрения поисковой системы улучшается структура сайта, что приносит ему дополнительные бонусы.
Таким образом хотя само наличие разметки не влияет на позицию страницы в выдаче, но взаимодействие разметки с роботами поисковиков и соцсетей (а через них и с пользователями), в конечном счете, приводит к повышению рейтинга.
Как сделать микроразметку статьи?
Рассмотрим примеры применения микроразметки schema.org и Open Graph. Тут есть некоторое различие. В первом случае вся разметка прописывается рядом с телом статьи. При передаче же информации в соцсети описывается как должна выглядеть ссылка на страницу статьи.
Разметка с schema.org
Рассмотрим, как с помощью schema.org можно сделать микроразметку статьи.
Сначала посмотрим, как статья выглядит в HTML без разметки
|
1 2 3 4 5 6 7 8 9 10 11 |
<section> <h1>Создание микроразметки статьи</h1> <time>22 января 2019</time> <img src=”imgrazmetka.jpg” alt=”Микроразметка статьи”> <article> <p>Начало статьи.</p> <p>Здесь середина текста.</p> <p>А вот уже и конец.</p> </article> <div>Автор: Михаил Степанов</div> </section> |
А теперь этот пример с разметкой
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<section itemscope itemtype="http://schema.org/Article"> <h1 itemprop="headline"> Создание микроразметки статьи</h1> <time itemprop="datePublished" datetime="2019-01-22T16:20:30+00:00">22 января 2019</time> <div itemscope itemprop="image" itemtype="http://schema.org/ImageObject"> <img itemprop="url contentUrl" src=”imgrazmetka.jpg” alt=” Микроразметка статьи”> <meta itemprop="url" content=" imgrazmetka.jpg"> <meta itemprop="width" content="968"> <meta itemprop="height" content="504"> </div> <article itemprop="articleBody"> <p>Начало статьи.</p> <p>Здесь середина текста.</p> <p>А вот уже и конец.</p> </article> <div>Автор: <span itemprop="author">Михаил Степанов</span></div> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"> <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"> <img itemprop="url image" src="logo.png" style="display:none;" /> <meta itemprop="width" content="64"> <meta itemprop="height" content="64"> </div> <meta itemprop="name" content="Наш сайт"> <meta itemprop="telephone" content="+7 800 333 22 33"> <meta itemprop="address" content="г. Пенза, ул. Московская, д. 3"> </div> <meta itemprop="dateModified" content="2019-01-22T17:30:40+00:00" /> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="nashsite.com/microrazmetka" /> </section> |
Прежде всего, мы даем роботу знать, что используем в статье разметку schema.org. Это делается размещением в начале тега, включающего статью, следующей записи:
itemscope itemtype=»http://schema.org/Article» id=»main».
В примере использованы следующие обязательные параметры:
- headline – наименование статьи;
- datePublished — дата публикации в формате ISO 8601;
- image – картинка;
- articleBody – тело статьи;
- author – имя автора;
- publisher – наименование сайта, публикующего статью.
Есть еще необязательные параметры, которые все же желательно указывать:
- dateModified — дата изменения статьи;
- mainEntityOfPage – ссылка на страницу со статьей.
В теге publisher использованы следующие параметры:
- logo — логотип;
- name — наименование организации;
- telephone – телефон;
- address — адрес.
Если статью публикует не организация, а частное лицо, то все равно publisher нужно заполнить, так как параметр обязателен. Иначе Гугл будет ругаться при проверке. Замена Organization на Person не поможет. Можно сознательно не заполнять этот блок и игнорировать предупреждение.
Разметка с Open Graph
Микроразметку Open Graph нужно разместить внутри тегов <html> и <head>.
В блоке <html> указываем роботу на использование разметки Open Graph.
<html xmlns:fb=»http://ogp.me/ns/fb#»>
Все остальное размещается внутри <head>
|
1 2 3 4 5 6 7 8 9 10 11 |
<meta property="og:title" content="Создание микроразметки статьи "> <meta property="og:type" content="article"> <meta property="og:description" content=" В этом материале познакомимся с таким важным видом семантической разметки как микроразметка статьи."> <meta property="og:url" content="http://nashsite.com/microrazmetka "> <meta property="og:locale" content="ru_RU"> <meta property="og:image" content=" http://nashsite.com/imgrazmetka.jpg "> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta property="og: article:published_time" content="2019-01-22T16:20:30+00:00"> <meta property="og: article:modified_time" content="2019-01-22T17:30:40+00:00"> <meta property="og: article: author" content="Михаил Степанов"> |
Выглядит здесь все проще, чем с schema.org. Вот что значат использованные теги:
- og:title – название статьи и текст ссылки;
- og:description – описание статьи, которое показывается под заголовком;
- og:type – тип объекта, для статьи применяется article;
- og:locale – локализация, указывать не обязательно, но желательно;
- og:image – ссылка на картинку статьи;
- og:url – ссылка на статью.
Тег article использовать несложно:
- og:article:published_time — дата публикации статьи;
- og:article:modified_time — дата последнего изменения;
- og:article:author – автор статьи.
Особенности применения микроразметки
Разметки статей schema.org и Open Graph не только можно, но и нужно совмещать. Первая предназначена для поисковиков, вторая для социальных сетей. Никакого конфликта разметок не будет. Поисковые системы понимают оба типа разметки.
После разметки статей, нужно проверить корректность внесенных данных.
Проверка Google
https://search.google.com/structured-data/testing-tool
Валидатор Яндекс
https://webmaster.yandex.ru/tools/microtest/
Проверка Bing
https://www.bing.com/toolbox/markup-validator
Open Graph можно еще проверить отладчиком Facebook
https://developers.facebook.com/tools/debug/
Если на сайте используется CMS, то разметку можно прописывать как вручную, так и с помощью плагинов. Особенно много инструментов есть для WordPress: All in One SEO Pack, WP SEO by Yoast, WP Facebook Open Graph protocol.
Внедрить микроразметку статей на сайте не так сложно, а эффект от этого можно получить значительный. Поисковикам и пользователям будет легче найти и полюбить ваши статьи. А любовь – это та энергия, которая позволит продвинуть сайт к самым вершинам выдачи.
А если есть микроразметка опенграф, то нужно ли дополнительно прописывать схему.орг? Даст ли это какие-то дополнительные бонусы от поисковиков?