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

Оформление страницы контактов

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

1. Первый и самый важный совет – сделайте отдельную страницу для контактов и поставьте ссылку на неё в главном меню.
2. Добавьте всю необходимую для клиента информацию – название компании, адрес, телефоны, email, почтовый индекс, режим работы, ссылки на соцсети и т.д.
3. Сформируйте информативные теги title и description.
4. Разместите карту Яндекс или Google (с подробной схемой проезда).
5. Не будет лишним продублировать контактную информацию в «шапке» или «подвале» сайта.

Насколько необходима семантическая верстка контактов?

У вас уже есть отдельная, легкодоступная и информативная страница с контактными данными? Прекрасно. Теперь самое время заняться ее оптимизацией для поисковых систем.

Не секрет, что у самых популярных поисковиков Рунета (Yandex, Google, Mail) существуют специальные кабинеты для веб-мастеров, где владельцы сайтов имеют возможность добавлять дополнительную информацию о сайте. Представление данных об адресе своей организации не является исключением, это можно сделать в Яндекс.Справочнике, Google.Maps и в кабинете веб-мастера Mail.ru (в разделе «Адреса»).

Вот здесь мы подробно описывали, как добавить адрес организации в Яндекс.Справочник. Зайти туда можно и из вашего аккаунта в Яндекс.Вебмастере: Яндекс.Вебмастер → Мои сайты → География сайта → Адреса и организации → Добавить организацию.

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

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

Основные форматы семантической верстки

1. Верстка контактов с использованием схемы Microdata. Это самый популярный и наиболее предпочтительный формат. В данном случае верстка заключается в добавлении специальных атрибутов (itemscope указывает поисковому роботу, какую именно сущность описывает данный блок, itemtype нужен для указания того или иного свойства сущности) в элементы структурирования контента (<div>, <span>, <p> и т. д.).

   Пример 1 (без использования разметки):

   <div>
 <span>Название организации</span>
 Контакты:
 <div>
  Адрес: Москва, ул. Пушкина, 16, 109652
 </div>
 Телефон: +7 495 876-54-32
 Факс: +7 495 906-90-69
 Электронная почта: [email protected]
</div>

   Пример 2 (с разметкой Microdata):

   <div itemscope itemtype="http://schema.org/Organization">
 <span itemprop="name">Название организации</span>
 Контакты:
 <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
  Адрес:
  <span itemprop="addressLocality">Москва</span>,
  <span itemprop="streetAddress">ул. Пушкина, 16</span>,
  <span itemprop="postalCode">109652</span>
 </div>
 Телефон: <span itemprop="telephone">+7 495 876-54-32</span>
 Факс: <span itemprop="faxNumber">+7 495 906-90-69</span>
 Электронная почта: <span itemprop="email">[email protected]</span>
</div>

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

   Пример 3 (разметка Schema.org с использованием тега meta):

   <div itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Название организации">
 Контакты:
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
 Адрес:
 <meta itemprop="addressLocality" content="Москва">
 <meta itemprop="streetAddress" content="ул. Пушкина, 16">
 <meta itemprop="postalCode" content="109652">
</div>
 Телефон: <meta itemprop="telephone" content="+7 495 876-54-32">
 Факс: <meta itemprop="faxNumber" content="+7 495 906-90-69">
 Электронная почта: <meta itemprop="email" content="[email protected]">
</div>

2. Верстка с помощью JSON-LD. Не всегда удается разметить данные, используя HTML-теги, некоторые CMS или конструкторы просто «стирают» их. Тут на помощь приходит формат JSON-LD, который передает информацию поисковикам с помощью объектов словаря Связанных данных.

   Тут разметка представляет собой набор пар «переменная – значение этой переменной» и оборачивается тегом <script>.

   Пример 4 (разметка контактов JSON-LD):

   <script type="application/ld+json">
{
 "@context": "http://schema.org",     //определение словаря Schema.org
 "@type": "Organization",     //тип представляемых данных
 "url" : "http://example.ru",     //адрес сайта
 "logo" : "http://example.ru/pictures/logo.png",     //адрес логотипа компании
 "address": {
  "@type": "PostalAddress",
  "addressLocality": "Город",
  "postalCode": "Индекс",
  "streetAddress": "Улица дом"
},
 "email": "Почта",
 "name": "Название организации",
 "telephone": "телефон"
}
</script>

