Микроразметка сайта


Микроразметка для разных типов сайтов

Сегодня мы поговорим о пользе микроразметки для корректной индексации страниц сайта поисковыми системами и увеличения их привлекательности для пользователей. Расскажем, какие возможности семантическая разметка дает интернет-магазинам, информационным порталам, сайтам СМИ и прочим ресурсам.

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

Существует два основных вида микроразметки, которые используют поисковые системы Яндекс и Google: и .

Стандарт семантической разметки данных в сети Schema.org был разработан поисковыми системами Google, Bing и Yahoo! летом 2011 года для того, чтобы вебмастерам не приходилось размечать контент страниц отдельно для каждой поисковой системы. Сегодня его поддерживают все основные поисковые системы, в том числе и Яндекс.


Словарь Open Graph создали в Facebook для того, чтобы сделать публикуемые с сайтов ссылки расширенными, иными словами, чтобы сайты могли красиво отображаться в социальной сети. Сегодня эту микроразметку используют все популярные социальные сети: ВКонтакте, Google+, Twitter, LinkedIn, Pinterest и др.

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

Микроразметка для разных типов сайтов

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

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

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

Интернет-магазин


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

Товарные страницы

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

Микроразметка сайта

Получить такой сниппет несложно, достаточно указать в коде поля name, offers, price, pricecurrency и т.д.:

Отзывы

Если на страницах товаров есть отзывы, их также можно разметить при помощи свойства в . В результате в выдаче Google в сниппете появится рейтинг и отзывы:

Микроразметка сайта

В коде сайта необходимо указать следующие атрибуты:

Контакты

Контакты размечаются при помощи от Schema.org. Эта разметка позволяет компаниям попасть в справочник Яндекса, а также отражаться при поиске на Яндекс.Картах.


Микроразметка сайта

Пример разметки контактов в коде:

Картинки

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

Микроразметка сайта

Один из способов попасть в поиск по картинкам Google и Яндекс — применить на сайте микроразметку . Достаточно будет указать ссылку на изображение, описание, название картинки, подпись, размеры изображения:

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

Микроразметка сайта

Чтобы эта информация отображалась корректно и не искажала исходный материал, представляя в анонсе несвязный текст или изображение, мало связанное с темой ссылки, был разработан дополнительный стандарт разметки страниц — Open Graph. По сути, он представляет собой набор тегов, которые указывают на то, как должно выглядеть отображение анонса веб-страницы в соц. сети. Для этого необходимо указать заголовок, картинку и описание:

Информационные порталы и СМИ


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

Какой контент содержат подобные ресурсы? Обычно это тексты и различный мультимединый контент. Поэтому чаще всего контент СМИ в микроразметке Schema.org/Article размечается следующими атрибутами:

  • itemscope itemtype=http://schema.org/WPHeader – указывает на общий контент;
  • itemscope itemtype=http://schema.org/Article – указывает на тело статьи;
  • itemprop=»name» – обозначает заголовок;
  • itemprop=»author» – авторство;
  • itemprop=»datePublished» (Обязательно время в формате «Y-m-d») – дата публикации;
  • itemprop=»articleBody» – текст статьи;
  • itemprop=»articleSection» – рубрика;
  • itemprop=»image» – если есть изображение.

Так как для такого вида контента важно расшаривание в соц. сетях его также необходимо размечать при помощи Open Graph.

Микроразметка сайта

Видеохостинг


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

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

Микроразметка сайта

Минимальное описание видео выглядит вот так:

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

Микроразметка сайта

Для этого необходимо указать подробные данные о фильме: название, актеров, жанр, описание и т.д.

www.iseo.ru

Адреса и организации

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

Микроразметка сайта

Словарные статьи


Если сайт справочного или словарного типа, то размечая страницу по этой схеме, можно принять участие в программе «Яндекс.Словарей» (подробнее тут), что улучшит отображение сниппета:

Микроразметка сайта

Отзывы об автомобилях

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

Микроразметка сайтаИ в результатах поиска:

Микроразметка сайта

Подробнее об использовании остальных схем для Яндекс вы узнаете, перейдя сюда.


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

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

 

Примеры разметки по схемам, поддерживаемым Google

Отзывы

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

Пример сниппета отдельного отзыва:

Микроразметка сайта

Пример сниппета сводного отзыва:

Микроразметка сайта

Мероприятия

Если вы проводите различные мероприятия и публикуете информацию о них на сайте, то благодаря микроразметке Google покажет ее в результатах поиска, сформировав вот такой сниппет:

Микроразметка сайта

Товары


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

Микроразметка сайта

Такой сниппет становится заметнее и будет привлекать больше покупателей.

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

siteclinic.ru

Что такое микроразметка и как ее внедрять?

Микроразметка — своего рода единый язык, который одинаково понимают и трактуют поисковые роботы Google, Яндекс, Bing, Yahoo. Об этом они «договорились» еще в далеком 2011 году. Язык этот состоит из специальных тегов (например <div>, <span>) и их содержимого. С помощью микроразметки можно показать роботам, что определенный текст или другие элементы на странице важны и принадлежат к определенному типу данных (поисковые роботы еще несовершенны в трактовке смысла контента и расстановке приоритетов).


Например, на странице «О нас» или «Контакты» компании стоит выделить микроразметкой блок с контактными данными — в таком случае на запрос пользователя «контакты компании N» робот безошибочно покажет нужную страницу и нужные данные.

Другой пример. Допустим, мы хотим, чтобы роботы поняли: эта маленькая картинка сверху — логотип компании.

Что такое микроразметка и как её внедрять

Нажмите правой кнопкой мыши на фото и выберите «Копировать URL картинки»:

Нажмите правой кнопкой мыши на фото и выберите «Копировать URL картинки»

Для разметки логотипа следует указать:

  1. Словарь микроразметки.
  2. Тип данных. В нашем случае — “Organization”.
  3. URL-адрес ресурса.
  4. URL-адрес логотипа.

Получаем фрагмент микроразметки для логотипа:

<script type="application/ld+json">   {   "@context": "http://schema.org",   "@type": "Organization",   "url": "http://www.example.com",   "logo": "http://www.example.com/images/logo.png"   }  </script>

Инструмент Structured Data Testing Tool от Google помогает проверить правильность оформления микроразметки:


Инструмент Structured Data Testing Tool от Google помогает проверить правильность оформления микроразметки

Результат:

Результат

Аналогичный инструмент от Яндекса — «Валидатор микроразметки»:

Так же копируем код в поле и нажимаем «Проверить»

Если все чётко, можно внедрять микроразметку в тело сайта или ставить соответствующую задачу программисту.

Больше примеров — в статье Андрея Бугорского.

Если сайт большой, SEO-специалист тратит достаточно много времени, определяя, какие типы страниц будут «размечены», какую именно информацию следует выделить. Конечно, для этого следует изучить основы языка микроразметки — словари и синтаксис.

К слову, если хотите узнать больше о подноготной поискового продвижения, подписывайтесь на рассылку блога:

Словари микроразметки

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

Как работать с Schema.org?

Schema.org нужен в первую очередь для формирования расширенного сниппета и повышения релевантности страницы.

Пример в результатах поиска:

Пример в результатах поиска

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

  • itemscope — описывает каждый блок отдельно, позволяет описать информацию на уровне сущности;
  • itemtype — указывает тип сущности;
  • itemprop — позволяет указать дополнительные свойства. Например, сущность — театральное событие. В таком случае можно указать название, дату спектакля, место проведения:
<div itemscope="" itemtype="http://schema.org/TheaterEvent">  <span itemprop="name">Viva Штраус</span>  <div itemprop="location" itemscope="" itemtype="http://schema.org/PerformingArtsTheater">  <meta itemprop="name" content="ХАТОБ"/>  <link itemprop="sameAs" href="http://hnatob.com/"/>  <meta itemprop="address" content="Харьков, Украина"/>  </div>   <span itemprop="startDate" content="2016-25-12T19:00">Sun 25 December 2016 19:00</span>  </div>

Подробная документация по Schema.org — на официальном сайте.

Что такое микроформаты?

Микроформаты (microformats.org)  —  небольшие шаблоны HTML, которые позволяют охарактеризовать людей, события, тексты. Микроформаты позволяют распознать смысл отдельных фрагментов на странице. Особенность от других словарей в том, что микроформаты объединяют в себе и словарь, и синтаксис микроразметки.

Пример разметки контактов:

<p class="h-card">   <img class="u-photo" src="http://one.org/photo1.png" alt="" />   <a class="p-name u-url" href="http://one.org">Иван Петров</a>   <a class="u-email" href="mailto:ivan_petrov@gmail.com">ivan_petrov@gmail.com</a>,    <span class="p-street-address">Ярослава Мудрого, 15</span>   <span class="p-locality">Харьков</span>   <span class="p-country-name">Украина</span>  </p>

Яндекс различает несколько микроформатов:

  • hCard — для разметки контактов (телефон, адрес, контактные данные);
  • hRecipe —  для разметки кулинарных рецептов, позволяет указать ингредиенты, инструкции к приготовлению, фото, количество порций;
  • hReview — для разметки на страницах отзывов, позволяет размечать текст отзыва, оценку, достоинства и недостатки продукта, дату.

Google способен определить большее количество микроформатов в дополнение к описанным:

  • hProduct и GoodRelations — разметка товаров на сайте;
  • формат разметки организации и компании;
  • hCalendar — разметку мероприятий, позволяет указать дату начала и окончания мероприятия, место проведения.

Формат для разметки видео — позволяет указать продолжительность, название, описание видеоконтента, указать ссылку.

В microformats.org для разметки применяются html-теги.

Пример разметки:

<div class="vcard">  <img class="photo" src="http://example.com/gagarin.jpg" />  <strong class="fn">Юрий Гагарин</strong>  <span class="title">Летчик-космонавт</span>   <span class="org">Военно-воздушные силы СССР</span>  <a class="url" href=http://example.com/Гагарин>Страница Ю.Гагарина</a>  <div class="bday">    <span class="value-title" title="1934-03-09">9 марта 1934</span>  </div>  <span class="note">Первый человек в космосе</span>  <span class="adr">   <span class="type">work</span>   <span class="locality">Байконур</span>   <span class="country-name">Казахстан</span>   <span class="postal-code">468320</span>  </span>  </div>

Как работать с Open Graph?

Open Graph — словарь, созданный Facebook, чтобы каждый сайт мог корректно отображаться в социальной сети. Элементами этого словаря можно разметить только один объект — человека, продукт или компанию.

Несколько обязательных тегов:

  • og:title — название объекта.
  • og:type — тип объекта. Если на странице больше одного объекта, необходимо выбрать главный и указать его тип. В разных типах можно указывать различные дополнительные свойства.
  • og:image — URL изображения.
  • og:url — канонический URL, который будет добавляться в Facebook.

Как работать с Open Graph

Также выделяют ряд необязательных тегов, которые можно использовать в зависимости от контента на странице:

  • og:audio — ссылка на аудиофайл, который относится к объекту описания.
  • og:description — короткое описание.
  • og:locale — язык и страна, указывается в формате язык_страна. Значение по умолчанию — en_US.
  • og:locale:alternate — альтернативные языки, на которых доступно описание объекта.
  • og:site_name — название сайта.
  • og:video — ссылка на видео, которое относится к объекту описания.

Что такое FOAF?

FOAF (Friend of a Friend) описывает человека и связи между людьми. С помощью этого словаря можно указать степень близости людей. FOAF использует поиск Яндекса по блогам и позволяет максимально подробно описать блоги пользователей.

Что такое Dublin Core?

Dublin Core активно используется в библиотеках и музейном деле. Позволяет максимально подробно описать экспонаты и книги.

Пример:

<meta name="DC.Title" content="Заголовок веб-страницы">  <meta name="DC.Creator" content="Название сайта или имя создателя">  <meta name="DC.Subject" content="Тема">  <meta name="DC.Description" content="Краткое описание">  <meta name="DC.Publisher" content="Издатель">  <meta name="DC.Contributor" content="Соисполнитель">  <meta name="DC.Date" content="Дата создания">  <meta name="DC.Type" content="Тип">  <meta name="DC.Format" content="Формат">  <meta name="DC.Identifier" content="URL страницы (ID ресурса)">  <meta name="DC.Source" content="Источник">  <meta name="DC.Language" content="Язык">  <meta name="DC.Coverage" content="Геотаргетинг">  <meta name="DC.Rights" content="Авторское право">

Что такое Data Vocabulary?

Data Vocabulary раньше активно разрабатывался Google, но сейчас он полностью объединился с Schema.org.

Известная микроразметка «хлебные крошки» — это как раз из словаря Data Vocabulary.

Пример:

<div class="breadcrumbs">  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">  <a href="http://netpeak.ua/" itemprop="url">  <span itemprop="title">Netpeak</span>  </a>  <span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">  <a href="http://netpeak.ua/about/" itemprop="url">  <span itemprop="title">О нас</span>  </a>  </span>   </span>  </div>

Зачем нужен Good Relations?

Good Relations используется для продуктов в электронной торговле. Позволяет расширенно описать каталоги рекламы, книги, пользовательскую электронику, автомобили, билеты на концерты, туры, мероприятия и так далее. Этот словарь встречается на некоторых зарубежных сайтах (strobelight-shop.com, lux-case.se).

Пример микроразметки:

<div itemscope itemtype="http://purl.org/goodrelations/v1#Individual"   itemid="#product">   Weight: <link itemprop="weight" href="#weight">  </div>  <div itemprop="weight" itemscope    itemtype="http://purl.org/goodrelations/v1#QuantitativeValue" itemid="#weight">   <span itemprop="hasValue">50</span> kg   <meta itemprop="hasUnitOfMeasurement" content="KGM" >  </div>

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

Синтаксис — способ использования словаря. Он определяет, как будут указаны элементы словаря на странице. Опять-таки нет единого стандарта синтаксиса микроразметки.

1. Микроданные (microdata) содержат несколько основополагающих элементов:

  • itemscope определяет, что в теге находятся данные описания объекта.
  • itemtype указывает ссылкой на тип объекта;
  • itemprop определяет свойства объекта.

Как правило, размечаются данные, которые уже присутствуют на странице и видны пользователю. Но бывают ситуации, когда пользователю нужен человекопонятный формат, а в разметке необходимо использовать понятные для роботов данные. В этом случае рекомендуется указать информацию в атрибуте content любого тега или, как рекомендует Яндекс, добавить тег <meta>.

Например:

<div itemscope itemtype="http://schema.org/Offer">   <span itemprop="name">Чехол для Iphone</span>   <span itemprop="price">500 грн</span>   <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">   <img class="aligncenter" src="four-stars.jpg" />   <meta itemprop="ratingValue" content="4" />   <meta itemprop="bestRating" content="5" />  Основан на <span itemprop="ratingCount">25</span> голосах пользователей  </div>  </div>

2. RDFa и RDFa Lite используются редко из-за сложностей в реализации. Могут описывать любую сущность — человека, объект, событие.

Пример:

<div vocab="http://schema.org/" typeof="Invoice">  <h1 property="description">January 2015 Visa</h1>  <a property="url" href="http://acmebank.com/invoice.pdf">Invoice PDF</a>  <div property="broker" typeof="BankOrCreditUnion">  <b property="name">ACME Bank</b>  </div>  <span property="accountId">xxxx-xxxx-xxxx-1234</span>  <div property="customer" typeof="Person">  <b property="name">Jane Doe</b>  </div>  <time property="paymentDueDate">2015-01-30</time>  <div property="minimumPaymentDue" typeof="PriceSpecification">  <span property="price">15.00</span>  <span property="priceCurrency">USD</span>  </div>  <div property="totalPaymentDue" typeof="PriceSpecification">  <span property="price">200.00</span>  <span property="priceCurrency">USD</span>  </div>  <meta property="billingPeriod" content="2014-12-21/P30D" />starts:2014-12-21 30 days  <link property="paymentStatus" href="PaymentDue" />  </div>

3. JSON-LD — описывают объекты на странице сайта с помощью словаря связанных данных. Разметка оформляется в виде «ключ — значение». Этот синтаксис определяет пространство зарезервированных ключей, которые смогут связать объект и описание в различных комбинациях.

Например:

{   "name": "Manu Sporny",   "homepage": "http://manu.sporny.org/",   "image": "http://manu.sporny.org/images/manu.png"  }

Объект JSON — набор пар «ключ — значение», которые указываются в формате: {«title»:»Конференция»,»date»:»2014-11-30T12:00:00.000Z»}. Имена ключей одного объекта не должны дублироваться.

Типы данных:

  • массив — набор значений, указывается в формате: [0, 1, 2, 3];
  • строка — набор символов Unicode, указывается в двойных кавычках: «Вася»;
  • число — обычные числа, но нельзя указывать ноль перед числом: [01];
  • true и false — бинарное значение;
  • null — отсутствующее значение. Обычно используется для очистки данных.

Выводы

Перед внедрением микроразметки следует определить, какое содержимое и какие типы страниц стоит «размечать».

Затем нужно распределить общие блоки микроразметки. Например, микроразметка «хлебных крошек» будет повторяться от страницы к странице, меняться будет только уровень вложенности. А вот контакты организации, скорее всего, будут размечаться только на странице «Контакты» или «О нас».

Пример внедрения «хлебных крошек» — в кейсе.

Третий шаг — непосредственно разметка информации на странице. По сути, к существующим данным добавляются атрибуты, которые указывают на тип информации на странице.

Два базовых понятия микроразметки — словари и синтаксис. Словари задают язык, который указывает на суть контента страницы, а синтаксис определяет, как будут указаны элементы словаря на странице.

Словари микроразметки (первые три самые популярные):

  • Schema.org;
  • Микроформаты;
  • Open Graph;
  • FOAF;
  • Dublin Core;
  • Data Vocabulary;
  • Good Relations.

Синтаксисы микроразметки:

  • Microdata;
  • RDFa и RDFa Lite;
  • JSON-LD.

netpeak.net

Что такое Schema.org?

Достаточно подробно о том, что такое микроразметка Schema.org, мы писали в одной из наших прошлых статей. А если коротко, то Schema.org – это словарь семантической разметки данных, поддерживаемый всеми ведущими поисковыми системами. Ее цель – помогать поисковым роботам лучше понимать содержание страницы и, тем самым, улучшать результаты выдачи.

Куда что нужно вписывать?

Ну а теперь давайте разбираться, какие коды и куда нужно вписывать. Обратимся к конкретному примеру. Вот так выглядит микроразметка, описывающая фильм «Аватар»:

Здесь мы видим три атрибута, и их вы должны будете неизменно использовать в каждой своей микроразметке:

  1. itemscope нужен только для того, чтобы показать поисковому боту, что на странице описывается определенный объект.
  2. itemtype всегда идет рядом с itemscope и нужен для того, чтобы показать поисковому боту тип объекта (в данном случае, это Movie). Полный список объектов можно посмотреть по ссылке.
  1. itemprop – описывает свойства выбранного объекта. В данном случае это: название фильма (name), режиссер (director), жанр (genre) и наличие трейлера (trailer). Все доступные свойства перечислены на сайте schema.org в соответствующем разделе:

Примечание. Вышеприведенный скриншот был сделан на сайте ruschema.org – проект перевода schema.org, развивающийся силами добровольцев. На данный момент переведен не весь сайт. Поучаствовать в переводе может любой желающий.

Помимо этих трех атрибутов в коде присутствуют еще и теги. Рассмотрим на другом примере, тип объекта – Person (Человек):

  1. Теги <div> … </div> показывают, где начинается и заканчивается описание объекта.
  2. В теги <span> … </span> заключаются те свойства объекта, которые можно описать словами.
  3. Тег <link> с атрибутом href нужны для перечислений и ссылок на канонические страницы. Ссылки, поставленные таким образом, не видны пользователям.
  4. Теги <time> … </time> с атрибутом datetime используются для указания даты, времени и длительности. Дату и время необходимо указывать в следующих форматах: YYYY-MM-DD (2014-05-26), Тhh:mm (Т10:25) либо Тhh:mm:ss (Т02:40:15). При этом, их можно указывать одновременно:
  1. Теги <a> … </a> используются для указания ссылок, видных для пользователей.
  2. Тег <meta> (на изображении не используется) скрывает информацию от пользователей. Данный тег не рекомендуется использовать слишком часто – Google это не одобряет.

Как это сделать на практике?

Заходим на ruschema.org в раздел «Схемы». Выбираем нужный объект. Допустим, Book (Книга). Смотрим, какие свойства мы хотим указать. И начинаем собирать код.

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

Проверить правильность проставления микроразметки можно в специальных сервисах от Google и от Yandex.

Несколько примеров сниппетов и кодов

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

  • Видео

<div itemscope itemtype="http://schema.org/VideoObject»>

<h2>Video: <span itemprop="name">Название видео</span></h2>

<meta itemprop="url" content="http://example.com" />

<meta itemprop="isFamilyFriendly" content="True">

<meta itemprop="duration" content="Длительность – T7M02S" />

<meta itemprop="thumbnail" content="URL скриншота" />

<meta itemprop="contentURL">"Ссылка на сам видеофайл — http://www.example.com/video123.flv"

<meta itemprop="uploadDate" content="2011-07-05T08:00:00" />

<iframe width="560" height="315" src="//www.youtube.com/embed/N-4tzVFsyLU" frameborder="0" allowfullscreen></iframe> – HTML-код видео. Берется с видеохостинга:

<span itemprop="description">Описание видео</span>

</div>

  • Рецепт

<div itemscope itemtype="http://schema.org/Recipe">

<span itemprop="name">Название рецепта</span>

<span itemprop="recipeInstructions">Берем бананы, снимаем с них кожуру. Перемалываем в блендере и добавляем туда муку"

<span itemprop="author">Имя автора</span>,

<meta itemprop="datePublished" content="2009-05-08">May 8, 2009

<img itemprop="image" src="Картинка_блюда.jpg" />

<span itemprop="description">Описание рецепта</span>

<meta itemprop="cookTime" content="Время приготовления – PT1H">1 hour

<span itemprop="ingredients">3 банана</span>

<span itemprop="ingredients">1 яйцо</span>

<span itemprop="ingredients">Стакан сахара</span>

</div>

  • Организация

<div itemscope itemtype="http://schema.org/Organization">

<span itemprop="name">Название организации</span>

<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">

<span itemprop="streetAddress">Улица</span>,

<span itemprop="addressLocality">Город</span>,

<span itemprop="addressRegion">Область</span>.

</div>

<img itemprop="logo" src="Ссылка на логотип – http://www.example.com/logo.png" />

Phone: <span itemprop="telephone">Номер телефона – 206-555-1234</span>

</div>

Важная информация

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

Пример 1. При описании видеообъекта (videoObject), фотография автора полностью заменяется на скриншот из видео (thumbnail), а информация об авторе перемещается в самый низ сниппета. В некоторых случаях, авторство удаляется полностью.

Пример 2. При описании объекта отзыв (review), происходит то же самое – фото автора исчезает и появляется информация о том, кому принадлежит данный отзыв (обзор).

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

Адаптация материала Schema-org Guide for Beginners (Everyone Can Understand!) + Schema Cheatsheet и Structured Data: Why you should mark-up for higher CTR.

kak-ispolzovat-mikrorazmetku-schema-org-rukovodstvo-dlya-chaynikov

texterra.ru

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

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

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

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

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

Разница при применении разметки OpenGraph для социальных сетей.png

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

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

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

Виды микроразметки

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

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

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

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

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

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

Микроданные

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

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

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

RDFa

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

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

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

JSON-LD

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

Поисковая система Google :

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

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

Зеленой рамкой на изображении выделены данные, представленные в Knowledge Graph.jpg

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

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

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

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

Разметка логотипа

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

Разметка логотипа.JPG

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

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

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

Разметка логотипа 2.JPG

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

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

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

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

Разметка номера телефона

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

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

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

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

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

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

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

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

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

