Описываем свойства схемы:

При помощи атрибута itemprop мы размечаем свойства схемы: улицу (streetAddress), индекс (postalCode), город (addressLocality). Таким же образом размечаются и остальные схемы.

Проверить, правильно ли размечен документ, можно в специальных валидаторах:

Сегодня Яндекс и Google поддерживают не все сущности, представленные в schema.org, но список постоянно пополняется.
Ниже представлена таблица схем, которые поддерживают Google и Yandex:

Рассмотрим некоторые примеры разметки отдельно для Yandex и Google.

Примеры разметки по схемам, поддерживаемым Яндекс

Адреса и организации

Эта схема разметки подойдет почти всем сайтам, на которых есть адрес организации. Используя эту разметку и участвуя в сервисе «Яндекс.Справочник», можно улучшить отображение сниппета в результатах поиска:

Словарные статьи

Если сайт справочного или словарного типа, то размечая страницу по этой схеме, можно принять участие в программе «Яндекс.Словарей» (подробнее ), что улучшит отображение сниппета:

Отзывы об автомобилях

Если страницы с отзывами на автомобильных сайтах размечены по схеме Review и сайт подключен к партнерской программе Яндекс.Авто , то отзывы будут отображаться на страницах Яндекс.Авто:

И в результатах поиска:

Подробнее об использовании остальных схем для Яндекс вы узнаете, перейдя сюда .

Как видно, большая часть схем, поддерживаемых Яндексом, рассчитана на узкоспециальные сайты (автомобили, аккорды, кинофильмы), исключением являются лишь следующие схемы: картинки , видео и адреса . Эти схемы поддерживаются любыми сайтами.

У Google таких ограничений нет. Например, схема Review будет работать не только для автомобильных сайтов (как у Яндекса), но и для любых ресурсов, которые содержат отзывы.

Примеры разметки по схемам, поддерживаемым Google

Отзывы

Помогает роботу собрать информацию об отзыве на товар, предоставить пользователю рейтинг (в виде звезд) и имя автора отзыва в результатах поиска. С помощью этой схемы можно размечать как отдельные отзывы, так и сводные (например, общее число отзывов).

Пример сниппета отдельного отзыва:

Пример сниппета сводного отзыва:

Мероприятия

Если вы проводите различные мероприятия и публикуете информацию о них на сайте, то благодаря микроразметке Google покажет ее в результатах поиска, сформировав вот такой сниппет:

Товары

Это необходимая схема разметки для любого интернет-магазина. С ее помощью Google сможет показать в результатах поиска дополнительную информацию о вашем товаре (цена, размеры, наличие и т.д.):

Такой сниппет становится заметнее и будет привлекать больше покупателей.

Мы рассмотрели лишь часть схем, которые поддерживает Google, подробнее узнать обо всех вариантах микроразметки вы можете .

Полезные инструменты

Для удобства формирования разметки есть специальные инструменты.

Schema.org creator - это официальный генератор разметки. С его помощью можно получить код основных схем. Для этого нужно просто выбрать схему, заполнить поля и скопировать полученный код.

Маркер - если вы не знаете, как внедрить микроразметку в код вашего сайта, этот инструмент поможет разметить и отправить данные, используя только мышь, редактировать сам код не нужно. Главный минус данного сервиса в том, что структурированные данные отправляются только в Google, Яндекс их не увидит.

Подводя итоги , хотим сказать, что сегодня необходимо использовать все возможности структурированной разметки данных, т. к. это помогает поисковым системам лучше понимать смысл ваших сайтов, а пользователям становится удобнее ими пользоваться. Чтобы быть первым в выдаче поисковых систем, нужно постоянно работать над улучшением сайта и делать его максимально удобным. И микроразметка - один из инструментов, который поможет вам в этом.

Еще по теме:

Евгений Аралов

SEO-аналитик сайт

Продвигаю сайты с 2009 года.

Выступал на конференциях AllInTop, Optimization

Публикую полезные статьи на различных блогах: сайт, optimizatorsha.ru, searchengines.ru и веду Telegram-канал.

Сейчас руковожу SEO-отделом в компании SiteClinic: строю и координирую команду, обучаю специалистов.

