| 1 2 3 4 | <h1 class = "title" itemprop= "name" > <div class = "postdate" > <span itemprop= "datePublished" > <span itemprop= "author" > </ div > </ code > |
Микроразметка картинок
Атрибут itemprop="image" позволяет роботам быстро распознавать информацию о картинках.
Вставлять его нужно следующим образом в код изображения:
| 1 2 3 | <img itemprop= "image" class = "size-full wp-image-3279 alignleft" style = "margin: -15px 0;" src = "https://сайт/wp-content/uploads/2014/12/konvers2.png" alt = "конверсия" height = "256" width = "300" > |
Микроразметка комментариев
Чтобы создать микроразметку комментариев, требуется выполнить внедрение следующих атрибутов:
itemprop="comment" itemscope="itemscope" itemtype="https://schema.org/UserComments"
itemprop="interactionCount" – количество комментариев
itemprop="commentTime" – время создания
itemprop="commentText" – текст коммента
Вы можете внедрять атрибуты, как в код определенной страницы, так и в файл function.php для того или иного вида объектов.
Для каждого типа файлов есть свой набор атрибутов, который вы можете изучить на сайте со стандартами (url приведен выше), либо используя генератор атрибутов. К примеру, вот этот schema-creator.org/ .
Но есть ещё один способ, как сделать микроразметку сайта с применением стандарта schema.org, это воспользоваться плагинами. Популярный плагин для микроразметки wordpress — Schema Creator by Raven. Скачав и , вы сможете настроить и создать новую разметку. С его помощью, вам представится возможность выбрать тип разметки для определенного вида объектов, заполнить необходимые поля с описанием и получить готовый код.
Кроме того, вы можете задавать вопросы в комментариях к статье.
Неподготовленному взгляду структура микроразметки может показаться сложной и запутанной, но на самом деле, это совсем не так. Достаточно всего лишь разобраться в иерархии словаря разметки и даже не на самом высоком уровне знать код сайта, чтобы успешно дать нужные сигналы поисковым машинам.
В предыдущей мы вкратце рассказали, что такое микроразметка, и для чего она может использоваться. В этой статье мы от теории перейдем к более наглядным моментам и покажем, как микроразметка внедряется в сайт, и что это дает в итоге. Для примера мы возьмем словарь семантической разметки http://schema.org как наиболее популярный и официально поддерживаемый всеми основными поисковиками. Кстати, существует русскоязычная версия словаря (http://ruschema.org), разрабатываемая энтузиастами. Не такая полная, как оригинал, но внимания достойна.
Как сделать микроразметку и куда прописать нужные атрибуты
Теперь непосредственно к делу. О том, куда прописываются данные, на которые будет обращать внимание поисковая машина. Для начала — три атрибута, которое должны быть использованы абсолютно всегда:
- указывает поисковому боту на то, что на странице присутствует объект, на который стоит обратить внимание;
- itemtype находится после itemscope и описывает, к какому типу относится упомянутый объект. Перечень возможных объектов можно увидеть в соответствующем разделе словаря (http://schema.org/docs/full.html);
- , который описывает свойства данного объекта.
Вновь обратимся к примерам самого Яндекса. Перед нами кусок кода, описывающий фильм «Аватар».
Как видим, атрибут появляется в теге
Иногда значение itemprop само может означать отдельную сущность, в таком случае атрибут itemscope будет находиться внутри уже одного существующего. Это делается употреблением itemscope сразу после itemprop. Например:
Как видим, во внутреннем теге
В какие теги заключается микроразметка
Как вы могли заметить, тег
— в него заключаются свойства объекта, которые можно описать словами. Употребление этого тега очень удобно, так как в него можно заключить любую информацию, при этом не изменив визуально сайт, следовательно его лучше всего вводить, если нужно добавить атрибут itemprop; Тег
используется для ссылок, которые видны пользователям. Если внутри тега заключить url
, ссылающийся на сторонний сайт, то поисковой машине будет легче понять, что именно за информация находится у вас на странице. Например, можно дать ссылку на статью в Википедии: Кроме того, использование тега
полезно для так называемых перечислений, то есть свойств, которые имеют ограниченное количество значений. Например, интернет-магазин с помощью микроразметки может указать на наличие товара на складе. Возможные значения в этом случае, согласно schema.org: in stock
(в наличии), out of stock
(нет в наличии), pre-order
(на заказ). С помощью тега
эту информацию можно оформить следующим образом: Если бы мы не указывали на значение InStock, то предпоследняя строчка могла выглядеть так: Уже в продаже! Но, расширив функции микроразметки, в этом случае мы тег
заменили на <
link>
, превратив его в невидимую ссылку. Аналогичным образом можно использовать и тег <
meta>
, который остается вне поля зрения пользователя, но ввиду негативного отношения поисковых систем к слишком частому его применению, мы рекомендуем им не злоупотреблять. Время или продолжительность описывается тегом <
time>
с атрибутом datetime. Например, на скриншоте ниже, время начала концерта описывается значением startDate: В заключении приведем пример использования микроразметки на сайте, на котором вы сейчас находитесь, а также эффекта, который эта микроразметка дает. Речь идёт об атрибуте AggregateRating для объекта типа Article, то есть для статьи. Под каждой статьей размещен виджет рейтинга статьи, в коде которого присутствует «невидимый» тег Благодаря нему рейтинг статьи можно увидеть в выдаче Гугла. Кроме того, дата публикации в сниппете выдачи – это тоже заслуга микроразметки. Это один из множества примеров использования микроразметки. Она может пригодиться для сайта любой тематики, и улучшить его представление в поисковиках, будь то товары, мероприятия, кулинарные рецепты, отзывы, словарные статьи и так далее, и так далее. Поэтому рекомендуем внимательно изучить schema.org и найти там атрибуты, которые позволят ссылке на ваш сайт выделиться на фоне конкурентов и привлечь больше посетителей. Здравствуйте! Пришло время рассказать о том, как я внедрял микроразметку Schema.org на своем блоге в конце прошлого года и что из этого получилось. Schema.org является единым общепризнанным стандартом, который распознают наиболее популярные поисковые системы, такие как , Яндекс, Yahoo и Bing. Его разработкой занимается международная группа начиная с лета 2011 года. Микроразметка
— это семантическая разметка страниц сайта с целью структурирования данных, основанная на внедрении специальных атрибутов в HTML код документа. Приведу пару доводов в пользу разметки: Спецификация стандарта предлагает владельцам сайтов разнообразные схемы, которые можно использовать для карточек товаров в интернет-магазинах, кулинарных рецептов с пошаговыми инструкциями и необходимыми ингредиентами, адресов организаций и размещения отзывов. Полный список схем Вы найдете на официальной странице проекта .
Блоги, как правило, состоят из страниц ориентированных на информационные запросы. Они не содержат отзывов или галерей изображений, не продают товары и не имеют адреса организации. Поэтому для блогов больше всего подходит схема CreativeWork — Творческие работы. А сейчас я приведу пример верстки блога на WordPress с применением атрибутов Schema.org. Нам потребуется добавить атрибуты itemscope , itemtype , itemprop и присвоить им свойства в соответствии с принятой схемой CreativeWork. Обратите внимание, в основе примера я рассматриваю свой блог сайт, сверстанный на HTML5, поэтому допускаю любые несоответствия с Вашей версткой. Имеются в виду заголовки, секционные и блочные элементы, теги. Обращайте внимание на стандартные функции и к ним добавляйте необходимые атрибуты по аналогии с примером. Формирование конечной страницы в WordPress осуществляется путем объединения нескольких файлов шаблона. Исходный код верхней части страницы как правило располагается в файле header.php. Добавим атрибуты тегу Теперь добавим микроразметку к тегу В моем случае название блога динамически обертывается в различные теги в зависимости от того, на какой странице мы находимся. Открывая главную страницу название заключено в заголовок H1, а названия анонсов в H2. В свою очередь, переходя на страницу с одной записью, в заголовок верхнего уровня помещается название статьи, а название блога является , ведущей на главную страницу. Таким вот образом у меня сформирована логическая структура заголовков, правильная с моей точки зрения. Добавляю в конструкцию свойство name: И сразу после добавляю описание, которое размечается атрибутом itemprop со свойством description: В верхнем меню сайта, как правило, находятся ссылки, ведущие на статические страницы, важные разделы или отдельные категории. Для меню сайта схемой предусмотрен тип разметки — SiteNavigationElement. Здесь применяются свойства name и url для атрибута itemprop . Подобная разметка поможет поисковым системам определить для сайта быстрые ссылки, которые не редко встречаются в результатах поиска. Основное содержимое страницы формируется в файлах single.php (одна запись) и page.php (страница). Для начала задаю статье тип разметки Article:
Дата публикации: Но есть одно НО. ПС находят эти данные и выводят дату в сниппете, получается что статьи, вроде как и остаются актуальными по сей день, но CTR выдачи сильно падает. Как я уже говорил, заголовок статьи заключен в тег H1, дополним его тегом itemprop с присвоенным свойством headline:
В справке сервиса Яндекс.Вебмастер сообщается, что если в документе одновременно используются атрибуты headline и name , то обрабатываться и участвовать в формировании сниппета будет только последнее значение свойства. С помощью свойства articleBody атрибута itemprop делаем микроразметку для основного текста записи:
Приветствую, дорогие читатели и гости блога! Полагаю, вы слышали о таком понятии как микроразметка сайта, если нет, то садитесь поудобнее, и приступайте к изучению этой обширной темы. На данный момент самым популярным форматом микроразметки в Рунете является Schema org. Сразу предупрежу, что в этом посте я не буду учить вас как сделать микроразметку, так как это довольно обширная тема. Я лишь расскажу вам об основных ее типах. О том как сделать микроразметку на блоге WordPress я написал . Микроразметка сайта это определенный стандарт, который помогает поисковым роботам правильно определять содержимое и структуру web страницы. Без семантической разметки и правильных и , поисковые роботы могут неправильно обработать страницу, что соответственно отразится на ее отображении в результатах поиска. А если использовать микроразметку на сайте, то поисковые роботы не только правильно обработают информацию на странице, но и выделят сниппет в поисковой выдаче, что увеличит его кликабельность. Существует несколько типов микроразметки, но не все они поддерживаются поисковой системой Яндекс. Микроразметка schema org
это стандарт, который объявили Google, Bing и Yahoo в 2011 году. Немного позднее и Яндекс принял ее в свои ряды. Вот собственно видео в котором Яндекс наглядно показывает зачем нужна микроразметка. Стандарт представляет собой определенный набор классов, которые описывают свойства документа. То есть если говорить простым языком, мы сообщаем поисковому роботу: «Эй дружище, вот это у меня название статьи, это изображение, а это комментарии. Не перепутай ничего:)». Все доступные классы можно посмотреть на официальном сайте schema.org
. Сайт англоязычный, но есть неполная версия русскоязычного перевода по адресу . Кстати, если вы отлично владеете английским языком, то можете помочь проекту с переводом. В настоящее время Яндекс поддерживает микроразметку schema.org и микроформаты. Микроформат это один из старейших систем микроразметки, но он постепенно уходит в прошлое. Недостатком микроформатов является то, что они создают кучу классов в CSS файле и некоторые из этих классов могут вступать в конфликт со стилями шаблона блога. На момент написания статьи Яндекс поддерживает следующие микроформаты: Гугл в отличии от Яндекс поддерживает все виды микроразметки. Это и плюс, и одновременно большой минус. Дело в том, что большинство шаблонов WordPress, которые находятся в бесплатном доступе взяты с западных источников, и соответственно разработаны по правилам google. Они ведь ориентируются на него, а не на Яндекс. В таких шаблонах уже внедрена микроразметка, например, vCard и Open Graph. Когда же блогер устанавливает на WordPress такой шаблон, понимает, что Яндекс не понимает внедренной разметки, вот тут и начинается веселье в виде ковыряния кода или поиска фрилансеров для этой работы. Я сам когда-то заказывал микроразметку у верстальщика для этого блога. Конечно, ребята с Яндекс могли бы настроить своих роботов, чтобы те понимали все основные способы микроразметки как Google, но Яндекс не дурак. Эти ребята любят, когда львиную долю их работы делают web мастера. Отказом понимать устаревшие типы микроразметки, они убивают сразу двух зайцев – заставляют создавать сайты по самым современным стандартам и экономят свои ресурсы. Правильно размеченный сайт значительно выделяется в сниппете поисковой выдачи. К таким выделениям можно отнести: Чтобы вы наглядно поняли разницу сниппета с микроразметкой и без, вот несколько скриншотов для примера. Вариант 1.
В данном варианте можно увидеть, что присутствует микроразметка. В частности поисковый робот четко понимает разметку даты, хлебных крошек и рейтинг статьи. Вариант 2.
Очень богатый сниппет. Согласны? В сниппет добавлена разметка гугл адресов и учитывая мое местонахождение, Google показывает мне самые ближайшие клиники. Так же мы видим разметку отзывов и рубрик. Вариант 3.
На последнем скриншоте видно, что в сниппете выводятся размеченные изображения и хлебные крошки. Если вы имеете хоть какое-то представление в HTML коде, то предлагаю взглянуть на два варианта отображения контактной информации. Первый вариант без микроразметки, второй с внедренной разметкой Schema.org Вариант без разметки: А вот вариант с внедренной микроразметкой А вот во втором примере поисковый робот так же как и человек, четко понимает, что написанные цифры, это телефон, а рядом стоящие слова это адрес компании. Если вы хотите самостоятельно правильно сделать микроразметку блога, то вот эту . А если не хотите возиться с кодами и предпочитаете пользоваться готовыми плагинами, то предлагаю вам установить плагин для микроразметки WordPress. Но предупрежу, что у плагина есть большой недостаток, о котором расскажу ниже. Итак, плагин называется Schema Creator by Raven
. Просто скачиваем и активируем его на своем блоге. После активации плагина, в редакторе записей появится кнопка, при помощи которой можно будет разметить статью. Если мы нажмем на соответствующую кнопку, можем увидеть, что перед нами появится форма, заполнив которую, мы внедрим микроразметку. На скриншоте пример разметки кулинарного сайта. Как видите плагин Schema Creator by Raven достаточно прост и не требует каких-то особых настроек. Но все же минус у него есть, это постоянное редактирование новых записей. Если же вы внедрите микроразметку Schema org в шаблон блога, то все будет размечаться автоматически. Соответственно экономится время. Нажмите на кнопку, если статья Вам понравилась, это поможет нам развивать проект. Спасибо!
Другой способ указать поисковику на ссылку – это употребления тега
с атрибутом href:
Различие его от тега
заключается в том, что ссылку не увидят посети
тели сайта.
Еще один пример использования микроразметки
Не пропустите:
Пример семантической верстки с помощью микроразметки
Разметка верхней части страницы
Разметка навигационного меню
Разметка основного содержимого
Микроразметка schema org
Микроразметка Яндекс
Микроразметка Google
Пример микроразметки сайта
Офис Васи
Контакты:
Адрес: Ленина, 26,
143350,
Москва,
Телефон: +7 495 123–45–67,
Факс: +7 495 234–56–78,
Электронная почта: [email protected]
Офис Васи
Контакты:
Адрес:
Ленина, 26
143350
Москва
,
Телефон:
+7 495 123–45–67
,
Факс:
+7 495 234–56–78
,
Электронная почта:
[email protected]
Плагин для микроразметки WordPress
Понравилось?