Семантической разметки и оптимизации для поисковиков. Семантическая разметка

17.02.2019

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

Именно поэтому возникла семантическая разметка данных, помогающая структурировать информацию для поисковых роботов. Изначально форматов семантической разметки было несколько, причем все они конкурировали друг с другом. Страдали от такого положения дел прежде всего веб-мастера, которым приходилось выбирать между конкурирующими форматами. Однако с 2011 года все изменилось, после того, как крупнейшие поисковики (Google, поисковик Bing от Microsoft и Yahoo!) выбрали единый стандарт Schema.org.

Практическая польза от Schema.org и особенности работы

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

Одним словом, разметка Schema.org несомненно повысит релевантность сайта, как и адекватное описание веб-ресурса в поисковой выдаче. Размечать вы можете практически все, однако при этом важно помнить, что поисковики используют не всю разметку. Впрочем, то, что не учитывалось ранее, может начать учитываться в будущем, так что мелочей здесь быть не может. Подавляющее большинство веб-мастеров в первую очередь размечают отзывы, разнообразные рейтинги, товары, людей, компании, видео, проводимые мероприятия, рецепты и т.д. Конечно, в каждом конкретном случае система разметки своя, так что любой сайт требует индивидуального подхода.

Также следует обращать внимание на иерархию типов, чтобы донести до пользователя самую важную информацию о сайте. Посмотреть их вы можете на официальном сайте в разделе http://schema.org/docs/schemas.html (требуется знание английского языка). Выбор методики разметки зависит в первую очередь от тематики сайта и, конечно же, пожеланий самого вебмастера. К примеру, если у вас информационный ресурс со множеством самых разных тем, можно выбрать разметку Article. Статьи, размещенные на личном блоге, размечают при помощи BlogPosting, а материалы технической направленности – TechArticle, и т.д. Внутри любой из этих схем может быть любое количество других схем, вам лишь нужно соблюдать правильную иерархию.

Если вы уже создали HTML-макет своего сайта, не добавляя при этом семантическую разметку, то его придется переделывать, ведь только так получится правильно и качественно внедрить ее. Нельзя сказать, что это огромный объем работы, но постараться все равно придется. В результате код может существенно увеличится, однако вашему сайту в конечном итоге это пойдет только на пользу. Например, после успешного внедрения семантической разметки любой поисковик сможет предельно точно понять содержание вашего сайта, отличить статьи от комментариев пользователей, выявить в тексте ключевые слова и фразы, выделить важную информацию и второстепенную, т.д. Это действительно очень полезно для продвижения ресурса.

Для тех, кто хочет при помощи Schema.org повысить конверсию и популярность сайта, также существуют свои рекомендации. Например, если на странице есть множество interactionCount (разнообразные репосты, лайки, твиты и многое другое), а также комментариев, поисковый робот автоматически обозначает такой сайт как более приоритетный и значимый по сравнению с другими (у того же Яндекса существует что-то вроде «шкалы счастья»). Конечно, это серьезно сказывается на посещаемости ресурса, так что пренебрегать такой возможностью не стоит. Например, вы можете разметить каждый комментарий схемой (обозначение UserComments) внутри единой схемы уже размещенной на ресурсе статьи (TechArticle). Метод очень распространенный и, что немаловажно, действительно работающий. Если комментариев и других признаков пользовательской активности на веб-ресурсе много, поисковик будет отображать его как полезный и важный.

Работать с Schema.org смогут и те вебмастера, которые привыкли пользоваться системами микроформатов, микроданных и RDF. Абсолютно все, что можно было сделать с этими форматами, можно сделать и в Schema.org.

Принципы разметки и конструкции кода

Чтобы ввести семантическую разметку на ту или иную страницу сайта, вам для начала потребуется поместить описание в отдельный контейнер, где указывается выбранная схема разметки (например, … ). Это – первый шаг. Второй заключается в разметке отдельных свойств схемы (например, Автор текста: Иванов Иван Иванович) , которые помогают поисковику понять содержание информации и правильно отобразить ее в сниппете сайта. Узнать о системе разметки подробнее можно на официальном сайте Schema.org. Если вы хотите сразу же приступить к изучению разметки, то всю информацию можно узнать тут: http://schema.org/docs/full.html.