Google с Яндексом не дают веб-мастерам спокойно спать - то они вводят новые способы ранжирования сайтов в выдаче – из последних, учет адаптивности шаблона на сайте.
То перестают учитывать ссылочное при ранжировании или вводят какие-то очередные фильтры.
А теперь, дошла очередь до семантической разметки сайта.
Вообще, для Google с Яндексом микроразметка и микроформаты – это основная тенденция в этом году.
Собственно, ее стандарт появился еще в 2011 году, но, если ранее ПС предлагали добавить ее на сайт добровольно, то теперь добровольно-принудительно:), поскольку сайты, не имеющие ее, стали индексироваться хуже, им сложнее попасть в топ выдачи.

Это специальные параметры тегов, которые добавляются в код файлов или текст. Они описывают свойства документа. Если по-простому, этими тегами мы сообщаем поисковому роботу:

«Вот это у меня название статьи, а это изображение, а вот тут идут комментарии.
Это имена комментаторов, а это я, автор сайта, собственной персоной. Не перепутай ничего!».

Из документации Яндекс о микроразметке сайтов:

2. Зачем нужна семантическая разметка сайта?

Она помогает выстроить структурированную иерархию всех данных страницы для поисковых роботов, а также роботов социальных сетей, что улучшит представление сайта в результатах поиска.
Размеченная таким образом страница станет более понятной и прозрачной для роботов всех ПС.
Хотя, представители Яндекса утверждают, что наличие семантической разметки не влияет на позицию сайта, но опыт и наблюдения показывают, что размеченный сайт индексируется ПС намного быстрее и качественнее, а в выдаче показывается на 3-5 позиций выше не размеченных сайтов.
Такая разметка полезна для коммерческих сайтов (всяких-разных сервисов, интернет-магазинов, ресторанов). Также, она помогает продвижению корпоративных веб-ресурсов, самых различных сайтов и блогов.
Сравните сниппеты в выдаче Гугл и Яндекс с микроразметкой и без нее:
Микроразметка Google, рейтинг:




Первый сниппет показывает хлебные крошки, рейтинг, дату публикации.
Микроразметка Яндекс для организаций:




Первый сниппет показывает все контактные данные, время работы, адрес, ссылку на Яндекс карту, по которой можно отследить, где находится организация.
Микроразметка Яндекс, хлебные крошки:




Первый сниппет показывает хлебные крошки, дату публикации.
Микроразметка Яндекс, рецепты:




Первый сниппет показывает изображение готового блюда, ингредиенты, время приготовления, калорийность блюда.
Вся эта дополнительная информация отражается в выдаче благодаря тому, что она размечена на страницах сайта специальным образом.

3. Какую пользу приносит использование семантической разметки?

1. Лучшую, более быструю индексацию новых статей и сайта в целом.
2. Увеличение доверия к сайту со стороны ПС.
3. Лучшие, более информативные сниппеты в выдаче – за счет показа дополнительной информации: рейтинга, цены, контактных данных (адреса, телефона) и т.п.
4. Улучшение поведенческих факторов сайта (больше переходов из поисковой выдачи).

Надеюсь, я убедила вас, что микроразметка действительно нужна.
Теперь о том, какая существует разметка, а также, что из нее понимает Яндекс.

4. Виды микроразметки

В Google Search Console – есть пункт «Структурированные данные».

Рис 1 – ошибки в микроразметке

Начать микроразметку своего сайта лучше с проверки этого раздела. Часто бывает, что инструменты по проверке микроразметки не показывают никаких предупреждений или ошибок, но на самом деле поисковые системы имеют трудности в структурировании данных на вашем сайте.

Рис 2 – ошибки микроразметки Hentry

В нашем случае мы видим, что имеются 106 ошибок, которые относятся к разметке формата hentry (microformats.org)

– микроразметка, встроенная в ядро WordPress. Так как она встраивается автоматически и не адаптирована под сторонние шаблоны - чаще всего работает неправильно, и это приводит к тому, что Google Search Console обнаруживает такие ошибки:

Рис 2.1 – ошибки Hentry: author, entry-title, updated

Но, при этом инструмент для проверки микроразметки от Google – абсолютно спокойно сообщает, что нет никаких ошибок и никаких предупреждений по этому поводу.()

Рис 3 – гугл не видит ошибок hentry

На нашем сайте мы будем использовать признанную всеми поисковыми системами единогласно микроразметку – schema.org .

Этот стандарт поддерживает как Яндекс , так и Google .

Поэтому, встроенную микроразметку hentry, которая в Google Search Console выдает нам 106 ошибок – необходимо просто удалить.

Так как hentry добавляется в ядро wordpress -,что позволяет удалить ее через фильтры, потому как в шаблонах этих классов не видно.

Исходный код для удаления hentry:

Add_filter("post_class", "fc_remove_hentry", 20); function fc_remove_hentry($classes) { if (($key = array_search("hentry", $classes)) !== false) { unset($classes[$key]); } return $classes; }

Код необходимо добавить в functions.php

Это можно сделать любым удобным методом, например, через редактор из админ панели сайта.

Рис 4 – удаление разметки hentry со всего сайта

После сохранение файла и повторной валидации страницы через инструмент для проверки микроразметки от Google – hentry должна будет пропасть.

Проверьте несколько страниц, которые имели ошибки, чтобы убедится, что hentry полностью удалена с сайта.

В Google Search Console вы увидите положительную динамику уменьшения количества ошибок. С течением времени они исчезнут вовсе, остается только ждать.

Рис 5 – положительная динамика уменьшения ошибок hentry

Как удалить ошибку:

ОШИБКА: поле http://ogp.me/ns#image отсутствует или пусто

Рис 6 – ошибка Open Graph ns#image

Нужно понимать, что такого рода ошибки связаны с уже прописанной микроразметкой. То есть на сайте либо встроена, либо добавлена кем-то ранее микроразметка, которая имеет ошибки.

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

В нашем случае на сайте присутствует плагин - SEO Ultimate, который имеет специальный раздел, отвечающий за разметку Open Graph. А это значит, что ошибка связанная с http://ogp.me содержится именно в плагине SEO Ultimate.

Заходим по следующему пути SEO Ultimate -> Open Graph -> Default Values -> Default Image

Находим настройку картинки, которая будет применяться по умолчанию на тех страницах сайта, на которых не будет найдено нужной картинки.

Рис 7 – как исправить ошибку Open Graph ns#image

Добавляем URL адрес картинки, которую бы мы хотели видеть по умолчанию. Напомню что The Open Graph protocol отвечает за вывод красивых постов в социальных сетях, в фейсбуке, твиттере, вконтакте и так далее. То есть эта картинка, которую вы зададите по умолчанию, будет фигурировать в постах социальных сетей, репостах и так далее. Выбирайте брендовую и респектабельную фотографию.

После сохранения изменений – ошибка пропадает.

Рис 8 – ошибка Open Graph ns#article

Но по-прежнему остается ошибка, связанная с неизвестным префиксом article.

Мы с вами уже в курсе, что у нас на сайте установлен плагин SEO Ultimate. Продолжаем копать в этом же направлении.

Рис 9 – как исправить ошибку Open Graph ns#article

Устанавливаем Open Graph Type – Website.

Рис 10 – правильная разметка Open Graph

После всех изменений валидатор разметки Яндекс больше не выдает никаких ошибок:

Рис 11 – валидная разметка Open Graph

Добавляем микроразметку хлебных крошек

Хлебные крошки - это цепочка ссылок от главной страницы до страницы, где сейчас находится пользователь.

Для начала нужно проанализировать сайт на наличие хлебных крошек.

Рис 12 – хлебные крошки на сайте

Хлебные крошки на сайте присутствуют. Теперь нужно понять, каким образом они выводятся. В исходном коде хлебных крошек находим название плагина, с помощью которого они функционируют - Breadcrumb NavXT 4.0.2

Рис 13 – хлебные крошки выводятся через Breadcrumb NavXT

Открываем админ панель нашего сайта и заходим в редактирование плагина Breadcrumb NavXT.

Рис 14 – Настройки Breadcrumb NavXT

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

В нашем случае нас интересуют:

• Шаблон ссылки на страницу блога
• Шаблон на главную
• Рубрика блога Шаблон
• Шаблон ссылки на рубрику

Все шаблоны имеют стандартный вид типа:

%htitle%

%htitle%

Чтобы получить правильную микроразметку, нам нужно разметить этот исходный код с помощью стандарта http://schema.org/BreadcrumbList

1. Dresses
2. Real Dresses

Разберем по порядку, какие элементы содержит разметка, и как их следует применять:

itemscope itemtype=”http://schema.org/BreadcrumbList”

Этот элемент обозначает начало размечаемой области. Все что будет внутри этого элемента – это будет разметка хлебных крошек.

В примере элемент находится внутри нумерованного списка – тег

Это не обязательно, можно использовать

, или другие подобные теги.
Нужно смотреть по обстоятельствам и помнить что от того какой тег вы используете такой CSS и подключится к хлебным крошкам. То есть внешний вид ваших хлебных крошек зависит от того в какие теги вы обрамите http://schema.org/BreadcrumbList .
В нашем случае мы добавим эту строку кода через исходный код виджета breadcrumb_navxt_widget.php
Так как через стандартный редактор кода админ панели WordPress это файл недоступен, мы будем использовать фтп доступ через filezilla.