3. Микроформат hCard. Данный формат предназначен именно для публикации контактной информации. Разметка hCard, как и Microdata, основана на элементах языка HTML.

   Пример 5 (разметка микроформатом hCard):
   
<div class="vcard">
<div>
 <span class="category">Бизнес</span>
 <span class="fn org">ООО «Инвестиции»</span>
</div>
<div class="adr">
 <span class="locality">г.Москва</span>,
 <span class="street-address">ул. Пушкина, 16</span>
</div>
<div>Телефон: <span class="tel">+7 495 876-54-32</span></div>
<div>Мы работаем <span class="workhours">ежедневно с 9:00 до 18:00</span>
 <span class="url">
  <span class="value-title" title="http://www.exemple.ru"> </span>
 </span>
</div>
</div>

4. Микроформат Rdfa. Аналогичный микроформату hCard, лишь некоторая разница в используемых тегах.

   Пример 6 (разметка микроформатом Rdfa):
   
<div vocab="http://schema.org/" typeof="Organization">
 <span property="name">Название организации</span>
Contact Details:
<div property="address" typeof="PostalAddress">
 Main address:
  <span property="streetAddress">ул. Пушкина, 16</span>
  <span property="postalCode">109652</span>
  <span property="addressLocality">Москва</span>
,
</div>
 Tel:<span property="telephone">+7 495 876-54-32</span>,
 Fax:<span property="faxNumber">+7 495 906-90-69</span>,
 Email: <span property="email">[email protected]</span>
</div>

1ps.ru

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

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

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

Видео по микроразметке:

Для чего нужна микроразметка?

Если вы еще не внедрили микроразметку на своем ресурсе, то поторопитесь с этим. И вот 2 причины поторопиться это сделать:

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

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

• Schema.org — язык роботов поисковых систем Яндекс и Google. Отметим, что его также понимают Bing и Yahoo, и другие роботы менее известных поисковых систем. Schema.org — самый распространенный язык микроразметки. несколько лет назад его приняли за всеобщий стандарт разметки данных.
• OpenGraph — способ разметки информации, используемый роботами социальных сетей. Разработала его Facebook, но подхватили Вконтакте, Twitter, Google+, LinkedIn и все остальные. Используется для отображения превью в новостной ленте пользователя. Также этот язык понимает Яндекс.Видео.
• JSON-LD — способ описания содержания страницы с помощью языка связанных данных. Описанная таким образом информация видна для роботов, но скрыта от людей. Чтобы было понятно: этот язык различает Яндекс.Почта, но оставляет без внимания поисковой робот Яндекса. Может быть использован в качестве дополнения к Schema.org (кстати, структурированные таким образом данные выглядят красивее).
• Микроформаты — альтернативный способ разметки гипертекста через атрибут “class”. Например, задаем тег<div class=”adr”></div>, то есть сообщаем роботу о том, что внутри <div>помещен адрес.

Что такое микроразметка Schema.org?

Schema.org – набор словарей, используемых для описания объектов и сущностей на страницах сайтов. Стандарт использует микроданные.

В стандарте Schema.org есть порядка 550 классов, но их число неуклонно растёт. Некоторые классы поддерживаются сервисами Яндекса.

Что можно размечать?

Практически всё (существует более 100 схем), но не вся разметка будет использована поисковыми системами. Что точно стоит размечать:

• Товары
• Контакты
• Статьи
• Отзывы / рейтинги
• Комментарии
• Видео
• Люди (персоны)
• Рецепты

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

<div itemscope itemtype="http://schema.org/Product"> <!--Указывается схема Product-->  	<!--В поле name указывается наименование товара-->  	<div itemprop="name"><h1>Кровать Мелисса с мягкой спинкой</h1></div>  	<!--В поле image указывается ссылка на картинку товара-->  	<a itemprop="image" href="products_pictures/large_krovat.jpg">  		<img src="products_pictures/medium_krovat.jpg" title="Кровать Мелисса с мягкой спинкой">  	</a>  	<!--Указывается схема Offer-->  	<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">  		<div>8 350 руб.</div>  		<!--В поле price указывается цена товара-->  		<meta itemprop="price" content="8350.00">  		<!--В поле priceCurrency указывается валюта-->  		<meta itemprop="priceCurrency" content="RUB">  	</div>  	<!--В поле description дается описание товара-->  	<div itemprop="description">Цена указана за кровать Мелисса с мягкой спинкой; размером спального места 900х2000 мм. Подушки у спинки кровати изготовляются из искусственной кожи. В комплектацию входит ортопедическое основание на ножках.</div>  	</div>  

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

<div itemscope itemtype=”http://schema.org/Organization”>
<span itemprop=”name”>superwebmaster</span>
Контакты:<div itemscope itemtype=”http://schema.org/ProstalAddress”>
Адрес:
<span itemprop=”streetAddress”>проспект Ленина,11</span>
<span itemprop=”prostalCode”>454055</span>
<span itemprop=”addressLocality”>Челябинск</span>
</div>
Телефон:<span itemprop=”telephone”>+7-908-04-29-***</span>
</div>

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

<div itemscope itemtype="http://schema.org/Article">
<header>
<h1 itemprop="headline name">Пример микроразметки статьи</h1>
</header>
<span itemprop="datePublished" content="ГОД-МЕСЯЦ-ДЕНЬ">Дата размещения</span>
<span itemprop="author">Солтык Алексей</span>
<div itemprop="description">
<p>Текст краткого описания</p>
<p>...</p>
</div>
<h2 itemprop="alternativeHeadline">Подзаголовок статьи</h2>
<div itemprop="articleBody">
<article>
<img itemprop="image" src="URL адрес изображения" title="Какое-то изображение в статье" alt="Альтернативное название">
<p>Размечаем содержимое статьи!</p>
<p>...</p>
</article>
</div>
</div>

Микроразметка отзывов (рейтинга)

<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="Название страницы">
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="0.00">
</span>
<p itemprop="description">Описание страницы</p>
<div class="left" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="ratingValue" content="4.63" /><!-- Количество отображаемых звезд -->
<meta itemprop="ratingCount" content="9" /><!-- Количество голосов -->
</div>
</div>

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

<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/UserComments">  <span itemprop="commentTime" content="2017-05-23T12:14:22">23.05.2017 12:14:22</span>  <span itemprop="creator">Алексей</span>:  <div itemprop="commentText">Мощная статья. Спасибо!</div>  </div>

Микроразметка персон

<h1 itemprop="name">Анджелина Джоли</h1><br/>  <img itemprop="image" src="//domen.ru/wp-content/uploads/iphone360_20866-1.jpg" alt="Анджелина Джоли">  <b>ФИО на английском:</b> <span itemprop="alternateName">Angelina Jolie</span><br />  <b>Дата рождения:</b> 04 июня 1975 года<br />  <meta itemprop="birthDate" content="1975-06-04"/>  <b>Рост:</b> <span itemprop="height">1.69 м</span><br />  <b>Знак зодиака:</b> близнецы<br />  <b>Место рождения:</b> <span itemprop="birthPlace">Лос-Анджелес, Калифорния, США</span><br />  <b>Карьера:</b> <span itemprop="jobTitle">Актриса, Продюсер, Режиссер, Сценарист</span><br />  <b>Жанры:</b> драма, триллер, боевик<br />  <b>Супруг:</b> <span itemprop="spouse">Джонни Ли Миллер (развод), Билли Боб Торнтон (развод), Брэд Питт, шестеро детей</span><br />

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

<div itemscope itemtype="http://schema.org/Recipe">
<h1 itemprop="name" >Курица в пиве с рисом</h1>
Этот рецепт найден в Тибетском монастыре в 1871 году во время экспедиции графа Никанора Уйского. Он был написан в VI веке до нашей эры на глиняной табличке.
<img itemprop="resultPhoto" src=​"profit.jpg" />
<ul>
<li>Автор рецепта: <span itemprop="author">Граф Уйский</span></li>
<li>После приготовления вы получите <span itemprop="recipeYield" >4 порции</span></li>
<li>Время приготовления: <meta itemprop="totalTime" content="PT45M"/>45 минут</li>
</ul>
<h2>Ингредиенты</h2>
<ul>
<li itemprop="ingredients"> 1 курица </li>
<li itemprop="ingredients" > 5 л пива </li>
<li itemprop="ingredients" > соль </li>
<li itemprop="ingredients" > перец </li>
<li itemprop="ingredients" > специи по вкусу </li>
</ul>
<h2>Способ приготовления</h2>
<ul itemprop="recipeInstructions">
<li><img itemprop="image" src=​"creks.jpg" alt="нарезанная кусочками курица"/> Курицу нарезать на кусочки, выложить в форму для запекания, посолить, поперчить, добавить специи по вкусу. </li>
<li><img itemprop="image" src=​"feks.jpg" alt="курица залитая пивом"/> Курицу залить пивом, поставить в духовку. </li>
<li><img itemprop="image" src=​"peks.jpg" alt="курица в духовке"/> Жарить при температуре 180 градусов в течение 40—45 минут. </li>
</ul>
<span itemprop="recipeCategory">Блюда из курицы</span>
<div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> Пищевая ценность:
<ul>
<li>Калории: <span itemprop="calories">120 ккал.</span>,</li>
<li>Жиры: <span itemprop="fatContent">7 г.</span></li>
<li>Углеводы: <span itemprop="carbohydrateContent">1 г.</span></li>
</ul>
</div> Приятного аппетита! </div>

Влияние микроразметки на ранжирование в Яндексе

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

Влияние микроразметки на ранжирование в Гугл

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

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

Влияет ли наличие микроразметки на позиции сайта в поисковой выдаче? Администрации поисковых систем отрицают эту зависимость, но, при этом, рекомендуют использовать schema.org. Конструкторы сайтов содержат модуль для работы с OpenGraph. При этом вопрос об оптимальном выборе остается открытым.

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

Инструменты для работы с микроразметкой поисковых систем:

1. Structured Data Testing Tool. Особенность сервиса состоит в том, что можно на примерах увидеть, как выполняется микроразметка. Просто скопируйте пример в свой шаблон и подставьте $переменные$ в код.
2. Разделы “Структурированные данные” и “Маркер” в Search Console от Google, которые позволят настроить микроразметку.
3. Валидатор микроразметки от «Яндекс».
4. Яндекс.Справочник. Добавьте информацию о своей организации и в результатах поиска “Яндекс” будет показываться адрес, телефон и график работы.

Выводы

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

Не имеет значения какую разметку вы будите использовать – schema.org или какую-нибудь другую, главное, чтобы она была выполнена правильно и без ошибок и выделяла ключевые моменты страницы. Систематически проверяйте ее с помощью «Валидатора» и «Инструмент проверки структурированных данных», проводите глубокий разбор вашей деятельности и у вас все получится.

webmaster-seo.ru

Микроразметка schema.org позволяет нам не только размечать статьи, товарные предложения или отзывы, а и данные о вашей компании. 

Почему это полезно?

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

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

Блок с кодом такой разметки необходимо размещать на всех страницах сайта. Если используете CMS тогда правильнее всего поставить код в header или footer сайта, второе предпочтительней.

Код для разметки в формате json-ld

<script type="application/ld+json">  {  "@context": "https://schema.org",  "@type": "Organization",  "url": "https://microdata.pro/demo/",  "name": "Мой Магазин",  "email": "[email protected]",  "logo": "https://microdata.pro/demo/image/catalog/logo.png",  "description": "Мой Магазин","address": {  "@type": "PostalAddress",  "addressLocality": "Москва, Россия",  "postalCode": "012345",  "streetAddress": "Пл. Победы 26Б"  },  "aggregateRating": {  "@type": "AggregateRating",  "ratingValue": "4.5",  "reviewCount": "2"  },			   "potentialAction": {  "@type": "SearchAction",  "target": "https://microdata.pro/demo/index.php?route=product/search&search={search_term_string}",  "query-input": "required name=search_term_string"  },	   "contactPoint" : [  {  "@type" : "ContactPoint",  "telephone" : "+12-345-678-90-00",  "contactType" : "customer service"  },{  "@type" : "ContactPoint",  "telephone" : "+12-435-667-55-04",  "contactType" : "customer service"  }],  "sameAs" : [  "https://vk.com/group","https://twitter.com/group"]	   }	   </script>

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

<div itemscope itemtype="https://schema.org/Organization" style="display:none;">  <meta itemprop="name" content="Мой Магазин" />  <link itemprop="url" href="https://microdata.pro/demo/" />  <link itemprop="logo" href="https://microdata.pro/demo/image/catalog/logo.png" />  <meta itemprop="description" content="Мой Магазин" /><meta itemprop="email" content="[email protected]" />  <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">  <meta itemprop="addressLocality" content="Москва, Россия" />			   <meta itemprop="postalCode" content="012345" />  <meta itemprop="streetAddress" content="Пл. Победы 26Б" />  </div>  <meta itemprop="telephone" content="+12-345-678-90-00" />  <meta itemprop="telephone" content="+12-435-667-55-04" />  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">  <meta itemprop="ratingValue" content="4.5">  <meta itemprop="reviewCount" content="2">  </div>  <link itemprop="sameAs" href="https://vk.com/group" />  <link itemprop="sameAs" href="https://twitter.com/group" />  <form itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">  <meta itemprop="target" content="https://microdata.pro/demo/index.php?route=product/search&search={search_term_string}"/>  <input itemprop="query-input" type="text" required name="search_term_string"/>  </form>		   </div>

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

Какие данные вводить в настройки модуля MicrodataPro

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

Синтаксис разметки данных о компании — рекомендуется выбирать microdata + json-ld для большей универсальности. Поисковые системы по разному воспринимают синтаксис разметки. Если взять json-ld яндекс официально заявил что не использует этот синтаксис в поисковой выдаче, а google наоборот. По-этому для того что бы понравиться всех роботам лучше оставить microdata + json-ld.

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

Е-mail — если не заполнять, в разметку попадет почта которая указана в настройках сайта.

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

microdata.pro

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

Основные параметры разметки контактной информации Schema для сайта:

• itemscope itemtype=»http://schema.org/Organization»
• itemprop=»name» — Название компании
• itemprop=»address» itemscope itemtype=»http://schema.org/PostalAddress»
• itemprop=»addressLocality» — Город
• itemprop=»streetAddress» — Адрес
• itemprop=»postalCode» — Индекс
• itemprop=»telephone» — телефон
• itemprop=»email» — адрес эл. почты

Пример 1 (разметка контактов Schema.org с использованием тега meta):

<div itemscope itemtype=»http://schema.org/Organization»>
<meta itemprop=»name» content=»SEO-точка»>
Контакты:
<div itemprop=»address» itemscope itemtype=»http://schema.org/PostalAddress»>
Адрес:
<meta itemprop=»addressLocality» content=»Брянск»>
<meta itemprop=»streetAddress» content=»ул. Дуки, 60″>
<meta itemprop=»postalCode» content=»271007″>
</div>
Телефон:  <meta itemprop=»telephone» content=»+7 953 276 70 95″>
Факс:  <meta itemprop=»faxNumber» content=»+7 953 276 70 95″>
Электронная почта:  <meta itemprop=»email» content=»[email protected]»>
</div>