Инструменты для работы

У популярных поисковиков есть свои инструменты для работы с семантической разметкой. Например, тот же Яндекс предлагает собственный валидатор разметки (находится в сервисе Вебмастер). Кроме того, существуют и специальные плагины, предназначенные для использования с системами управления веб-ресурсом. Они призваны облегчить рутинные действия вебмастера и автоматизировать многие процессы, так что не лишним будет с ними ознакомиться. Отдельного внимания заслуживает такой сервис, как http://schema-creator.org/, который помогает намного быстрее внедрить разметку в код сайта.

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

Подписаться на рассылку

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

Когда покупатели ищут что-либо в Google, Yandex или Bing, они наверняка получают длинный список из рекламных объявлений и результатов по органическому поиску. Если ваша страница хорошо проранжирована для поиска конкретного товара, ссылка на нее появятся в результатах. Но это всего часть задачи, ведь на ссылку еще кто-то должен кликнуть.

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

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

На картинке ниже вы можете видеть результат по поиску в Google за 20 июня 2016 года. Это так называемый сниппет - краткое описание страницы сайта в результатах поискового запроса. Как видите, плойку PHILIPS ProCare на Rozetka.com.ua оценили четыре покупателя, поставив по пять звезд. Цена товара - 999 гривен, и он есть в наличии.

Этот результат поиска в Google выдает структурированные данные.

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

Семантическая разметка и словарь в формате микроданных

Итак, существует некий стандарт семантической разметки данных в сети Schema.org , созданный совместно Google, Bing и Yahoo в 2011 году. Это согласованная схема семантической разметки, которая позволяет поисковым системам понимать, что делать с информацией на вашем сайте.

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

Чтобы поисковик распознал ваши дополнительные данные о товаре, размечайте соответствующие страницы по схемам Product , Offer и AggregateRating .

Применение словаря Schema.org с микроданными для страницы товара в интернет-магазине начинается с внешнего элемента, обрамляющего информацию о продукте. В этом примере мы используем div.



Используя атрибут itemscope, добавляем дополнительную информацию о продукте.


Некий классный продукт


Это просто отличный продукт. Вы будете очень довольны.
123456789


Семантическая разметка и JSON-LD

С недавних пор Google стал отдавать больше предпочтения JSON for Linking Data или JSON-LD, а не микроданным. В формате JSON-LD и правда есть несколько преимуществ. Например, для его использования не нужно включать HTML-код в тело страницы. Достаточно вставить скрипт в. Сначала мы устанавливаем тип:



Ключевым понятием этого способа разметки является контекст (@context). С его помощью вы, например, можете указать, что в разметке используется семантика schema.org:
{
«@context»: «http://schema.org/»,
«@type»: «Product»,
«name»: «Некий классный продукт»,
«image»: «некий-классный-продукт.png»,
«description»: » Это просто отличный продукт. Вы будете очень довольны.»,
«sku»: “123456789″,
«aggregateRating»: {
«@type»: «AggregateRating»,
«ratingValue»: «4»,
«reviewCount»: «1,987»
},
«offers»: {
«@type»: «Offer»,
«priceCurrency»: «UAH»,
«price»: «999»,
«availability»: «http://schema.org/В наличии»
}
}
Семантическая разметка - будь она выполнена с помощью микроданных или JSON-LD - позволит вам лучше представить свои товары в результатах поисковой выдачи, значительно увеличив тем самым их кликабельность и, соответственно, свои продажи.

Одним из таких действенных методов является микроразметка или, как ее еще называют, семантическая разметка.

Что такое семантическая разметка и зачем она нужна? Семантическая разметка представляет собой особые параметры тегов, которые добавляют в код текста или файла.

С помощью этой разметки передается информация поисковым роботам о содержимом страницы.

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

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

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

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

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

Многие путают сниппеты и description, но это несколько разные вещи. Да, дескрипшн также кратко описывает содержимое страницы, чтобы пользователю и поисковому роботу было понятно, о чем данный ресурс.

Если дескрипшн не будет прописан в контейнере , то поисковая система выберет случайный кусок из текста для выдачи в поисковой строке. Как правило, этот отрывок мало информативен, поэтому не может в полной мере описать содержимое страницы.

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

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

Если сниппет не сформировать, то выберет дескрипшн в качестве описания к ресурсу. В Яндексе description и вовсе может быть проигнорирован, поэтому правильное составление сниппета очень важно.

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

Какие способы создания микроразметки используют?

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

На сегодняшний день отмечают два способа создания семантической разметки:

  • Использование специальных атрибутов в HTML-коде. Речь идет об атрибутах itemscope, itemtype и itemprop.
  • Есть и более упрощенный вариант, не требующий особых знаний. Здесь имеется в виду специальный инструмент «Маркер» от Google. Это специальное приложение, в котором можно выделять курсором определенные данные, указывая их тип.
  • Первый способ отличается тем, что все приходится прописывать вручную. Возьмем для примера контакты какой-нибудь компании, которые мы выделим семантической разметкой:


    Яндекс

    Контакты:

    Жукова, 4

    23678

    Иркутск,

    Телефон:+3 952 456 XXX XX,

    Факс:+3 952 643 XXX XX,

    Электронная почта: [email protected]

    Что касается второго метода, то с помощью вышеуказанного инструмента можно сообщать о таких материалах на сайте, как «Мероприятия», «Приложения», «Телесериалы», «Книги», «Фильмы», «Рестораны», «Товары», «Местные организации» и т.д.

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

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

    В частности, у каждого из них есть собственный метод проверки правильно семантической разметки на сайте. Для Яндекса это Валидатор микроразметки, а для Google — Google Structured Data Testing Tool. Рассмотрим оба способа проверки микроразметки.

    Проверка в Яндексе

    Первым делом необходимо зайти в само приложение Валидатор. В соответствующую строку вводим любую интересующую вас ссылку на статью. Далее жмем кнопку «Проверить».

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

    Проверка в Гугле

    В принципе, особых различий в проверке здесь нет, ведь они обе автоматизированы. Также нужно войти в приложение — https://search.google.com/structured-data/testing-tool , после чего в строку нужно вставить нашу ссылку. Далее жмем «Запустить тест». После проверки справа будет указано количество ошибок, если они все-таки присутствуют в разметке.

    Заключение

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

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

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

    Поисковики достаточно умны, чтобы понимать, на каком языке задан запрос; они умеют учитывать морфологию языка и подбирать словам из запроса синонимы. Однако в полной мере осознать, о чём именно идет речь на найденной веб-странице, машины не в состоянии.

    Представьте, к примеру, сайт поликлиники с возможностью записи на приём к врачу через интернет. Среди всех страниц сайта поисковый робот без труда найдёт нужную - ту, где выполняется запись, - но дальше возникнут трудности. Человек легко догадается, что «Иванов», «Петров» и «Сидоров» - это фамилии врачей, «окулист», «невролог» и «терапевт» - их специализации, а «9:00», «9:30» и «10:00» - возможное время начала приёма. Компьютер же самостоятельно такие выводы сделать не может.

    А если бы машина могла «читать» страницы так же, как это делает человек, она бы могла помочь в решении гораздо более сложных задач. Скажем, не просто «Записаться к врачу в поликлинику №2», а «Записаться к окулисту, о котором хорошо отзываются, в поликлинику не дальше чем в пяти километрах от моей работы, на 12-13 сентября, на утро, но не позже 11:00».

    Впрочем, объяснить компьютеру, о чем идёт речь на веб-странице, вполне возможно. Для этого нужно дать ему подсказку.Такой подсказкой служит семантическая разметка или микроразметка. По сути, микроразметка - это отдельный язык с собственными словарём и синтаксисом, задача которого - помочь машинам (в частности, поисковым роботам) понять концепции, используемые людьми.

    Микроразметка добавляется в HTML-код веб-страницы. В глазах человека размеченная и неразмеченная страницы выглядят абсолютно одинаково, но для поисковой системы разница очень велика.

    Чтобы понять, как работает микроразметка, рассмотрим простую фразу: «У Петра есть сын Иван». Несмотря на простоту человек может сделать из неё множество выводов: Пётр - отец (а также родитель) Ивана, отчество Ивана - Петрович, Пётр и Иван - мужчины и родственники, Пётр старше Ивана. Все эти факты очевидны, поскольку нам их подсказывает жизненный опыт. У машины такого опыта нет, поэтому она может воспринимать фразу только в её текущей формулировке

    Это - та же самая фраза, но с микроразметкой. Теперь компьютер понимает, что Иван и Пётр - это имена людей, между которыми существует родственная связь (Иван - ребёнок, Пётр - родитель), и ему не составит труда отвечать на вопросы вида «Кто родитель Ивана?». Кроме того, если добавить в разметку уникальные идентификаторы (например, ссылки на страницы в соцсетях), машина сможет отличать конкретных Ивана и Петра от их тёзок.

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

    Единого стандарта микроразметки пока нет. Существуют разные синтаксисы и разные словари. Например, социальные сети собирают данные о сайтах с помощью словаря Open Graph, разработанного в Facebook, а поисковики, включая Яндекс, чаще ориентируются на словарь Schema.org. Подробнее о том, как устроены словари и синтаксисы, можно прочитать в техноблоге Яндекса на «Хабрахабре».

    В том или ином виде микроразметку используют около 30% веб-страниц, известных Яндексу. Отсутствие микроразметки не влияет ни на способность страницы попадать в результаты поиска, ни на её позицию в результатах поисковой выдачи. Однако в ряде случаев разметка способна значительно упростить жизнь - как сайтам, так и пользователям.

    Сделать наглядный сниппет

    Одно из главных достоинств микроразметки состоит в том, что она даёт поисковику возможность строить красивые «сниппеты» - короткие описания сайтов. Например, вы играете на гитаре и ищете в Яндексе [аккорды группа крови]. Если вебмастер сайта, публикующего аккорды, добавил к себе на ресурс семантическую разметку, то вы сможете просмотреть текст песни с аккордами прямо на странице с результатами поиска.

    В последнее время в мире seo применение микроразметки (семантической разметки) для различных целей становится всё более и более популярным. Хотя микроразметка начала использоваться ещё несколько лет назад, сейчас мы наблюдаем её активное развитие как в Яндексе, так и в Google. Тому подтверждение последние публикации в блоге Яндекс для веб-мастеров: «Микроразметка для крупных сайтов» и «Товарные сниппеты для интернет-магазина» .

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

    Цель семантической разметки Основная цель микроразметки - предоставить структурированные данные поисковой системе о товаре/услуги или любом другом материале, размещенном на странице. С использованием семантической разметки стало возможно выделять важную информацию на странице, разграничивать и структурировать контент по типу. Это легко понимают поисковые системы, они предоставляют пользователю именно ту информацию о странице, которую вы хотите донести .

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

    (Данные за 2014 год)

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

    1. Open Graf
    2. Data Vocabulary
    3. Schema.org
    4. UTF символы

    1. Open Graf Open Graf используется для создание информативной ссылки для передачи в социальных сетях. То есть возможно самостоятельно вписать нужный текст и картинку, чтобы пользователи, кликая на лайк, распространяли ваш контент в максимально презентабельном варианте.

    Изначально Open Graf создавался именно для Facebook, но сейчас данную микроразметку поддерживают многие социальные сети.

    По использованию Schema org.

    4. UTF символы UTF символы (★ ☒) не являются микроразметкой как таковыми, но в целом с точки зрения seo имеют одинаковую цель, что и семантическая разметка - повысить CTR ссылки на поиске. Поэтому стоит рассмотреть это в данной пубикации.

    Логика простая: используем короткие description (желательно не более 160 символов) и добавляем в них любые UTF символы, которые улучшат привлекательность ссылки. На сегодняшний день существуют более 100 различных символов.

    По моим исследованиям, Google в 85% случаев обрабатывает данные символы. Яндекс же делает это очень редко, но если удается получить такой привлекательный сниппет, то CTR начинает сильно расти, особенно для 1 страницы выдачи. Это огромный бонус на фоне конкурентов.

    Например, для запроса - “светодиодные люстры” все сайты из ТОП-3 в Google используют UTF символы:

    Семантическая разметка - перспективное направление. В этой публикации было рассмотрено её использование для коммерческого seo, а именно - для поднятия CTR ссылки в органическом поиске . Здесь нет углублений в подробности кода, а приведены уже готовые примеры, в том виде, в котором их видит пользователь, и которые действительно работают на практике.

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