Рис 15 – Настройки виджета Breadcrumb NavXT
Находим кусок кода, который отвечает за микроразметку, а конкретно нам нужен тег, который обрамляет эту разметку.

Рис 16 – код который обрамляет Breadcrumb NavXT
Находим в файле breadcrumb_navxt_widget.php следующий код:
Echo "
"; И меняем его: echo "
"; //Display the regular output breadcrumb bcn_display(false, $instance["linked"], $instance["reverse"]); echo "
";
Сохраняем файл и перезаписываем его на сервере, в результате получаем то что нам нужно.

Рис 17 –обозначение разметки BreadcrumbList
Он обозначает новую принадлежность к другому типу данных - schema.org/ListItem
А также он описывает свойство – itemListElement. Это свойство уже относится к размечаемым элементам в хлебных крошках. То есть это свойство нам нужно использовать в нашем исходном коде при выводе непосредственно хлебных крошек.
В нашем случае мы будем использовать это в плагине Breadcrumb NavXT.
В начало кода, отвечающего за хлебные кошки –
%htitle%
Мы добавим строку:
%htitle%
Нужно разметить элемент itemprop=”item”, из примера видим, что он отвечает за разметку URL адреса хлебных крошек.
Добавляем его перед href=”%link%” Получаем в итоге:
Далее размечаем свойство itemprop=”name”, то есть имя, которое соответствует нашему URL адресу, уже размещенному нами. Нам необходимо %htitle%, который в нашем случае отвечает за нужное имя – обрамить свойством itemprop=”name”.
Получаем
%htitle%
В конце нам нужно добавить обозначение позиции элемента в иерархической системе, используя свойство itemprop=”position”.
Для этого добавляем строку кода
Главное – делать все аккуратно и в пределах открытых
или
И так, исходя из имеющегося исходного кода:
%htitle%
На основе примера получается следующий код:
%htitle%
Также приведем примеры уже готовых кодов разметки для Breadcrumb NavXT.
%htitle% %htitle%
%htitle%
%htitle%
С Микроразметкой:
%htitle%
В итоге, после успешного добавления микроразметки, мы увидим следующие результаты проверки с помощью .