Пример 2 (с разметкой контактов Microdata):

<div itemscope itemtype=»http://schema.org/Organization»>
<span itemprop=»name»> SEO-точка </span>
Контакты:
<div itemprop=»address» itemscope itemtype=»http://schema.org/PostalAddress»>
Адрес:
<span itemprop=»addressLocality»> Брянск </span>,
<span itemprop=»streetAddress»> ул. Дуки, 60</span>,
<span itemprop=»postalCode»>271007</span>
</div>
Телефон:  <span itemprop=»telephone»>+7 953 276 70 95</span>
Факс:  <span itemprop=»faxNumber»>+7 953 276 70 95</span>
Электронная почта:  <span itemprop=»email»> [email protected] </span>
</div>

Проверить микроразметку Schema для контактов можно в Яндекс Валидатор Разметки — перейдите по ссылке: https://webmaster.yandex.ru/microtest.xml

Смотрите также: Разметка отзывов и комментариев

www.seo-ap.ru

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

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

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

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

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

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

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

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

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

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

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

Отзывы

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

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

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

Мероприятия

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

Товары

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

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

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

Полезные инструменты

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

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

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

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

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

siteclinic.ru

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

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

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

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

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

1. itemscope нужен только для того, чтобы показать поисковому боту, что на странице описывается определенный объект.
2. itemtype всегда идет рядом с itemscope и нужен для того, чтобы показать поисковому боту тип объекта (в данном случае, это Movie). Полный список объектов можно посмотреть по ссылке.

3. 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). При этом, их можно указывать одновременно:

5. Теги <a> … </a> используются для указания ссылок, видных для пользователей.
6. Тег <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: и .

Стандарт семантической разметки данных в сети 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

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

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

Люди, которые отвечают за разработку и всю техническую часть таких сайтов, как Holodilnik.ru, Ozon.ru, Lenta.ru, Interfax.ru и Ivi.ru, ответили на вопросы о том, как на практике происходит внедрение микроразметки и каких результатов она позволяет добиться. А мы со своей стороны рассказали, какие типы мы бы порекомендовали таким сайтам и для чего.

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

Денис Егоров, руководитель направления интернет-маркетинга Holodilnik.ru:

На сайте holodilnik.ru мы решили внедрить сразу два типа разметки, Open Graph и Schema.org/Product. Причина такого выбора проста — один из этих типов поддерживает поисковик на «Я», а второй — поисковик на «G»:) Внедрять ее было достаточно легко, и о своем выборе нам не пришлось пожалеть.

Конечно, многие сейчас задаются вопросом, какова эффективность того или иного внедрения, в том числе и какова эффективность внедрения мироразметки — на все нужны ресурсы, которые потом должны себя оправдать. Вопрос этот, действительно, интересен. На момент внедрения мы считали микроразметку необходимым улучшением, и у нас не было цели напрямую отслеживать ее эффективность. Однако за год, прошедший с момента ее внедрения, мы получили следующее: глубина просмотра посетителей из поисковиков выросла почти в 2 раза, при этом показатель отказов снизился в 3-4 раза. Количество же достижения цели выросло на 20-30%. Согласитесь, это неплохой показатель. И хотя, конечно, мы не связываем весь этот рост только с внедрением одной лишь микроразметки, значительная доля изменения этих показателей, безусловно, ее заслуга.

Андрей Кузьмичёв, руководитель направления поисковой оптимизации Ozon.ru:

В Ozon.ru мы внедрили разметку разных стандартов, потому что каждая из них дает выигрыш в чем-то своем: микроформат hCard и Schema.org дают качественное представление в поисковых системах, а Open Graph — в социальных сетях. В общем и целом, благодаря этой разметке наши сниппеты стали более качественными и структурированными.

На достигнутом мы останавливаться не собираемся, как, видимо, и поисковые системы. Чем больше новых типов микроразметки они начинают учитывать, тем больше у магазинов становиться возможностей как-то выделиться на поиске. Так, недавно стала учитываться разметка Schema.org/Product по новой партнерской программе Яндекса для разметки товаров. Однако для некоторых категорий мы будем использовать семантическую разметку товаров совместно с программой «Товары и цены», которая пока иногда дает преимущества по скорости обновления данных о продуктах. И такая задача уже стоит у наших программистов.

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

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

Для формирования таких сниппетов нужны указанные поля name, description, price и priceCurrency:

<section itemscope itemtype="http://schema.org/Product">  <h1 itemprop="name"> массажёр Beurer MG 81 </h1>  <span itemprop="description"> Массажер Beurer MG81 - это современный, элегантный и многофункциональный прибор. Крупные массажные головки эргономичной формы выполняют глубокий вибрационный (ударный) массаж на любом участке тела. Дополнительно массируемый участок тела можно прогреть инфракрасным нагревательным элементом. Также возможно подключить 2 разные массажные насадки. Вибромассажер с инфракрасным излучателем может проводить массаж с различной интенсивностью. Вы можете проводить массаж и самостоятельно, и с помощью другого человека. Длинный сетевой шнур позволяет проводить сеанс массажа в удобном месте независимо от расположения розетки. Также у массажера удобная и не скользящая ручка для простого и надежного применения.</span>  <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">  <meta itemprop="priceCurrency" content="RUB" />  <span itemprop="price" >3320</span>  <span class="b-price__sign">руб.</span>  </span> </section> 

Большое влияние на решение о покупке оказывают отзывы. Если у вас есть отзывы, мы рекомендуем добавить специальную разметку: в Product для этого есть свойство AggregateRating, а в микроформатах есть тип hReview.

В Google на основе разметки формируются специальные сниппеты.

Для этого необходимо указать значение поля AggregateRating:

<div itemscope itemtype="http://schema.org/Product">  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">  <h1 itemprop="name"> "Смартфон Apple iPhone 6 4.7" 16Gb Space Gray</h1>  <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> 	<meta itemprop="ratingValue" content="4,3" /> 	<meta itemprop="ratingCount" content="15" /> 	<meta itemprop="bestRating" content="5" />  </span>  </div> </div> 

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

При использовании микроформата необходимо указать название организации, адрес и телефон:

<div class="TabbedPanelsContentGroup vcard">  <span class="fn org">Онлайн-мегамаркет OZON.ru</span>: год за годом  <p>Офис в Москве</p>  <div class="adr">  <p>   <span class="postal-code">125252</span>  <abbr class="country-name" title="Россия"></abbr>  <abbr class="region" title="Московская Область"></abbr>, г.  <span class="locality">Москва</span>,  <span class="street-address">Чапаевский переулок, д. 14</span>  </p>  </div>  <span class="url" title="http://www.ozon.ru"></span>  <abbr class="tel" title="+74955102727"></abbr>  <span class="geo">  <span class="latitude">  <span class="value-title" title="55.798362"></span>  </span>  <span class="longitude">  <span class="value-title" title="37.517774"></span>  </span>  </span> </div> 

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

Для формирования превью достаточно разметки названия, краткого описания и картинки.

<meta property="og:title" content="Тяжело без крокодила" /> <meta property="og:description" content="Эти стихотворения писатель-сатирик и публицист Виктор Шендерович сочинил почти тридцать лет назад. Он наблюдал, как растёт его дочка, и вспоминал собственное детство: те далёкие времена, когда телефоны были с дисками и проводами, а большущая... " /> <meta property="og:type" content="book" /> <meta property="og:url" content="http://www.labirint.ru/books/453612/" /> <meta property="og:image" content="http://img1.labirint.ru/books/453612/big.jpg" /> 

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

Разметка полей name, description, image, url нужна для формирования таблицы, а для указания цен offers.priceCurrency, offers.price.

<div itemscope itemtype="http://schema.org/ItemList">  <h1 itemprop="name"> Сковороды Rondell</h1>  <link itemprop="url" href="http://home.wikimart.ru/kitchen_one/cooking_utensils/pans/brand/RONDELL/"/>   <span itemprop="numberOfElements" class="count">{{totalModelsCount}}</span>  <span itemprop="numberOfElements" class="count">{{currentModelsCount}}</span> </div> 

Платформа «Острова» находится на стадии бета-тестирования

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

СМИ

Александр Ломакин, технический директор Lenta.ru:

В Lenta.ru мы используем три типа семантической разметки: это Open Graph, Twitter Cards и Schema.org.
С первыми двумя стандартами от Facebook и Twitter все просто — наши материалы достаточно много «шерят» и «лайкают», поэтому в социальных сетях они должны выглядеть ничуть не хуже, чем на основном сайте. С помощью разметки мы это контролируем, размечая фотографию, заголовок, и краткое описание.

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

В итоге наши материалы стали заметнее как в социальных сетях, так и в результатах выдачи поисковых систем. Но, что самое главное, мы получили дополнительный трафик. Честно говоря, я не понимаю, почему большое количество ресурсов забивают и не используют микроразметку. Ведь даже на такой большой сайт, как Lenta.ru, добавить разметку очень просто. Поэтому мы не хотим останавливаться на имеющейся разметке и в ближайшем будущем планируем внедрить еще один тип — микроформат hNews, который сделает наши материалы более читабельными в сервисах типа Readability.

Михаил Воблов, руководитель разработки Interfax.ru:

Мы задумались над внедрением микроразметки в тот момент, когда осознали важность социальных сетей, в частности, Facebook, и трафика, который от них поступает. Научиться отображать там наши материалы в удобной форме — с правильной картинкой и с нужной текстовой вставкой, — вот какая задача перед нами стояла. И она решалась при помощи Open Graph, именно поэтому этот тип стал первой внедренной разметкой на нашем сайте.

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

На сайтах СМИ содержатся страницы с разными видами контента — как текстами, так и мультимедийными материалами.

На все страницы статей, новостей и репортажей, на наш взгляд, крайне важно добавить Open Graph — как правило, на отдельные новости ссылаются и пользователи, и группы в своих постах. По тем же причинам рекомендуем использовать Twitter Cards.

<meta content="summary" property="twitter:card"> <meta content="@lentaruofficial" property="twitter:site"> <meta content="228661749" property="twitter:site:id"> <meta content="article" property="og:type"> <meta content="«Яндекс.Музыка» ввела функцию рекомендаций новых треков" property="og:title"> <meta content="http://icdn.lenta.ru/images/2014/09/17/15/20140917150310534/original_bb8b02c32aa88565e4147f7cda1bebed.jpg" property="og:image"> <meta content="«Яндекс» обновил свой музыкальный сервис, главной особенностью которого стала система персональных рекомендаций.Cистема основывается на песнях, которые слушают друзья пользователя по «ВКонтакте» и Facebook, также рассказывает о музыкальных новинках, например, звучащих в блокбастерах или на фестивалях." property="og:description"> 

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

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

<div itemscope itemtype="http://schema.org/Article">  <h1 itemprop="name">Детский театральный фестиваль "Большая перемена" открывается в Москве</h1>  <div itemprop="description">Традиционно программа фестиваля состоит из основной и специальной программ. Если основную афишу формируют из зарубежных и российских спектаклей, то в дополнительную входят мастер-классы и встречи, тема которых - театральные технологии и искусство для детей.</div> </div> 

Платформа «Острова» находится на стадии бета-тестирования

На страницу с контактами можно добавить разметку Organization или hCard.

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

habr.com