Мы ежедневно посещаем множество сайтов, в которые заходим с помощью поисковых систем (ПС): Яндекс, Гугл, Рамблер и другие. Но каким образом они функционируют и практически всегда выдают на наши запросы интересующую нас информацию? Чтобы понять этот сложный алгоритм нужно узнать о таком понятии, как микроразметка. С ее помощью ПС мгновенно «сканируют» большой объем сведений, отыскивая только основные данные.
Что такое микроразметка?
В 2011 году компании Yahoo, Google и Bing стали использовать новый стандарт СЕО. Спустя пару месяцев и Яндекс тоже присоединился к своим конкурентам. Под определением скрыт структурный модуль, позволяющий поисковикам раскладывать все «по полкам». Так они различают, какой блок данных на странице содержит контакты фирмы, условия доставки, наличие товара и т.д. При внимательном рассмотрении сниппетов можно увидеть разницу, где микроразметку добавили, а где нет.
С разметкой OpenGraph
Без применения разметки OpenGraph
Шаблон микроразметки
Благодаря стандарту семантической разметки Schema.org, вебмастера применяют разные шаблоны для структурирования сайта. Его распознают все известные поисковые роботы – Яндекс, Google, Bing, Yahoo!.
Типы семантической разметки
При создании сайтов выбирают наиболее используемые схемы, для примера:
- «О компании»;
- «Контакты и адреса»;
- «Хлебные крошки» (breadcrumbs или цепочка навигации);
- «Стоимость и товары»
- «Отзывы клиентов».
Отдельно от этих пунктов следуют метаданные соцсетей OpenGraph, куда входят: Facebook, Google+, ВКонтакте. Что касается Twitter, то для него разработали особый генератор микроразметки schema org под названием Twitter Cards. Их внедряют преимущественно в новостных блоках, статьях и страницах о товаре. Это сделано не случайно, поскольку такому контенту чаще всего делают «репост».
Методы микроразметки
Метаданные на страницах сайтов размечают разными способами. Рассмотрим конкретный пример визитной карточки компании.
Переходим на schema.org и спускаемся вниз, до окончания таблиц. После маркированного списка следует подраздел с 9-тью примерами («Examples»). Каждый образец показан в 3х вариантах: «Microdata», «RDFa», «JSON-LD». В первом окне «Without Markup» описание, что именно рассматривается в примере. Подробнее об остальных вкладках.
Microdata (микроданные)
Способ разработан для того, чтобы выполнять операцию преобразования сразу в коде, изменяя контрольные значения в исходные теги. Быстрый и простой метод без лишних сложностей преобразовать текстовые данные в определенные мета-теги, понятные для системы. Различают три основных типа компонентов для микроданных:
- itemtype. Обозначение типа веб-объекта с помощью специальной ссылки, которая имеется для него на schema.org.
- itemscope. Системе отправляется информация о том, что далее идет передача сведений об веб-объекте сео микроразметки.
- itemprop. Позволяет определить нужное свойство контрольного веб-объекта.
RDFa (Resource Description Framework)
Обозначение среды описания ресурсов, идентичных предыдущему виду: Microdata. Включает такие атрибуты:
- property – полностью аналогичен команде itemprop;
- typeof – схожие функции с itemtype из микроданных, представлен не как ссылка, а обозначен по названию типа.
RDFa – сложный и многофункциональный веб-инструмент. Если создаваемый сайт не требует дополнительного структурирования, лучше использовать упрощенный вариант микроданных.
JSON-LD
Разметка по JSON-LD в готовом виде представлена, как оформленный скрипт веб-объекта JSON. Удобный способ, поскольку отпадает надобность в размещении мета-тегов непосредственно в самом коде сайта. Целесообразно применять скрипт JSON-LD, если не требуется использовать специальные метаданные. После написания кода потребуется просто выполнить проверку, используя валидатор микроразметки. Главный информационный блок выносится отдельно и понятен для поисковых роботов.
JSON-LD рекомендует Гугл, поскольку формат лучше подходит, для:
- показа контактов и адресов фирм;
- разметки времени и дат, к примеру, театральных премьер, киноафиш;
- страниц, которые анонсируют научные конференции, семинары и т.д.
Придерживаясь такой структуры, данные об учредителе мероприятия, свободных местах или билетах обязательно попадут в меню «Knowledge Graph».
Создание логотипов и социальных сетей в микроразметке
Разметка фирменного знака
Ниже показан простой способ размещения лого непосредственно в коде, где синим маркером отмечены основные команды.
Очередность действий
Сначала подбирается нужный логотип. Ему присваивается атрибут itemscope, так ПС поймет, что микроразметка seo принадлежит объекту. Команда itemtype показывает принадлежность к библиотеке schema.org. Остается поработать над ссылкой главной страницы и вставить скрин фирменного знака, с помощью itemprop=”logo” и itemprop=”url”.
Следуя рекомендации Google, лучший вариант, при котором одновременно учитываются и соцсети, и логотип – JSON-LD:
Выполнение разметки для социальных сетей
Удобный вариант составить понятный для поисковиков машинный код – это JavaScript Object Notation. Метод для связанных данных JSON-LD – оптимальная микроразметка schema org по ряду причин. Ниже указаны основные характеристики, среди них:
- относительно небольшой размер кода;
- структура кода неизменна (переход на другие страницы не повлияет на отображение ссылки и логотипа – они будут такими же);
- простая понятная схема кода (не нужно долго искать контейнер веб-объекта, а сразу поместить его в ячейку head).
Подсвеченные в примере строчки требуют изменения – это имя компании, адрес сайта, фирменного знака (logo.png), перечень ссылок в соцсети, а в конце указан телефонный номер.
Выполнение разметки телефонного номера
Для этого существует отдельный массив – contactPoint. Строка contactType отмечает что, этот телефон относится к определенному виду контактов. Подробная справка находится тут, основные позиции:
- Техподдержка (technical support).
- Продажа (sales).
- Отдел по работе с клиентами (customer service).
Создание микроразметки адресов и контактных номеров
Страница контактов в формате JSON-LD представлена:
Сравнивая с примером выше, становится очевидной разница в методике разметки – вместо строки Organization стала @type LocalBusiness. В этом случае неизменные атрибуты – image, name, а рекомендуемые системой – address, priceRange, telephone.
Справочные материалы по описанию здесь.
Внесение в базу нескольких телефонных номеров
По умолчанию тип LocalBusiness позволяет вносить только один номер, но используя схему Organization их количество можно увеличить. Такая же операция выполняется при создании нескольких адресов. Проставляя после запятых фигурную скобку (сразу после address), вся строка обрамляется квадратными скобками.
Следует быть внимательным при внесении запятых, чтобы в машинном коде не было лишних. В наглядном образце показан фрагмент, как сделать микроразметку в формате микроданных, чтобы она выглядела следующим образом:
Подсвеченные маркером данные в строках, есть не что иное, как элементы разметки. Методика ее составления следующая: исходному контейнеру присваивается тип веб-объекта (речь идет об Organization). Вставленные элементы разделяются на имя компании, адрес (отдельный объект с дополнительными атрибутами – страна, город, улица/квартал), телефон, email. В микроразметке сайта можно добавлять данные, которые будут скрыты от определенной категории пользователей. Достаточно применить тег meta:
Написание микроразметки для хлебных крошек
Сразу нужно определиться, что будет относиться к основному контейнеру, а что к вложенным элементам (в общем цикле программы они дублируются).
Атрибуту itemscope отводится роль главного контейнера, он будет объектом разметки. С помощью ссылки на schema.org – атрибут itemtype обозначает тип контейнера. Микроразметка составного компонента «крошка» выполняется с использованием команды itemprop=»itemListElement». Она дает понять системе, что данная строка, это самостоятельный элемент в списке.
Следующий объект добавляется командой itemscope, далее вставляется itemtype.
Разметка анкора на раздел «крошки» проводится атрибутом itemprop=”url”, имя раздела – itemprop=»name». При наличии картинки или фото применяется itemprop=»image». Присвоение очередности номеров проставляется с использованием команды position, начиная с 1.
Если при микроразметке использовать скрипт в формате JSON-LD, готовый результат имеет вид:
Символ @id является особенным url для контрольной страницы, далее: image, name, position – имя раздела, фото или картинка и номер раздела. Счет ведется аналогично, начиная с 1.
Создание микроразметки для товара
Из всех рассматриваемых пунктов является самым объемным по количеству информации. Чтобы лучше разобраться в теме и понять, как делается микроразметка сайта, следует внимательно просмотреть пример ниже. Еще нужно отметить такой момент – поддержка ведется любых разновидностей товара, исключая одну категорию – ограничение на специфические изделия для взрослых.
Определение itemprop для «name», «image» — имя товара, фото. В случае, когда картинка не одна, тогда атрибут добавляется для каждой. Далее в примере: brand, description, sku/mpn – торговая марка, ее описание, идентификатор/код товара.
Еще задействовано 2 внутренних объекта для товара с характеристиками – aggregateRating и Offer. Первое обозначение позволяет выполнить разметку отзывов, второе содержит параметры коммерческого предложения. Сюда относятся:
- валюта;
- стоимость;
- состояние;
Наличие конкретной позиции товара на складе. Применим один из 2х вариантов внесения информации:
- link itemprop=»availabilit» href=http://schema.org/InStock – предлагаемая продукция есть на складе;
- link itemprop=»availability» href=http://schema.org/OutOfStock – товар отсутствует.
Образец заполнения машинного кода в скрипте формата JSON-LD:
Написание микроразметки для протокола OpenGraph
Чтобы поделиться ссылкой на свой сайт и привлечь новых посетителей из соцсетей, используют специальную разметку OpenGraph. Разработку придумали программисты из Facebook. Пользователь управляет макетом ссылки и может на любом этапе задействовать инструмент проверки микроразметки google. Размещение контрольных значений идет в самой верхней части страницы, где находится контейнер <head>.
Кроме Фейсбук, этот скрипт поддерживается сервисами: ВКонтакте, Twitter, Google+, Pinterest, LinkedIn. В Яндексе его применяют, чтобы сделать заголовок сниппета или при передаче данных на сервисную платформу ЯндексВидео.
Главные рабочие коды (мета-теги), это:
- og:site_name – имя создаваемого веб-сайта;
- og:url – указание адреса страницы, куда перенаправит ссылка;
- og:description – короткий блок основных тезисов для описания раздела (2-3 коротких предложения);
- og:locale – мета-тег для локализации. Всегда по умолчанию стоит en_EN, для сайтов России требуется изменить на ru_RU.
- og:type – определенный тип для страницы. Для статьи выбирается нейтральный вид article, для товара – product.
- og:title – название или заголовок. Метатег содержит схожий тег с title.
Еще один компонент – og:image. Содержит сопроводительное изображение для текстового описания страницы, показываемой при пересылке. Если вставить несколько изображений, то программа по умолчанию подставит первую. Пользователи, при автоматическом перепосте, самостоятельно выбирают основную картинку.
На официальной странице OpenGraph собрана подробная информация.
Способ микроразметки в Twitter
В Твиттере поддерживается программное взаимодействие с OpenGraph, но разработчики предусмотрели ряд изменений. В первую очередь различие в сниппете – разметка смотрится недоработанной. Разделяют 4 типа основных страниц, поддерживаемых в Twitter:
- Summary Card with Large Image. По размеру обрабатываемых изображений, минимальные параметры 300х157 пкс. GIF определяет по первой картинке, как стоп-кадр (без анимации). Без поддержки формата SVG. Распознает PNG, GIF, JPG, WEBP.
- Summary Card. Начальный тип добавления ссылки плюс описание. Можно вставить фото размером 144х144 пкс. Без поддержки SVG.
- App Card. Разметка подходит для разных программ и приложений. Удобная проверка микроразметки гугл на любом этапе работы с данными. При перепосте пользователи увидят анкор на страницу выбранной компании, наименование продукции, ее стоимость и прочее.
- Player Card. Используется специально для сайтов, где преимущественно собран видео контент. Взаимодействует исключительно с защищенным протоколом https.
При создании сайта используются только Summary Card with Large Image и Summary Card. В отличие от App Card и Player Card в них задействован пункт – twitter:card. В нем можно указать вид страниц и выбрать нужный размер сопроводительной картинки.
Как выполнить проверку?
В процессе написания кода следует быть очень внимательным. Любая незамеченная лишняя кавычка или запятая сведет на нет все приложенные усилия. Чтобы проверка микроразметки google не получилась с ошибками, были придуманы вспомогательные сервисы (по-простому «отладчики репостов»). Самые распространенные среди них, это:
- Проверка структуры данных от OpenGraph. Программа от Facebook, показывающая готовый результат страницы после нажатия на «share».
- Валидатор СЕО разметки от Яндекс. Проверяет метаданные, включая и сервисные программы Яндекса, содержащиеся на странице. Поддержка микроформатов: Open Graph, Schema.org, RDFa и микроданные HTML.
- Structured Data Testing Tool. Удобный инструмент от компании Google. Проводится анализ данных с последующим выводом на экран контрольного результата.
В SDTT при проверке система распознает ввод микроразмеченного примера кода и url страницы.
Заключение
Улучшить показ текстовой и графической информации в превью, увеличить число новых посетителей сайта поможет специальная кодировка. Рекомендуется лишний раз потратить немного времени и проверять микроразметку гугл. Это быстрый и надежный вариант, который предложен для веб-программистов. Какой метод использовать: классику Microdata или более «продвинутый» JSON-LD – все зависит от собственных возможностей. В готовом виде особых различий между ними не наблюдается.
Начинать лучше с разметки информации о компании, контактах, предлагаемых товарах, если сайт занимается торговлей. Обязательно нужно позаботиться о размещении мета-тегов для соцсетей. После завершения всех технических этапов, остается только проверить готовый результат на ошибки.