Schema org микроразметка

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

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

Существует два основных вида микроразметки, которые используют поисковые системы Яндекс и 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

Зачем нужна микроразметка

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

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

Одними из самых популярным форматов контента являются:

• Адреса и организации.
• Видео.
• Часто задаваемые вопросы.
• Сервисы отзывов.
• Софт.
• Банки рефератов и докладов.
• Рецепты.
• Интернет-магазины.
• Картинки.
• Статьи блога.

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

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

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

Атрибуты микроразметки

• itemscope — указывает роботу, что в коде странице заключено описание сущности.
• itemtype — указывает на тип сущности. Полный список приведен на официальном сайте микроразметки Schema.org.
• itemprop — перечисляет свойства используемой сущности. Например, если описываемая сущность — фильм, то в свойствах указывается название, имя режиссера, жанр, ссылка на трейлер и т. д.

Теги микроразметки

• <div>…</div>— в эти теги заключается описание сущности.
• <span>…</span> — внутри этих тегов прописываются словесные свойства сущности.
• <link>с атрибутом href — это сочетание используется для перечислений и ссылок на страницы, которые не видны обычным пользователям.
• <time>…</time>  с атрибутом datetime — указывают дату и время.
• <a>…</a> — теги указывают на ссылки, видимые пользователем.
• <meta> — тег используется, чтобы скрыть информацию от пользователя. Не используйте его слишком часто, Google не одобряет это.

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

Как разметить контент на сайте с помощью Schema

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

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

В открывающем теге добавляем атрибут itemscope. Это означает, что данный тег содержит некую сущность. Обозначим тип сущности атрибутом itemtype, сразу после itemscope. Названия типов имеют вид URL. Обозначение типов микроданных можно найти на официальном сайте Schema.org. У нас же название типа http://schema.org/Article.

После объявления сущности, обозначим ее свойства. Синтаксис свойств сущностей можно найти на официальном сайте Schema.org. Для объявления свойств используется атрибут itemprop. Аналогично находим на странице тег, содержащий заголовок нашей статьи. Теперь добавим атрибут с названием свойства.  У нас название свойства — заголовок name.

Аналогично объявляются все свойства сущности. Ниже перечислим:

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

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

semantica.in

Схема разметки для раздела «Контакты» (schema.org LocalBusiness)

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

<div itemscope itemtype="http://schema.org/LocalBusiness">     <p itemprop="name">Дизайн студия</p>  <p itemprop="description">Веб студия занимается разработкой сайтов на 1С-Битрикс</p>     <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">  <p>Адрес:	  <span itemprop="postalCode">119019</span>,   <span itemprop="addressCountry">Россия</span>,   <span itemprop="addressRegion">Московская область</span>,   <span itemprop="addressLocality">Москва</span>,   <span itemprop="streetAddress">Красная площадь, д.  

 lt;/span>  </p>  </div>     <p>Телефоны:	  <span itemprop="telephone">8(495)123-45-67</span>,   <span itemprop="telephone">8(499)123-45-67</span>   </p>     <p>Факс:  <span itemprop="faxNumber">8(495)123-45-67</span>   </p>     <p>E-mail:  <a itemprop="email" href="mailto:email@site.ru">email@site.ru</a>   </p>     <p>Адрес сайта:  <a href="http://site.ru" itemprop="url">site.ru</a>   </p>     <img itemprop="logo" src="http://site.ru/Images/logo.png">     <div>Время работы:    <time itemprop="openingHours" datetime="Mo-Fr 9:00−20:00">С Понедельника по Пятницу 9-20</time>,    <time itemprop="openingHours" datetime="St,Sn">Суббота, Воскресенье круглосуточно</time>   </div>     <div itemprop="geo" itemscope="" itemtype="http://schema.org/GeoCoordinates">    <meta itemprop="latitude" content="55.7537523">    <meta itemprop="longitude" content="37.6225168">   </div>     <p>ИНН:  <span itemprop="taxID">1234567890</span>   </p>     </div>  

Схема для раздела «О компании» (schema.org Organization)

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

<div itemscope="" itemtype="http://schema.org/Organization">  <p itemprop="name">Наименование организации</p>    Контактная информация:   <div itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">  <p>Почтовый адрес:  <span itemprop="streetAddress">номер дома, улица</span>  <span itemprop="postalCode">почтовый индекс</span>  <span itemprop="addressLocality">город, страна</span>  </p>  </div>    <p>Телефон:  <span itemprop="telephone">контактный телефон</span>,  Факс:<span itemprop="faxNumber">факс</span>,  E-mail: <span itemprop="email">корпоративный e-mail</span>  </p>  </div>  

Микроразметка для раздела «Статьи» (schema.org/Article)

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

<div itemscope itemtype="http://schema.org/BlogPosting">  <link itemprop="mainEntityOfPage" itemscope href="Ссылка" />  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">  <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">  <img alt="Логотип сайта" itemprop="image url" src="Ссылка на логотип сайта"/>  <meta itemprop="width" content="размер в пикселях">  <meta itemprop="height" content="размер в пикселях">  </div>  <meta itemprop="telephone" content="Телефон">  <meta itemprop="address" content="Адрес">  <meta itemprop="name" content="Название">  </div>  <meta itemprop="datePublished" content="1111">  <meta itemprop="dateModified" content="Дата последнего редактирования статьи">  <span itemprop="author" itemscope itemtype="http://schema.org/Person">  <span itemprop="name">Автор статьи</span>  </span>  <div itemprop="articleBody">  <h1 itemprop="headline">Заголовок Вашей статьи</h1>  <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">  <img itemprop="image url" alt="Описание изображения" width="размеры в пикселях" height="размеры в пикселях" src="Ссылка на изображение"/>  <meta itemprop="width" content="размеры в пикселях">  <meta itemprop="height" content="размеры в пикселях">  </span>  <p>Тут идет основной текст статьи, который можно разбить на абзацы. Разрешено использование всех html тэгов разметки.</p>  </div>  </div>  

Микроразметка для «Картинок» (schema.org/ImageObject)

Существует отдельный поиск по изображениям, который дает дополнительную возможность увеличить трафик на сайт, если пользователь ищет товар по изображению. Атрибут itemprop=»image» позволяет роботам быстро распознавать информацию о картинках. Достаточно будет указать ссылку на изображение, описание, название картинки, подпись, размеры изображения.

<div itemscope itemtype="http://schema.org/ImageObject">  <h2 itemprop="name">название картинки</h2>  <img src="https://www.seo.ru/images.jpg" itemprop="contentUrl" />  <p itemprop="description">описание картинки</p>  </div>  

Микроразметка для раздела «Товарные страницы» (shema.org Product)

Для разметки товарных страниц используются схемы Product и Offer или AggregateOffer в Schema.org/Product. Таким образом информация ваших продуктовых страниц может быть представлена в виде структурированных сниппетов с описанием товара и ценой в выдаче Яндекса. Разметив эту разметку на странице сайта, можно привлечь больше потенциальных покупателей.

Вариант 1

<div itemscope itemtype="http://schema.org/Product">  <span itemprop="name">Кровать Мелисса с мягкой спинкой</span>  <span itemprop="brand">Компания диваны</span>  <img itemprop="image" src="https://www.iseo.ru/bitrix/templates/iseo/images/melissa.png" />  <span itemprop="description">Кровать Мелисса с мягкой спинкой и гарантией производителя</span>    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">  <meta itemprop="priceCurrency" content="RUB" />  <span itemprop="price">6793</span>  </div>  </div>  

Вариант 2

<div itemscope itemtype="http://schema.org/Product">  <span itemprop="name">Плюшевый еж "Уф Уф"</span>  <span itemprop="brand">Фабрика плюшевых ежей "С иголочки"</span>  <span itemprop="model">Номер модели 964893NM</span>  <img itemprop="image" src="Ссылка на изображение ежа" />  <span itemprop="description">Текстовое описание товара.</span>    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">  <meta itemprop="priceCurrency" content="RUB" />  <span itemprop="price">Стоимость товара</span>  <span itemprop="seller">Продавец товара</span>  </div>    </div>  

Микроразметка для раздела «Отзывы» (schema.org/Review)

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

<div itemscope itemtype="http://schema.org/Review">   <h2 itemprop="name"><a href="http://example.com/review?10231" itemprop="url">Русская кухня в изгнании</a></h2>   <div>Отзыв написал <span itemprop="author" itemscope itemtype="http://schema.org/Person">   <span itemprop="name">   <a itemprop="url" href="http://example.com/users/vasya">Вася Пупкин</a>   </span>   </span>   <meta itemprop="datePublished" content="2012-07-15" />   15 июля 2012.   </div>   <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">   <meta itemprop="worstRating" content="0"/>   <p>Оценка: <span itemprop="ratingValue">9</span> из <span itemprop="bestRating">10</span>.</p>   </div>   <div itemprop="pro">Бесплатная стоянка, прекрасная детская комната и предупредительные официанты.</div>   <div itemprop="contra">Большой и шумный некурящий зал.</div>   <div itemprop="reviewBody">   <p>Заказ был готов сравнительно быстро, а напитки приготовили практически сразу.   Обслуживание на уровне, хотя грязная посуда иногда застаивалась.</p>   <p>Рекомендую русскую кухню, особенно супы.</p>   </div>   <div>Автор посетил заведение <meta itemprop="dateVisited" content="2012-07-10">10 июля 2012.</div>   <div>Оценки характеристик ресторана:   <ul>   <li itemprop="tag" itemscope itemtype="http://schema.org/Rating">   <link itemprop="ratingTarget" href="https://webmaster.yandex.ru/vocabularies/ReviewBusiness/Cuisine.xml">   Кухня: <span itemprop="ratingValue">5</span> из <span itemprop="bestRating">5</span>;   </li>   <li itemprop="tag" itemscope itemtype="http://schema.org/Rating">   <link itemprop="ratingTarget" href="https://webmaster.yandex.ru/vocabularies/ReviewBusiness/Hall.xml">   Зал: <span itemprop="ratingValue">3</span> из <span itemprop="bestRating">5</span>;   </li>   </ul>   </div>   <div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Hotel">   <h3>Информация о ресторане</h3>   <p>Название: <span itemprop="name">Заграница</span></p>   <p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">Адрес:   <span itemprop="addressLocality">Москва</span>, <span itemprop="streetAddress">Тверская, 7</span>.   </p>   <p>Телефон: <span itemprop="telephone">123-45-12</span>.</p>   <p>Сайт ресторана: <a itemprop="url" href="http://zagranica.ru">http://zagranica.ru</a></p>   <p>Электронный адрес администрации:   <a itemprop="email" href="mailto:hostess@zagranica.ru">hostess@zagranica.ru</a>   </p>   </div>  </div>  

Микроразметка для раздела «О себе» (schema.org/Person)

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

Вариант 1

<div itemscope itemtype="http://schema.org/Person">   <span itemprop="name">Jane Doe</span>   <img src="janedoe.jpg" itemprop="image" />   <span itemprop="jobTitle">Professor</span>     <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">   <span itemprop="streetAddress">   20341 Whitworth Institute   405 N. Whitworth   </span>   <span itemprop="addressLocality">Seattle</span>,   <span itemprop="addressRegion">WA</span>   <span itemprop="postalCode">98052</span>   </div>     <span itemprop="telephone">(425) 123-4567</span>   <a href="mailto:jane-doe@xyz.edu" itemprop="email">   jane-doe@xyz.edu</a>   Jane's home page:   <a href="http://www.janedoe.com" itemprop="url">janedoe.com</a>   Graduate students:   <a href="http://www.xyz.edu/students/alicejones.html" itemprop="colleague">   Alice Jones</a>   <a href="http://www.xyz.edu/students/bobsmith.html" itemprop="colleague">   Bob Smith</a>  </div>  

Вариант 2

<div itemscope itemtype="http://schema.org/Person">   <p itemprop="name">Алексей</p> <!-- Имя -->   <p itemprop="additionalName"> Владимирович</p> <!-- Отчество -->   <p itemprop="familyName"> Петров</p> <!-- Фамилия -->   <p itemprop="jobTitle">веб-мастер</p> <!-- Должность -->   <div>   <a href="http://site.ru/about/" itemprop="sameAs">site.ru/about/</a>, <!-- Адрес оффициальной веб-страницы (вроде wikipedia), множественное -->   <a href="http://site2.ru/users/who/" itemprop="sameAs">site2.ru/users/who/</a> <!-- Адрес оффициальной веб-страницы (вроде wikipedia), множественное -->   </div>   <div>   <a href="http://ok.ru/who" itemprop="url">ok.ru/who</a>, <!-- Адрес веб-страницы, множественное -->   <a href="http://twitter.com/who" itemprop="url">twitter.com/who</a>, <!-- Адрес веб-страницы, множественное -->   <a href="http://vk.ru/who" itemprop="url">vk.ru/who</a> <!-- Адрес веб-страницы, множественное -->   </div>   <div>   <span itemprop="telephone">8(495)123-45-67</span>, <!-- телефон, множественное -->   <span itemprop="telephone">+7(926)12-34-567</span> <!-- телефон, множественное -->   </div>   <div>   <span itemprop="email">email1@site.ru</span>, <!-- e-mail, множественное -->   <span itemprop="email">email2@site.ru</span> <!-- e-mail, множественное -->   </div>  </div>  

Микроразметка шапки сайта (schema.org/WPHeader)

Данная разметка описывает информацию о сайте.

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

Микроразметка для меню сайта (schema.org/SiteNavigationElement)

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

<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>  

Микроразметка боковой колонки сайта (schema.org/WPSideBar)

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

<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>  

Микроразметка для подвала сайта (schema.org/WPFooter (подвал, footer)

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

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

---

miditator.ru

Перевод осуществляется в гордом одиночестве и на голом энтузиазме, так что имейте терпение, а если есть возможность — можете помочь 🙂

Все свои замечания или замеченные неточности в переводе пишите сюда

Для тех кто не понял о чем вообще все это — вот определение Яндекса:

Schema.org – это стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года. 
Цель семантической разметки – сделать интернет более понятным, структурированным и облегчить поисковым системам и специальным программам извлечение и обработку информации для удобного её представления в результатах поиска. 
Яндекс с осени 2011 года понимает этот формат и поддерживает его в некоторых партнерских программах.
Разметка происходит непосредственно в HTML-коде страниц с помощью специальных атрибутов и не требует создания отдельных экспортных файлов. 

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

---

Это сайт, который содержит коллекцию схем (html-тегов), которые вебмастера могут использовать для разметки своих страниц способами, признаными крупнейшими поисковыми системами, такими как Bing, Google, Yahoo! и Яндекс, которые полагаются на эту разметку для улучшения отображения результатов поиска, делая процесс поиска правильных веб-страниц проще для людей.

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

Этот общий словарь облегчит вебмастерам выбор правильной схемы разметки  и поможет получить максимум выгоды из приложенных усилий. Так, воодушевленные sitemaps.org, Bing, Google and Yahoo! собрались вместе чтобы создать для вебмастеров эту коллекцию схем.

Ну что ж, начнем!

Либо сразу можете перейти к поиску необходимого типа

ruschema.org

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

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

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

• Микроданные. Используется с HTML и Schema.org для описания специальных данных. Например, если это фильм, то мы можем специально прописать его название, жанр, режиссера, актеров, рейтинг и т.п.

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

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

Отметим, что в данной статье мы сделаем акцент на микроданных и словаря Schema.org.

Описываем данные с помощью Schema.org

Теперь, когда Вы примерно представляете, что такое микроразметка, начнем углубляться в детали. Для начала поговорим о том, как описать данные с помощью Schema.org. Почему мы выбрали Schema.org и микроданные? Дело в том, что это наиболее популярный, надежный и эффективный способ микроразметки. Он не так сложен как RDFa и, к тому же, рекомендован Google.

Микроформаты и Schema.org

Schema.org — это словарь тегов для разметки микроданных в HTML5, в котором также присутствуют различные сущности, атрибуты и их свойства. На данном этапе, поговорим о тех основных атрибутах: itemscope, itemtype и itemprop.

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

• Itemtype. Этот атрибут работает в паре с itemscope и определяет тип выделенной сущности с помощью иерархии типов в Schema.org.

• Itemprop. Этот атрибут позволяет описать дополнительную информацию о сущности. Например, речь идет о книге, то это может быть название, автор, жанр, год издания и т.п.

Теперь рассмотрим вышеописанное на конкретном примере. Предположим, что Вы хотите внедрить микроразметку на странице уже упомянутого нами фильма “Властелин колец: Возвращение короля”. Скорее всего, часть HTML-кода без микроразметки выглядит примерно так:

<div>

       <h1>Властелин колец: Возвращение короля</h1>

       <span>Режиссер: Питер Джексон</span>

       <span>Фэнтези</span>

       <a href=”ссылка”>Смотреть фильм</a>

</div>

Выделим блок, который посвящен фильму, с помощью itemscope.

<div itemscope>

       <h1>Властелин колец: Возвращение короля</h1>

       <span>Режиссер: Питер Джексон</span>

       <span>Фэнтези</span>

       <a href=”ссылка”>Смотреть фильм</a>

</div>

Теперь поисковой робот будет понимать, что всю информацию между <div> и </div> надо рассматривать как одно целое.

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

<div itemscope itemtype=”http://schema.org/Movie”>

       <h1>Властелин колец: Возвращение короля</h1>

       <span>Режиссер: Питер Джексон</span>

       <span>Фэнтези</span>

       <a href=”ссылка”>Смотреть фильм</a>

</div>

Далее сообщаем поисковым ботам больше информации о фильме с помощью тега itemprop. В данном примере мы можем указать микроразметку названия фильма, режиссера, жанра, а также URL.

<div itemscope itemtype=”http://schema.org/Movie”>

       <h1 itemprop=”name”>Властелин колец: Возвращение короля</h1>

       <span>Режиссер: <span itemprop=”director”>Питер Джексон</span></span>

       <span itemprop=”genre”>Фэнтези</span>

       <a href=”ссылка” itemprop=”movie”>Смотреть фильм</a>

</div>

Обратите внимание, что тегами с атрибутом itemprop в большинстве случаев надо оборачивать конкретный текст. В примере выше мы добавили дополнительную пару тегов <span>, чтобы поисковые роботы не рассматривали слово “режиссер” в качестве самого режиссера.

Что еще нужно знать о микроданных и Schema.org?

• в Schema.org есть много схем с заданными свойствами (о самых популярных из них мы поговорим ниже). Их количество постепенно увеличивается.

• основных свойств четыре (в реальности их гораздо больше — см. свойства Thing): name, description, URL и image. Дочерние сущности и схемы всегда получают свойства “родителей”.

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

• при разметке надо всегда использовать ожидаемый тип и текст, обращайте внимание на вложенные сущности, дочерние и родительские типы. Например, у Вас есть цепочка Thing — Place — TouristAttraction. Задавая схему TouristAttraction, будьте готовы использовать свойства, принятые в данной цепочке. Если этого не делать, то поисковые системы просто не смогут “понять”, что Вы им хотели сказать.

• старайтесь использовать отдельную схему для каждой конкретной ссылки. Например, у Вас есть список товаров на странице. Убедитесь, что каждый из них будет помечен, как Product, а каждая ссылка на него, как URL.

Польза микроразметки и поисковая выдача. Расширенные спиппеты

Микроразметка помогает поисковым системам не только лучше отображать, но и лучше понимать, размещенную на странице информацию. Именно микроразметка дает поисковым роботам подробную “карту” того, как следует обработать и проиндексировать информацию. Именно микроразметка, в конечном счете, позволяет значительно улучшить релевантность страницы как для поисковых систем, так и для пользователей. Следовательно, улучшается и поисковая выдача. Считается, что микроразметка может увеличить поступление трафика на сайт примерно на 30%. Согласитесь, что такая поисковая оптимизация — хорошее решение!

Читайте также: 7 признаков SEO-самоубийцы: ошибки при продвижении сайта

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

Сайт в выдаче без микроразметки

Сайт в выдаче с микроразметкой

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

Расширенный сниппет для Google

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

Создать расширенный сниппет для Google можно:

• выбрав формат разметки (в нашем случае это микроданные);

• разметив содержание (см. примеры ниже);

• проверив разметку с помощью специальных валидаторов (о них речь то же пойдет ниже).

Пример кода расширенного сниппета для Google

Пример расширенного сниппета для Google  в выдаче

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

Расширенный сниппет для Yandex

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

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

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

Пример

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

Пример

Популярные схемы микроразметки

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

Итак, какие же схемы микроразметки являются самыми популярными и могут помочь SEO? Если верить данным, предоставленным компанией SimilarTech, то получается, что самыми популярными в мире являются схемы:

• Offer Schema

• WebPage Schema

• AggregateRating Schema

• Product Schema

• Review Schema

• Rating Schema

• SearchAction Schema

• MobileApplication Schema

• WebSite Schema

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

Offer Schema

На русский язык “offer” переводится “предложение”. Фактически, суть Offer Schema состоит в предложении чего-то. Например, сайт предлагает купить такую-то книгу или фильм, арендовать квартиру, посмотреть сериал онлайн, отремонтировать машину и т.п. Одно из таких предложений Вы можете увидеть на расширенном сниппете ниже.

Пример сниппета

Offer Schema является дочерней сущностью Intangible, которая, в свою очередь, закреплена за самой общей сущностью Thing.

WebPage Schema

WebPage Schema, как можно догадаться, является схемой микроразметки для отдельной веб-страницы. В Schema.org предполагается, что эта схема может “захватывать” некоторые присущие странице свойства (например, breadcrumb — хлебные крошки). Даже если свойство не выделено в блоке микроразметки с помощью itemscope, но находится на странице, то поисковые боты все равно “поймут”, что оно относится к блоку. Отметим, однако, что лучше задавать свойства отдельно.

WebPage Schema является дочерней сущностью CreativeWork, которая, в свою очередь, закреплена за самой общей сущностью Thing.

AggregateRating Schema

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

Пример сниппета

AggregateRating Schema является дочерней сущностью Rating.

Product Schema

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

пример сниппета

Product Schema является дочерней сущностью Thing.

Review Schema

Review Schema — это схема для информативного отображения отзывов на товар, услугу, фильм, альбом, магазин, ресторан и т.п. Смотри расширенный сниппет ниже.

пример сниппета

Review Schema является дочерней сущностью CreativeWork, которая, в свою очередь, закреплена за самой общей сущностью Thing.

Rating Schema

Rating Schema позволяет отобразить рейтинг сайта или веб-страницы в цифровом выражении. Например, рейтинг такого-то ресторана — 3,5 звезды, а такого-то магазина — 4 звезды. В отличие от AggregateRating, Rating вычисляется только на основе оценок и без учета отзывов.

Rating Schema является дочерней сущностью Intangible, которая, в свою очередь, закреплена за самой общей сущностью Thing. Rating — родительская схема для AggregateRating Schema.

SearchAction Schema

SearchAction Schema позволяет совершить поиск по ресурсу прямо из выдачи. Топовые сайты в США делают акцент именно на этой схеме (по данным SimilarTech). Смотри расширенный сниппет ниже.

пример сниппета

SearchAction Schema является дочерней сущностью Action, которая, в свою очередь, закреплена за самой общей сущностью Thing. SearchAction — родительская схема для FindAction Schema.

MobileApplication Schema

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

Mobile Application Schema является дочерней сущностью SoftwareApplication, которая, в свою очередь, является дочерней сущность CreativeWork, а та закреплена за Thing.

WebSite Schema

WebSite Schema — схема для отображения набора связанных веб-страниц или других элементов, которые размещены на едином веб-домене и имеют один URL.

WebSite Schema является дочерней сущностью CreativeWork, которая, в свою очередь, закреплена за самой общей сущностью Thing.

Валидация и проверка микроразметки на Schema.org

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

• Structured Data Testing Tool. Этот инструмент от Google прост в использовании и позволяет довольно быстро проверить разметку как на целом сайте, так и в части HTML-кода.

• Валидатор микроразметки. Этот инструмент от Yandex работает так же, как и вышеописанный Structured Data Testing Tool: введите URL сайта или часть HTML-кода, нажмите кнопку “Проверить” и наслаждайтесь.

• Structured Data Linter. Этот инструмент в целом похож на два вышеописанных. Единственным отличием является возможность загружать файл с HTML-кодом сайта для анализа.

Надеемся, что эти инструменты принесут Вам пользу.

Вывод

Итак, что можно сказать напоследок? Микроразметка уже здесь, ей активно пользуются все больше и больше вебмастеров и SEO специалистов для более грамотной и эффективной поисковой оптимизации. Микроразметка хороша для всех: пользователь получает доступ к более релевантной и структурированной информации; поисковые боты лучше “читают” и индексируют сайт; вебмастер и SEO специалист получают удовольствие от возросшего трафика и большего количества правильных посетителей.

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

С чего начать? Если Вы читаете данную статью, то, думаем, очевидно, что начать надо с 9 схем микроразметки, которые были описаны выше. Если у Вас нет времени на все 9, то остановитесь хотя бы на самых нужных для Вашего бизнеса. Например, если Вы держите Интернет-магазин, то логичнее будет начать с Offer, Product, Review, Rating и SearchAction. Если Вы владеете корпоративным сайтом, то начните с WebSite и WebPage. В общем, решать Вам.

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

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

singree.com

Как проверить "правильность" микроразметки Schema.org?

Для проверки валидации ("правильности") микроразметки предназначены специальные сервисы, которые были разработаны поисковыми системами. Мы будем в данной статье проверять микроразметку для поисковой системы Yandex и Google.

Вот ссылки на два сервиса проверки валидации микроразметки Schema.org:

• Валидатор микроразметки от Google
• Валидатор микроразметки от Yandex

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

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

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

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

Есть два варианта проверки валидации страницы:

1. С помощью прямой вставки HTML кода
2. С помощью вставки URL адреса страницы, которую необходимо проверить

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

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

После проверки в валидаторе Google появится слева код Вашей HTML страницы, а справа — какая микроразметка там присутствует и есть ли там ошибки:

С валидатором Google я думаю все понятно. Перейдем к валидатору от Yandex.

Когда Вы зайдете на сайт с валидатором микроразметки от Yandex, Вы увидите несколько иную картину, но смысл там остается тот же:

Здесь интерфейс немного проще и опять же есть два варианта проверки Вашего HTML кода: с помощью вставки исходного кода страницы, либо с помощью вставки лишь URL необходимой страницы.

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

Валидатор Yandex и Google будут давать Вам рекомендации сразу на русском языке. Но и этого бывает мало, потому что у всех ошибки разные и зависят от конкретного контекста страницы и HTML структуры.

Где проверять свою микроразметку Вы сейчас знаете. Поэтому немедленно перейдите на свой сайт, скопируйте URL ссылку первой же статьи и проверьте ее на валидацию.

Очень много ошибок? Не волнуйтесь, все можно исправить. Главное разобраться в этом постепенно исправить все ошибки.

Шаг 1. Что необходимо разметить на странице?

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

Поэтому первым шагом необходимо определиться с основным шаблоном и правильно его подготовить. А у же потом переносит на реальный сайт.

В данной статье я покажу как сделать пример для сайта, под управлением CMS WordPress. А на данной CMS чаще всего создают блоги. Поэтому будем писать разметку для такого типа страниц, как "Статья".

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

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

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

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

Шаг 2. Формируем шаблон микроразметки

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

Основная суть микроразметки (технически): добавить к необходимым тегам дополнительные атрибуты. Иногда добавить дополнительные теги для структуры.

Без прелюдий перейдем сразу к делу. После многочисленных попыток сделать микроразметку Schema.org валидной для Google и Яндекса получилась следующая структура:

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

• Строка 1: объявляем тип контента, который будет размечен.
• Строка 5: здесь указываем URL адрес страницы, на которой сейчас находится пользователь, то есть адрес текущей статьи.
• Строка с 8 по 18: небольшая подструктура, в которой необходимо указать более подробно сведения о сайте: логотип (адрес до изображения и его размеры), телефон, адрес и название компании (сайта).
• Строка 9 по 13: еще одна подструктура с выводом изображения, то есть логотипа. Все изображения, которые необходимы для микроразметки необходимо выводить именно в такой структуре, где помимо адреса до изображения в meta-тегах еще указывается информация о его размерах.
• Строка 14: указываем телефон, если он есть.
• Строка 15: реальный адрес, если работаете в офисе, например.
• Строка 16: здесь пишем название компании.
• Строка 21: дата публикации статьи. Здесь будьте очень внимательны, потому что ее указывать необходимо в специальном формате: "ГОД-МЕСЯЦ-ДЕНЬ". И обязательно разделитель должен быть знак "—".
• Строка 24: дата последнего изменения статьи, чтобы подсказать поисковику какую из статей необходимо переиндексировать, если она была изменена в последнее время. Здесь также действуют правила из предыдущего пункта.
• Строка с 27 по 29: указываем в специальной подструктуре информацию об авторе статьи.
• Строка 32 по 45: основная контентная часть Вашей статьи, внутри которой необходимо отметить несколько элементов:
  • Строка 35: заголовок Вашей статьи. Его помечаем следующим образом, добавляя к тегу заголовка свойство — itemprop="headline";
  • Строка 38 по 42: как Вы уже видели ранее, здесь располагается подструктура с изображением. Но в данном случае здесь мы указываем на главное изображение в статье;

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

Если Вы разобрались в структуре микроразметки Schema.org для статьи, то проделали уже 80% работы. Осталось малость, но эта "малость" требует технических знаний. Потому что сейчас необходимо перенести данную структуру на реальный работающий сайт.

Шаг 3. Внедряем микроразметку Schema.org на реальный сайт

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

1. Начинайте разметку с основных структур. То есть для начала разметьте основную сущность, внутри которой находятся все остальные элементы. Поэтому сначала необходимо найти блок, в котором содержится все: изображение, автор, дата и так далее;
2. Далее займитесь разметкой блока "Organization". Потому что он не меняется динамически. Его необходимо один раз сделать и поместить внутрь сущности "BlogPosting". Данный блок затем скройте с помощью CSS стилей.
3. Затем необходимо разметить дату публикации и дату последнего изменения. Сделать это несложно. В каждой CMS есть своя функция, которая отвечает за это. Так как это мета-теги, то скрывать ничего не нужно. Например в WordPress этот фрагмент микроразметки будет выглядеть следующим образом:
4. Далее отметьте подструктуру "articleBody". Именно внутри нее Вам необходимо будет указать заголовок и главное изображение статьи.
5. И последним шагом исправьте разметку главного изображения в статье. Так как это, чаще всего, сделать технически сложнее всего, то оставьте данный элемент на концовку.

Содержание

• Как проверить "правильность" микроразметки Schema.org?
• Как пользоваться валидаторами микроразметки?
• Шаг 1. Что необходимо разметить на странице?
• Шаг 2. Формируем шаблон микроразметки
• Шаг 3. Внедряем микроразметку Schema.org на реальный сайт

Вывод

Многие, возможно, начнут возмущаться, что нет готового решения, которого все так ждали. Все хотят волшебную таблетку: "скопировал->вставил". Такого не будет, если Вы хотите реальных и ощутимых результатов. У Вас индивидуальный шаблон, у которого своя собственная структура. Поэтому наберитесь терпения и разберетесь в том, как устроена микроразметка Schema.org.

Что касается технической части, то скажу вот что: либо отдайте это дело профессионалу, либо самостоятельно разберитесь в том, что я описал в данной статье

www.sitehere.ru