Рис 18 – валидная микроразметка хлебных крошек
Видео
Любая страница сайта состоит из HTML тегов. Как правило, HTML теги сообщают браузеру как отобразить информацию, которая находится внутри тега. Таким же образом микроразметка Schema.org сообщает поисковым системам где находится та или иная важная информация на странице.
Если Вы еще не встречались раньше с микроразметкой и слышите об этом впервые, тогда перед прочтением данной статьи изучите следующую:
Много о микроразметке Schema.org писать в данной статье не буду, потому что мы подробно все рассмотрели в .
В данной статье я хочу показать о том, как на практике сделать микроразметку на своем сайте, чтобы ее хорошо восприняли и Google и Yandex одновременно. Потому что многие сталкиваются с проблемами: для Yandex микроразметка нормально проходит валидацию (об этом читайте ниже), а вот для Google появляются ошибки, и наоборот. Да, это действительно так. Но всегда можно найти компромисс!
С помощью правильной микроразметки Schema.org можно действительно улучшить индексацию своего сайта поисковыми роботами. Потому что Вы сможете передавать самые важные данные и указывать какие из статей необходимо проиндексировать еще раз, если они были изменены. То есть поисковому роботу информация подается сразу "на блюдечке". Для этого и была создана микроразметка поисковыми системами.
Как проверить "правильность" микроразметки Schema.org?
Для проверки валидации ("правильности") микроразметки предназначены специальные сервисы, которые были разработаны поисковыми системами. Мы будем в данной статье проверять микроразметку для поисковой системы Yandex и Google.
• Валидатор микроразметки от Google
• Валидатор микроразметки от Yandex
Сразу хочу предупредить: если Ваша страница прошла валидацию для одного сервиса, это не значит что она также пройдет и для другого. Поэтому, чтобы сделать полноценную валидацию для двух поисковых систем, Вам придется немного разобраться в том, что Вы делаете, а не просто копировать и вставлять код из данной статьи.
Как пользоваться валидаторами микроразметки?
Во-первых: чтобы использовать данные сервисы валидации Вам нет необходимости регистрироваться. Просто зайти по ссылкам выше сразу можете пользоваться. Сейчас буквально пару слов о каждом из валидаторов.
Итак, начнем с валидатора от Google. Страница выглядит следующим образом:
Есть два варианта проверки валидации страницы:
1. С помощью прямой вставки HTML кода
2. С помощью вставки URL адреса страницы, которую необходимо проверить
Первый вариант проверки больше подходит для того, чтобы просто найти тот самый правильный вариант микроразметки, а уже потом его перенести на реальный сайт. Это намного быстрее, чем постоянно изменять на своем работающем сайте и проверять его вводя URL страницы.
Второй вариант проверки необходимо использовать тогда, когда Вы уже внесли микроразметку на свой сайт. Это делается в самом конце.
После проверки в валидаторе Google появится слева код Вашей HTML страницы, а справа — какая микроразметка там присутствует и есть ли там ошибки:
С валидатором Google я думаю все понятно. Перейдем к валидатору от Yandex.
Когда Вы зайдете на сайт с валидатором микроразметки от Yandex, Вы увидите несколько иную картину, но смысл там остается тот же:
Здесь интерфейс немного проще и опять же есть два варианта проверки Вашего HTML кода: с помощью вставки исходного кода страницы, либо с помощью вставки лишь URL необходимой страницы.
После того как Вы проверили свою страницу на валидность микроразметки, Yandex покажет свои ошибки немного в другом формате, прямо рядом с микроразметкой:
Валидатор Yandex и Google будут давать Вам рекомендации сразу на русском языке. Но и этого бывает мало, потому что у всех ошибки разные и зависят от конкретного контекста страницы и HTML структуры.
Где проверять свою микроразметку Вы сейчас знаете. Поэтому немедленно перейдите на свой сайт, скопируйте URL ссылку первой же статьи и проверьте ее на валидацию.
Очень много ошибок? Не волнуйтесь, все можно исправить. Главное разобраться в этом постепенно исправить все ошибки.
Шаг 1. Что необходимо разметить на странице?
Словарь микроразметки Schema.org очень большой. Здесь можно найти формат разметки практически любого типа записей. В прошлой статье я приводил основной список форматов, которые поддерживаются данная микроразметка: адреса и организации, видео, программы, рефераты, изображения, статьи, фильмы и так далее.
Поэтому первым шагом необходимо определиться с основным шаблоном и правильно его подготовить. А у же потом переносит на реальный сайт.
В данной статье я покажу как сделать пример для сайта, под управлением CMS WordPress. А на данной CMS чаще всего создают блоги. Поэтому будем писать разметку для такого типа страниц, как "Статья".
Далее нам необходимо определить, какую сущность из словаря мы будем использовать. На официальном ресурсе Schema.org есть следующая структура: Article . Но внутри нее есть подструктуры, которые мы можем использовать. Спускаясь все глубже по подструктурам я нашел следующий тип: BlogPosting . Он является частным вариантом сущности Article . И он отлично подходит для разметки записей на блогах.
Сейчас определимся со структурой. Свойств там очень много. Вот скриншот лишь небольшой части из всех возможных:
Но, к счастью, не все свойства являются обязательными. Это радует. Вот наглядный пример разметки страницы:
Сейчас Вы понимаете какие свойства нам понадобятся для разметки страницы. Я сделал данное изображение, чтобы наглядно показать что именно необходимо указать с помощью микроразметки Schema.org. А из картинки выше понятно, что необходимо пометить самые важные зоны документа. Конечно, на изображении я показал не всю микроразметку, которую мы будем использовать, но Вам сейчас необходимо понять для чего вообще мы будем это делать и что именно попадет под разметку страницы.
Шаг 2. Формируем шаблон микроразметки
Что именно будем размечать стало понятно. Осталось собрать правильную структуру.
Основная суть микроразметки (технически): добавить к необходимым тегам дополнительные атрибуты. Иногда добавить дополнительные теги для структуры.
Без прелюдий перейдем сразу к делу. После многочисленных попыток сделать микроразметку Schema.org валидной для Google и Яндекса получилась следующая структура:
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

<div itemscope itemtype= "http://schema.org/BlogPosting" > <link itemprop= "mainEntityOfPage" itemscope href = "Ссылка на статью" / > <div itemprop= "publisher" itemscope itemtype= "https://schema.org/Organization" > <div itemprop= "logo" itemscope itemtype= > <img alt = "Лого www.сайт" itemprop= "image url" src = "http://www.сайт/favicons/favicon-160x160.png" / > <meta itemprop= "width" content = "160" > <meta itemprop= "height" content = "160" > </ div > <meta itemprop= "telephone" content = "-" > <meta itemprop= "address" content = "Россия" > <meta itemprop= "name" content = "www.сайт" > </ div > <meta itemprop= "datePublished" content = "2016-01-24" > <meta itemprop= "dateModified" content = "2016-01-24" > <span itemprop= "author" itemscope itemtype= "http://schema.org/Person" > <span itemprop= "name" > Юрий Немец</ span > </ span > <div itemprop= "articleBody" > <h1 itemprop= "headline" > Заголовок</ h1 > <span itemprop= "image" itemscope itemtype= "https://schema.org/ImageObject" > <img itemprop= "image url" alt = "Описание картинки" width = "500" height = "280" src = "http://www..png" / > <meta itemprop= "width" content = "500" > <meta itemprop= "height" content = "280" > </ span > <p > </ p > <p > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nam tempora doloribus velit dicta iusto alias veritatis inventore, unde eum. Atque voluptatem unde, ipsum autem dolor facere, veniam quas ut.</ p > </ div > </ div >
Так выглядит обычная статья без сторонних дополнений. Код получился действительно немаленький. Сейчас поясню буквально по строкам и расскажу где какие присутствуют нюансы:
• Строка 1: объявляем тип контента, который будет размечен.
• Строка 5: здесь указываем URL адрес страницы, на которой сейчас находится пользователь, то есть адрес текущей статьи.
• Строка с 8 по 18: небольшая подструктура, в которой необходимо указать более подробно сведения о сайте: логотип (адрес до изображения и его размеры), телефон, адрес и название компании (сайта).
• Строка 9 по 13: еще одна подструктура с выводом изображения, то есть логотипа. Все изображения, которые необходимы для микроразметки необходимо выводить именно в такой структуре, где помимо адреса до изображения в meta-тегах еще указывается информация о его размерах.
• Строка 14: указываем телефон, если он есть.
• Строка 15: реальный адрес, если работаете в офисе, например.
• Строка 16: здесь пишем название компании.
• Строка 21: дата публикации статьи. Здесь будьте очень внимательны, потому что ее указывать необходимо в специальном формате: "ГОД-МЕСЯЦ-ДЕНЬ ". И обязательно разделитель должен быть знак "— ".
• Строка 24: дата последнего изменения статьи, чтобы подсказать поисковику какую из статей необходимо переиндексировать, если она была изменена в последнее время. Здесь также действуют правила из предыдущего пункта.
• Строка с 27 по 29: указываем в специальной подструктуре информацию об авторе статьи.
• Строка 32 по 45: основная контентная часть Вашей статьи, внутри которой необходимо отметить несколько элементов:
  • Строка 35: заголовок Вашей статьи. Его помечаем следующим образом, добавляя к тегу заголовка свойство — itemprop="headline" ;
  • Строка 38 по 42: как Вы уже видели ранее, здесь располагается подструктура с изображением. Но в данном случае здесь мы указываем на главное изображение в статье;
Сейчас прошу не пугаться большого описания и самого HTML кода. Я старался все прокомментировать, чтобы Вы видели из чего состоит обычная статья и какие атрибуты необходимо прописать.
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подписаться


В открывающем теге добавляем атрибут itemscope. Это означает, что данный тег содержит некую сущность. Обозначим тип сущности атрибутом itemtype, сразу после itemscope. Названия типов имеют вид URL. Обозначение типов микроданных можно найти на официальном сайте Schema.org. У нас же название типа http://schema.org/Article.
...
После объявления сущности, обозначим ее свойства. Синтаксис свойств сущностей можно найти на официальном сайте Schema.org. Для объявления свойств используется атрибут itemprop. Аналогично находим на странице тег, содержащий заголовок нашей статьи. Теперь добавим атрибут с названием свойства. У нас название свойства - заголовок name.
CMS с точки зрения SEO
Аналогично объявляются все свойства сущности. Ниже перечислим:
3 декабря 2014 года CMS
Содержимое статьи
После того, как мы определили сущность и ее свойства необходимо внести соответствующие правки в коде страницы, то есть добавляем дополнительные атрибуты в теги. В результате мы получаем семантическую разметку страницы блога. Несложно, правда же?
Если у вас будут возникать вопросы или сомнения, всегда обращайтесь на официальный сайт. На нем собрана все необходимая информация по сущностям и ее свойствам, а также примеры семантической разметки Schema.org использования в разных ситуациях.



Печать