Более подробное описание полей можно найти .

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

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

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

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

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

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

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

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

  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 будет выглядеть следующим образом:

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

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

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

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

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

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

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

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

  1. aggregateRating, который отвечает за разметку отзывов;
  2. Offer, который включает в себя свойства торгового предложения:
  • цена;
  • валюта;
  • наличие товара на данный момент (чаще всего для этого используется два варианта: в наличии — link itemprop=»availabilit» href=»http://schema.org/InStock» и нет в наличии — link itemprop=»availability» href=»http://schema.org/OutOfStock»);
  • состояние товара.

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

Микроразметка товаров 2.JPG

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

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

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

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

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

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

Подробнее с OpenGraph можно познакомиться на .

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

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

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

Микроразметка для Twitter.JPG

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

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

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

  1. . Удобный и user-friendly сервис от Google. Для проверки можно вводить как url страницы, так и только микроразмеченный пример кода. Позволяет отследить на лету ошибки в своей микроразметке.
  2. Яндекса. Похожий инструмент, только от Яндекса, также позволяет проверить как отдельную страницу в интернете, так и просто пример кода.
  3. от Facebook. Помогает увидеть, как будет выглядеть ваша страница при перепосте.

Вывод

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

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

www.seonews.ru

Немного теории для страждующих

Микроразметка состоит из словаря и синтаксиса.

Словарь — это набор необходимых сущностей, классов и свойств, с помощью которых описывается сайт. Фактически, это язык, на котором мы будем общаться с роботом. Популярные словари — Open Graph, Schema.org и микроформаты. В конкретно этой статье мы познакомимся со Schema.org, а Open Graph таки заслуживает отдельной статьи.

Микроразметка сайта
Статистика распространённости словарей микроразметки в Рунете по данным Яндекса

Синтаксис — это способ применения словаря, т.е. каким образом мы его будем использовать в разметке.

Мы условились, что в данной статье говорим про Schema.org, что не означает, что использовать нужно только её и больше ничего — хорошим решением считаю использование Schema + Open Graph.

Итак, словарь Schema.org появился в 2011 году по инициативе поисковых систем и поддерживается основными игроками этого сегмента —  Google, Яндекс, Bing и Yahoo!

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

У Схемы есть такая штука как Сущность (Thing), которая состоит из множества подтипов, описывающих контент на странице. Вот несколько типов для примера:

  • Person — тип для описания человека — реально существующего, жившего давно или вообще вымышленного. Just for lulz, разработчики добавили возможность пометить персону как Undead (во славу Нер-Зула, не иначе как). С его помощью можно описать имя, фамилию, возраст, дату рождения и смерти, пол, контактные данные, информацию о работе и кучу другой информации, которую робот поймёт.
  • Product — тип для описания продуктов (но не помидоров-огурцов), которые можно продать/купить. Также к ним относятся некоторые услуги. Покупка билетов, одежда, аренда или услуга парикмахера — это всё сюда.
  • Event — тип для проводимых мероприятий. Можно указать самые важные параметры — место, время, кто будет участвовать и сколько участников будет — ваши посетители не ошибутся.
  • Organization — разметка для организаций. Всё необходимое для этого — адреса, время работы, контактные данные — в наличии.

Для примера привел всего 4 типа, но по факту их больше. Со всеми можно ознакомиться на официальном сайте http://schema.org/docs/schemas.html

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

Приступим, сохранившись.

Создаём микроразметку для статьи

Начнём с самого простого, часто встречающегося и самого распространённого — обычной такой статьи. Не знаю, отчего так получилось, но зачастую статью про микроразметку сайта приводят на примере кулинарного сайта — на примере рецепта. В целом, понятно, почему — копипаст всегда легче на примере рецепта можно охватить много разных классов и показать, какая микроразметка всеобъемлющая.

Но мы пойдём другим путём и сделаем микроразметку для обычной статьи. Давайте сначала посмотрим на код:

<section>  <h1>Что нам стоить дом построить?</h1>  <time>20 октября 2017</time>  <img src=”image.jpg” alt=”Что нам стоить дом построить”>  <article>  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  </article>  <div>Автор: Иван Пупкин</div> </section>

Вот такая незамысловатая конструкция для статьи, которая содержит понятную для человека информацию:

  • Заголовок
  • Время публикации
  • Иллюстрацию к статье
  • Саму статью
  • Автора статьи

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

Микроразметка сайта

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

<section itemscope itemtype="http://schema.org/Article">

Микроразметка сайта

Теперь валидатор Google уже видит начало разметки, но ругается на ошибки. Суть их в том, что он уже понимает, что это статья, но не видит других атрибутов и требует их указать. Давайте разберём, что он хочет и что там должно быть:

  • author — это поле, которое требует указания автора статьи.
  • datePublished — дата публикации статьи. Здесь нужно остановиться подробнее — для человека понятной датой будет запись типа “20 октября 2017 в 19:40”, но поисковым роботам необходима запись времени в формате стандарта ISO 8601 — выглядит это вот так: 2017-10-20T14:40:38+00:00.
  • headline — заголовок статьи.
  • image — иллюстрация для статьи. И здесь тоже необходимо остановиться — тут нужно не только отметить, что именно это изображение и есть иллюстрация, но и ссылку на изображение, а также размеры в пикселах.
  • publisher — здесь указывается название сайта, который опубликовал данную статью, а также несколько параметров публикатора. Его рассмотрим подробнее ниже.

Есть ещё два необязательных параметра, которые можно не указывать:

  • dateModified — дата изменения страницы.
  • mainEntityOfPage — указываем ссылку на страницу.

Итак, приступим. Сначала размечаем название статьи. Изменяем код следующим образом:

<h1 itemprop="headline">Что нам стоить дом построить?</h1>

Примерно таким же образом размечаем время:

<time itemprop="datePublished" datetime="2017-10-20T14:40:38+00:00">20 октября 2017</time>

Заметьте, у тега time добавляем атрибут datetime, в котором указываем время в формате ISO 8601. С помощью PHP это сделать просто:

<?php echo date("c"); ?>

Пользующиеся WordPress да используют такой код:

<time itemprop="datePublished" datetime="<?php the_time('c'); ?>"><?php the_time('j F Y в G:i'); ?></time>

Теперь разберемся с изображением. С ним немного сложнее — для изображения указываем ссылку на изображение и размеры. Код будет выглядеть следующим образом:

<div itemscope itemprop="image" itemtype="http://schema.org/ImageObject">  <img itemprop="url contentUrl" src=”image.jpg” alt=”Что нам стоить дом построить”>  <meta itemprop="url" content="image.jpg">  <meta itemprop="width" content="968">  <meta itemprop="height" content="504"> </div>

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

Здесь хочу сделать небольшое замечание — если мы не используем изображение, которое находится в интернете, то валидатор Google будет ругаться на недопустимый URL. Поэтому, если вы работаете с сайтом на локальном сервере, то не обращайте внимания на это сообщение. Как только ваш код окажется в интернете, то ошибка пропадёт.

Теперь добавляем в микроразметку автора:

<div>Автор: <span itemprop="author">Иван Пупкин</span></div>

Здесь также замечу, что имя автора мы выделяем с помощью тега span (он для этого идеален) и в него добавляем атрибут itemprop=»author».

Теперь сделаем разметку текста — в тег article добавляем атрибут:

<article itemprop="articleBody">

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

<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">  <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">  <img itemprop="url image" src="logo.png" style="display:none;"/>  <meta itemprop="width" content="64">  <meta itemprop="height" content="64">  </div>  <meta itemprop="name" content="Название сайта">  <meta itemprop="telephone" content="+7 800 700 60 50">  <meta itemprop="address" content="Москва, ул. Ленина, д. 10">	 </div>

Как видите, publisher — это то же самое, что и организация. Для неё мы указываем следующие параметры:

  • logo — логотип организации, который размечаем также как и изображение-иллюстрацию для статьи — размечаем изображение и его размеры.
  • Name, telephone и address — простые для понимания параметры. Указываем нужные параметры (в своём примере я взял их из головы).

Один важный момент — зачастую блоги делаются не для СМИ, а для человека и таких данных, как у организации, у него может и не быть. Можно встретить рекомендацию о замене Organization на Person, но в таком случае валидатор Google засчитает ошибку. Всё дело в том, что Google приемлет только Organization в качестве publisher’a. Есть только два выхода — игнорировать или подстраиваться под параметры Organization, что на мой взгляд не является верным решением.

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

<meta itemprop="dateModified" content="2017-10-20T16:40:38+00:00"/> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="mysite.com"/>

В итоге у нас получился вот такой длинный код:

<section itemscope itemtype="http://schema.org/Article">  <h1 itemprop="headline">Что нам стоить дом построить?</h1>  <time itemprop="datePublished" datetime="2017-10-20T14:40:38+00:00">20 октября 2017</time>  <div itemscope itemprop="image" itemtype="http://schema.org/ImageObject">  <img itemprop="url contentUrl" src=”image.jpg” alt=”Что нам стоить дом построить”>  <meta itemprop="url" content="image.jpg">  <meta itemprop="width" content="968">  <meta itemprop="height" content="504">  </div>  <article itemprop="articleBody">  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  </article>  <div>Автор: <span itemprop="author">Иван Пупкин</span></div>  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">  <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">  <img itemprop="url image" src="logo.png" style="display:none;" />  <meta itemprop="width" content="64">  <meta itemprop="height" content="64">  </div>  <meta itemprop="name" content="Название сайта">  <meta itemprop="telephone" content="+7 800 700 60 50">  <meta itemprop="address" content="Москва, ул. Ленина, д. 10">  </div>  <meta itemprop="dateModified" content="2017-10-20T16:40:38+00:00" />  <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="mysite.com/how-much-bilding-house" /> </section>

Обновляем код в валидаторе и запускаем проверку.

Микроразметка сайта

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

Вот так мы сделали микроразметку статьи для нашего сайта. Но это для одиночной статьи — если на данной странице список статей, то мы заменим первую строчку на следующую:

<section itemscope itemtype="http://schema.org/BlogPosting" itemprop="BlogPost">

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

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

Поэтому, продолжим дальше.

Создаём микроразметку заголовка сайта

Итак, микроразметка для заголовка сайта создаётся примерно также, как для страниц, но имеет меньшее количество настроек. Фактически она описывает информацию о сайте. Давайте посмотрим на минимальный код для микроразметки — он весьма небольшой:

<header itemscope itemtype="http://schema.org/WPHeader">  <meta itemprop="headline" content="Название сайта">  <meta itemprop="description" content="Описание сайта"> </header>

Мы видим, что тип микроразметки называется WPHeader — это расшифровывается не как WordPress, а как Web Page — не давайте ввести себя в заблуждение.

Запускаем проверку на валидность — всё работает. Самое главное, что все параметры передаются с помощью метатегов и нет необходимости скрывать появляющиеся элементы.

Да, настроек она требует мало, но можно конечно запилить ещё одну строчку, например, добавим ключевые слова:

<header itemscope itemtype="http://schema.org/WPHeader">  <meta itemprop="headline" content="Название сайта">  <meta itemprop="description" content="Описание сайта">  <meta itemprop="keywords" content="асфальт, москва, недорого, доставка"> </header>

Всё, что можно добавить в микроразметку заголовка, можно посмотреть здесь: http://schema.org/WPHeader.

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

Наша работа почти готова — остался последний важный элемент.

Создаём микроразметку для меню сайта

Меню сайта тоже требует микроразметки. Хотя бы для того, чтобы поисковый робот понимал, из каких разделов состоит сайт. Это действительно нужный элемент, которым пренебрегать не стоит (правда, если меню у вас есть).

Итак, в микроразметке мы уже немного разбираемся. Поэтому прочь теорию, вот код для меню:

<nav itemscope itemtype="http://schema.org/SiteNavigationElement">  <a itemprop="url" href="mysite.com/news/">Новости</a>  <a itemprop="url" href="mysite.com/articles/">Статьи</a>  <a itemprop="url" href="mysite.com/contact/">Контакты</a> </nav>

Тут тоже всё просто — помечаем контейнер с пунктами меню (nav — это каноничный вариант) типом SiteNavigationElement, а во все тэги <a> прописываем атрибут url. Проверяем код в валидаторе — всё отлично, робот видит навигационное меню и список с ссылками на разделы сайта.

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

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

Микроразметка для Нижнего колонтитула сайта (подвал, footer)

Нижний колонтитул — он же подвал сайта, он же футер/footer — тот самый элемент внизу сайта, где обычно ещё раз пишут название сайта, копирайты, контакты и прочую информацию.

По своей структуре микроразметка очень похожа на микроразметку заголовков:

<footer itemtype="http://schema.org/WPFooter">  <div>MySite.com<span itemprop="copyrightYear">2017</span>. Все права защищены</div> </footer>

В данном примере мы пометили только год (в основном, это текущий год), поскольку в большинстве блогов и сайтов новостей в нижнем колонтитуле можно встретить только его.

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

Как и всегда, все возможные значения можно посмотреть здесь: http://schema.org/WPFooter.

Кстати, если у вас есть что-то, связанное с адресами, то можно добавить вот такую разметку:

<address itemscope itemtype="http://schema.org/PostalAddress">  <div itemprop="name">название сайта</div>  <div><span itemprop="postalCode">110575</span>,<span itemprop="addressLocality">Россия, Москва</span>,<span itemprop="streetAddress">ул. Ленина</span></div>  <div itemprop="telephone">8-212-85-06</div>  <div itemprop="email">admin@mysite.com</div> </address>

Она отлично подойдёт в footer (но это не обязательно).

Микроразметка сайдбара для сайта

Микроразметку для сайдбара (боковой колонки сайта) я поместил последней в том числе и потому, что на мой взгляд она не очень обязательна. Что у нас обычно бывает в сайдбаре? Популярные статьи, последние комментарии, виджеты социальных сетей, реклама и какой-нибудь опрос — вот первое, что приходит в голову. Собственно, мы можем разметить все эти типы элементов, но проще всего — обозначить их в виде логических блоков. Приведём такой пример:

<aside itemscope itemtype="http://schema.org/WPSideBar">  <section>  <h3 itemprop="name">Группа ВКонтакте</h3>  <!-- код виджета -->  </section>  <section>  <h3 itemprop="name">Страница Facebook</h3>  <!-- код виджета -->  </section>  <section>  <h3 itemprop="name">Мой опрос</h3>  <!-- код опроса -->  </section> </aside>

Мы показали роботу — вот у нас тут виджеты социальных сетей и опрос.

А теперь немного о рекламе — для неё существует отдельный тип WPAdBlock. Но в целом, он очень похож на другие разметки, поэтому просто приведу простой код для примера:

<div itemscope itemtype="http://schema.org/WPSideBar">  <div itemprop="name">Покупайте наших слонов!</div>  <div itemprop="description">Наши слоны самые слонистые слоны на свете</div>  <div itemprop="producer" itemscope itemtype="https://schema.org/Organization">  <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">  <img itemprop="url image" src="logo.png" style="display:none;"/>  <meta itemprop="width" content="64">  <meta itemprop="height" content="64">  </div>  <meta itemprop="name" content="Карбарас Лимитед">  <meta itemprop="telephone" content="+7 800 700 60 50">  <meta itemprop="address" content="Бердичев, Нская улица>	  </div> </div>

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

На этом всё, что я хотел рассказать про микроразметку Schema.org. Урок получился достаточно объёмный, но зато теперь мы можем подружить наш сайт с поисковыми роботами, а это очень и очень полезно.

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

anatolykulikov.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector