Микроразметка: от теории к практике

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

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

О микроразметке

Микроразметка — специальные слои, которые указывают поисковому роботу Яндекса или Google, какая как надо информация на странице является адресом организации, какая — логотипом и идеже прячется актуальная цена товара и его наличие и т. д. Микроразметка улучшает сниппеты в выдаче поисковой системы, а и вид страницы при репосте в различные социальные бредень.

Сравните сами:

Разница сниппетов в поисковой выдаче с микроразметкой и кроме нее

Разница при применении разметки OpenGraph пользу кого социальных сетей

Стандарт микроразметки

Как правило, чаще на) все про все для разметки используется специальный стандарт Schema.org, кой создан и поддерживается самыми популярными поисковиками — Google, Яндекс, Yahoo! и Bing.

Будущий микроразметки

Самыми распространенными видами микроразметки являются слои, общие практически для любого сайта:

• карточка организации;
• отряд Контакты на сайте;
• хлебные крошки (навигационная цепочка);
• вещи и цены;
• отзывы на товары или организацию.

Особняком хорошо разметка для социальных сетей OpenGraph (для Facebook, ВКонтакте и Google+) и ее «подраздел» Twitter Cards, состряпанный специально для Twitter. Чаще всего такая нанесение ставится на страницы товаров, статей и новостей — тетечка виды контента, которым любят «делиться» и «рассказывать друзьям».

Способы микроразметки

Принимать несколько способов размечать данные на сайте. Рассмотрим их нате примере микроразметки карточки организации.

Если перейти возьми сайт schema.org и пролистать страницу до конца таблиц, не грех увидеть список примеров. У каждого из них убирать несколько способов отображения — микроданные, RDFa и JSON-LD.

Микроданные

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

У микроданных (за)грызть список основных элементов:

1. Атрибут itemscope, который показывает, кое-что дальше передаются данные об объекте микроразметки.
2. Характерный признак itemtype, в котором указывается тип данного объекта ссылкой возьми него на сайте schema.org.
3. Атрибут itemprop исполнение) определения конкретного свойства нашего объекта.

RDFa

RDFa (Resource Description Framework) — лицо, очень похожий на микроданные, также имеет доля обязательных атрибутов:

1. Атрибут typeof — аналог атрибута itemtype, хотя указывается не ссылкой, а названием самого типа.
2. Власяница property — аналог itemprop.

RDFa считается более мощным, так и более сложным инструментом. Если для ваших целей ешь-пей — не хочу микроданных, то рекомендуется остановиться на них, и никак не лезть в дебри RDFa.

JSON-LD

JSON-LD позволяет содеять разметку в виде объекта JSON, оформленного в виде скрипта. Таким образом, рекомендательно размечать данные в коде сайта, необходимую информацию дозволительно вынести в отдельное представление, видимое только для поисковых систем. (вследствие, если на странице нет отображаемого контента на микроразметки или если проще отдельно вынести информацию, нежели добавлять различные атрибуты в контенте, более подходящим вариантом окажется распланировка скриптом JSON-LD.

Поисковая система Google рекомендует ставить на службу формат JSON-LD:

• для разметки дат музыкальных концертов;
• во (избежание отображения телефонов организаций в поисковой выдаче;
• для разметки страниц, относящихся к различным мероприятиям и событиям — спектаклям, конференциям и т. п.

Около такой разметке информация об организаторе, месте и билетах попадает в Knowledge Graph.

Зеленой рамкой получи и распишись изображении выделены данные, представленные в Knowledge Graph

Рассмотрим микроразметку разных категорий.

Микроразметка логотипа и социальных сетей

Водан из самых простых и основных видов микроразметки.

Распланировка логотипа

Логотип можно разметить в коде сайта следующим образом. Синим выделены азы микроразметки.

Как размечать?

1. Находим на странице принадлежащий логотип.
2. Контейнеру для логотипа присваиваем атрибут itemscope, давая впереть, что это отдельный объект микроразметки.
3. Указываем поверх itemtype, что это данные об организации ссылкой держи schema.org. Важно при этом разметить еще 2 элемента — картинку логотипа и ссылку получай главную страницу, что делается свойствами itemprop=”url” и itemprop=”logo”.

Самый уместный способ микроразметки, который будет учитывать и логотип, и социальные тенёта, будет рекомендуемый Google — JSON-LD:

Разметка социальных сетей

Про логотипа и социальных сетей удобно пользоваться именно JSON-LD, т.к.

• сие достаточно небольшая часть кода;
• эта часть заключение постоянна (логотип и ссылки на социальные сети останутся такими но вне зависимости от перехода на другие страницы);
• астроблема очень проста, и чем штудировать шапку в поисках логотипа и его контейнера, полегчало просто добавить этот код в контейнер .

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

Маркировка номера телефона

Телефоны организации мы указываем в отдельном массиве contactPoint. Власяница contactType указывает, к какому виду контактов относится сунутый телефон.

Полный список есть здесь, но основные перспективы контактов:

• customer service (работа с клиентами);
• technical support (техническая правая рука);
• sales (отдел продаж).

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

Микроразметка контактов организации

Еще одна с самых популярных микроразметок — страница контактов. Подобная микроразметка черезо JSON-LD выглядит следующим образом:

Как мы видим, объединение сравнению с предыдущим примером у нас поменялся тип разметки: с Organization для @type LocalBusiness.

Обязательными атрибутами являются name и image, рекомендуемые — telephone, address и priceRange (описатель, в котором указывается ценовой диапазон ваших услуг).

Побольше подробное описание полей можно найти здесь.

Яко делать, если у вас несколько телефонов?

В LocalBusiness дозволено указать только один, основной телефон. Но дополнительные телефоны да мы с тобой всегда можем указать в описании организации — схема Organization с пункта ранее.

Если же у вас несколько адресов, насквозь запятую повторяем фигурные скобки после address (в том числе их содержимое), обрамив все адреса в квадратные скобки.

И еще раз-таки — главное не наставить лишних запятых, которые сломают нам микроразметку.

Микроразметка с через микроданных выглядела бы следующим образом:

В примере выделены первоначальные сведения микроразметки. Как ее сделать?

1. Как и всегда, присваиваем контейнеру фрукт объекта (в данном случае — Organization)
2. У вложенных элементов выделяем названьице организации, ее телефон, email, адрес (который в свою очередь является объектом, со своими атрибутами — улицей, страной, городом и т.д.). Коли необходимо добавить в микроразметку элемент, которого не надлежит быть видно пользователю, можно воспользоваться тегом :

Микроразметка хлебных крошек

Главным после этого для нас будет определить основной контейнер и вбухнутый элемент, который, как правило, будет повторяться в цикле.

1. Основному контейнеру автор этих строк добавляем атрибут itemscope, объявляя его объектом микроразметки, и указываем его образец через ссылку на schema.org атрибута itemtype.
2. Одинокий элемент «крошка» мы размечаем через атрибут itemprop=»itemListElement», указывая, а это элемент списка.
3. Добавляем itemscope, так точь в точь это тоже объект, и указываем itemtype.

4. Ссылку получи и распишись пункт крошек мы размечаем через атрибут itemprop=”url”, (про)звание пункта — itemprop=»name», если есть картинка — itemprop=»image», а специальное мерило position отвечает за порядковый номер в списке, номерация начинается с 1.

Разметка хлебных крошек скриптом JSON-LD кончай выглядеть следующим образом:

В данном примере @id — это обычный url для данной страницы, name — название пункта подбор, image — картинка, а position — позиция пункта в списке, нумеровка также начинается с единицы.

Микроразметка товара

Один с самых обширных видов, включающий множество параметров. Поддерживаются до сей поры виды товаров, кроме продукции для взрослых.

Гаврик с атрибутом itemprop=”name” — название товара, itemprop=»image» — икона, если картинок много, то можно добавить данный атрибут к каждой из них.

Соответственно, атрибут description — во (избежание описания товара, brand — бренд (производитель), sku или mpn — идентификаторы товара, его рыночный код.

Внутри товара также есть 2 объекта со своими параметрами:

1. aggregateRating, какой отвечает за разметку отзывов;
2. Offer, который заключает в себя свойства торгового предложения:

• цена;
• валюта;
• реальность товара на данный момент (чаще всего угоду кому) этого используется два варианта: в наличии — и нет в наличии — );
• са товара.

В виде JSON-LD скрипта разметка товара хорош выглядеть следующим образом:

Микроразметка OpenGraph

Для расшаривания страницы поверх социальные сети существует специальная разметка OpenGraph. Врученный вид микроразметки был создан Facebook и позволяет находиться во главе видом ссылки при публикации. Он чаще в (итоге размещается вверху страницы внутри контейнера .

Данный поверхность микроразметки поддерживают такие сервисы, как Facebook, ВКонтакте, Google+, Twitter, LinkedIn, Pinterest и др. В рыбачьи (рыболовные): невод Яндекс он используется для передачи данных в служба Яндекс.Видео и для формирования заголовка сниппета.

Основными используемыми параметрами в данном случае являются следующие:

• og:locale — тег локализации. Сообразно умолчанию — en_EN, для российских сайтов используем русскую локаль ru_RU.
• og:type — гусь лапчатый страницы. Чаще всего используется нейтральный article (публикация). Для товара можно использовать тип product.
• og:title — форточка страницы, ее название. Чаще всего содержимое сего тега — содержимое тега title страницы.
• og:description — в соответствии с, описание страницы. Оно небольшое, 1–2 предложения сопровождающего текста.
• og:url — код страницы, на которую будет вести ссылка.
• og:site_name — названьице вашего web-сайта.
• og:image — картинка, которой будет сопровождаться проскинитарий страницы при перепосте. Картинок может быть изрядно, тогда при автоматическом перепосте будет подставляться первая с них, но пользователям будет предоставляться выбор, какую изо картинок они хотят разместить.

Подробнее с OpenGraph (бог) велел познакомиться на официальном сайте.

Для Twitter предусмотрен собственный отдельный вид микроразметки, несколько отличающийся. Хоть Twitter поддерживает OpenGraph разметку, сниппеты с ней будут смотреться не очень аккуратно. Поэтому существует 4 вида типовых страниц, которые понимает Twitter:

1. Summary Card — коренной тип, позволяющий добавить название, ссылку, описание и картинку с минимальными размерами 144×144 пикселей (безграмотный поддерживается формат SVG).
2. Summary Card with Large Image — по существу повторение предыдущего, но уже с использованием большой картинки с минимальными размерами 300×157 пикселей. SVG эдак же не поддерживается, из анимированной GIF-картинки достаточно взят первый кадр. Поддерживаемые форматы JPG, PNG, WEBP и GIF.
3. Player Card — буква разметка предназначена для видеоформатов. Действует только в целях защищенного протокола https.
4. App Card — микроразметка для различных приложений. Возле расшаривании будет ссылка на страницу скачивания в соответствующем магазине, прозвание, цена, рейтинг и т д.

Для сайта, как правило, интересны токмо первые два вида. Они отличаются свойством: twitter:card, в котором указывается штучка страницы, и картинками с соответствующими измерениями.

При этом вокабула (twitter:title) не может быть более 70 символов, а бытописание ограничено количеством 200 символов.

Как проверить себя?

Одна с самых важных вещей в микроразметке — самоконтроль. После проведения микроразметки без стоит проверить себя. Каждая лишняя запятая иль неучтенная кавычка может поломать все ваши активность. Для того, чтобы проверить себя и свою микроразметку, дозволено использовать следующие инструменты:

1. Structured Data Testing Tool. Годный и user-friendly сервис от Google. Для проверки позволено вводить как url страницы, так и только микроразмеченный модель кода. Позволяет отследить на лету ошибки в своей микроразметке.
2. Валидатор микроразметки Яндекса. Чистый инструмент, только от Яндекса, также позволяет отэ как отдельную страницу в интернете, так и просто (наглядный) кода.
3. Валидатор разметки Open Graph от Facebook. Помогает постигнуть, как будет выглядеть ваша страница при перепосте.

Апагога

Итак, микроразметка сайта — важный инструмент, позволяющий поднять ваши позиции в поиске и вид вашей страницы в сниппетах и социальных сетях. Каким способом как можно лучше пользоваться, классическими микроданными или молодым и набирающем слава JSON-LD — решать вам. Разницы во внешнем виде приставки не- будет, только в ваших усилиях, месте вывода и материале с целью изучения.

Для начала разметьте данные о вашей организации, контакты, хлебные крошки, вещи (если они есть) и сделайте микроразметку для социальных сетей. И далеко не забывайте проверить себя или специалиста, проводившего пользу кого вас микроразметку.

Источник: www.seonews.ru