Хочешь зарабатывать больше? Пройди курс Комплексный интернет-маркетинг от команды tripmydream и освой профессию за 3 месяца!
Микроразметка — это специальная семантическая разметка для структурирования некоторых типов данных контента, которая нужна для того, чтобы помочь боту поисковых систем точнее разобраться, какие из данных представлены странице сайта. На основании этих данных могут формироваться (а могут и не формироваться, но об этом дальше) расширенные сниппеты в поисковой выдаче.
Микроразметку понимают все поисковые системы.
В 2005 году начал набирать популярности способ семантической разметки Микроформаты (microformats).
А 2011 году крупнейшие поисковые системы Google, Yahoo! и Microsoft инициировали разработку единой схемы для семантической разметки в HTML5 — Schema.org. Чуть позже присоединился и Яндекс.
Сейчас поисковые системы уже сами могут определить некоторые типы данных на странице, даже если на сайте и не была внедрена микроразметка. К тому же, как и большинство подобных «фич», наличие микроразметки на сайте еще не гарантия того, что поисковые системы ее будут использовать для формирования вашего сниппета. Вы лишь помогаете поисковикам разобраться быстрее и лучше, а они уже сами решают, что и в каком виде показывать в выдаче.
Микроразметка состоит из словаря и синтаксиса. В словаре описаны классы и свойства данных. А в синтаксисе – набор правил, которые с помощью тегов и атрибутов помогают реализовать этот словарь.
Со времен зарождения идеи семантической разметки данных использовались разные словари и синтаксисы. В статье мы рассмотрим только самые популярные из них.
На практике вам чаще всего доведеться сталкиваться со словарями Schema.org, который влияет на поисковую выдачу и Open Graph, который влияет на вид репоста в социальной сети Facebook.
Данную микроразметку понимают все поисковые системы. Еще 2011 году Google, Yahoo! и Microsoft, а чуть позже и Яндекс, инициировали разработку Schema.org — единой схемы для семантической разметки в HTML5.
Еще один плюс, словарь постоянно дополняется. Так например в 2019 году появились новые типы микроразметки: FAQ (часто задаваемые вопросы), Q&A (вопрос-ответ, как на форумах, например), HowTo (для инструкций).
Полная документация находиться на сайте schema.org. Но неокрепший ум новичка может там просто затеряться и потерять всякий энтузиазм.
Поэтому в первую очередь рекомендуем посмотреть:
А этот словарь стал актуальным в эпоху шеринга страниц сайтов в Facebook, но так же поддерживается и в Telegram, Viber, Slack, ВКонтакте, LinkedIn, Skype и многих других. Решает проблемы с отображением ссылки, картинки, названия и описания страницы сайта для того чтобы, пост выглядел более привлекательно.
Стандартный набор тегов:
Пример:
<meta property="og:title" content="Как составить контент-план для социальных сетей"/> <span id="selection-marker-1" class="redactor-selection-marker"></span> <meta property="og:description" content="Контент-план для социальных сетей: что это такое, как составлять, примеры ведения и темы для постов Instagram, Facebook и Telegram."> <meta property="og:type" content="article"> <meta itemprop="image" content="https://cdn.tripmydream.com/travelhub/blog/blog/46/18/block_4618.jpg"> <meta property="article:publisher" content="https://www.facebook.com/TRIPMYDREAMcom"> <meta property="og:site_name" content="tripmydream">
Больше можно посмотреть на официальном сайте ogp.me, есть даже версия на русском языке ruogp.me.
Для проверки работоспособности микроразметки можно использовать Facebook Object Debugger.
А вот особенность микроформатов заключается в том, что тут объединен и словарь и синтаксис. При использовании микроформатов к уже существующей html разметке добавляются параметры тегов.
Но ее же минус в том, что этот синтаксис не универсальный. Яндекс понимает только несколько микроформатов, а гугл чуть больше. Так что по нашему индивидуальному мнению, проще использовать Schema.org.
Официальный сайт: microformats.org.
Одни из самых известных микроформатов:
Для того, чтобы внедрить микроразметку на сайт понадобиться выбрать синтаксис, с помощью которого и нужно будет реализовывать словарь.
Самый свежий формат, появился в 2010 году и уже с 2013-2014 года именно его и рекомендуют использовать Schema.org и Google. Так что скорее всего именно с ним вам и придется иметь дело.
Основное отличие JSON-LD от остальных, это то, что он внедряется не в HTML-код страницы (это мы рассмотрим чуть ниже), а в тег <script>. Данный синтаксис представляет из себя набор пар “ключ”: “значение”, которые даже человеку можно легко понять, не то что поисковому боту.
Например разметка FAQ Page:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "Текст вопроса 1",
"acceptedAnswer": {
"@type": "Answer",
"text": "Текст ответа 1"
}
},{
"@type": "Question",
"name": "Текст вопроса 2",
"acceptedAnswer": {<span id="selection-marker-1" class="redactor-selection-marker"></span>
"@type": "Answer",
"text": "Текст ответа 2"
}
}]
}
</script> В данном случае видно, что, например, "@context", "@type", "name", "text" — это ключи, а после двоеточия уже идут значения — "https://schema.org", "FAQPage", "Текст вопроса 1" и "Текст ответа 1".
Синтаксис начал использоваться в HTML-5. Благодаря ему поисковики начали лучше понимать контент и стали появляться те самые приятные глазу расширенные данные в поисковой выдаче. В соответствии с этим синтаксисом разметка происходит в HTML-коде страницы. Причем внедряется она в видимую часть страницы.
Используется несколько основоположных атрибутов: itemscope, itemtype и itemprop, через которые указываются и описываются сущности в HTML-коде.
Например, микроразметка «breadcrumbs»:
<html>
<head>
<title>Award Winners</title>
</head>
<body>
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://tripmydream.academy/blog">
<span itemprop="name">Главная</span></a>
<meta itemprop="position" content="1" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemscope itemtype="https://schema.org/WebPage"
itemprop="item" itemid="https://tripmydream.academy/blog"
href="https://tripmydream.academy/blog">
<span itemprop="name">Академия.Блог</span></a>
<meta itemprop="position" content="2" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<span itemprop="name">SEO</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</body>
</html> Разметка также происходит в HTML-коде. Реализация сложнее, чем в предыдущих вариантах. Синтаксис RDFa чаще всего используют со словарем Open Graph для формирования красивого сниппета в социальных сетях. Пример такого кода мы уже давали в описании к Open Graph.
Вот именно в этом разделе статьи будет та, информация, которую лучше запомнить!
Самые главные типы микроразметки для расширенных результатов поиска:
Подробное описание со скринами и примерами кода в разном синтаксисе можно посмотреть в Центре Google Поиска и Яндекс.Вебмастере.
Есть гораздо больше данных, которые можно разметить, но далеко не все из них могут быть использованы в расширенных результатах поисковой выдачи. Чтобы узнать больше, изучите schema.org, там очень много всего интересного.
В микроразметке хорошо то, что нет необходимости заучивать словари и синтаксис как какой-то отдельный язык программирования. Главное запомнить какие основные виды данных вообще можно размечать, мониторить, а не стали ли поддерживаться поисковиками какие-то новые виды. А уже при практической работе с сайтом прикидывать, какие из них могут принести вам пользу.
А уже что и как писать, можно подсмотреть в многочисленных примерах в кабинетах вебмастеров Гугл и Яндекс, на просторах интернета и даже в онлайн-генераторах микроразметки вроде Schema Markup Generator (JSON-LD) или визуальном генераторе Мастер разметки структурированных данных. Вы можете сделать это сами или поручить программисту через элементарное ТЗ со всеми полезными для него ссылками на инструкции, примерами того, что вы хотите и инструментом для проверки итоговой микроразметки. Так вы сэкономите время и себе и ему.
В старой версии вебмастера Google есть замечательный инструмент — Маркер, который поможет настроить микроразметку для поисковой выдачи Гугл без обращения к программисту и даже без внедрения разметки в код вашего сайта. Один существенный минус – тут доступно всего 9 типов микроразметки:
Тут в визуальном режиме с очень понятным интерфейсом можно разместить данные на страницах вашего сайта. Причем можно обработать за один подход не только одну страницу сайта, но и все похожие страницы раздела, например. Инструмент, конечно, не такой же надежный как внедренная в код микроразметка, но вполне может удовлетворить нужды небольшого сайта или в качестве временной меры, пока вы еще не обратились к программисту.
После внедрения микроразметки обязательно проверьте ее работоспособность. Для этого есть такие инструменты, как:
Напоминаем, что как и многие другие операции, добавление микроразметки на сайт еще не гарантия того, что в поисковой выдаче в вашем сниппете появятся расширенные результаты, но это значительно повышает вероятность!
Поисковая система еще должна будет переиндексировать страницы сайта, прежде чем вы увидите какие-то изменения в выдаче, на это потребуется время.
Микроразметка напрямую не влияет на позицию сайта в поисковой системе, но влияет на привлечение внимания пользователя именно к вашему сниппету и может повысить количество кликов по нему — CTR. Так что при прежней позиции и прежнем количестве просмотров вы получите больше трафика на сайт. А вот значительное повышение CTR может и поднять сайт и на более высокие позиции.
Так вот, после переиндексации сайта поисковиками вы: