Микроразметка.ру

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

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

Существует несколько языков разметки, самые известные и широко используемые это Open Graph и Schema.org.

Мы будем разбирать эти языки и попробуем «разложить всё по полочкам».

Сервисы сайта:

1. Валидаторы микроразметки. Представляем вашему вниманию многолинковые сервисы-валидаторы микроразметки для поисковых систем Яндекс и Google. Отличие от поисковых валидаторов состоит в том, что тут допускается одновременная проверка нескольких урлов — до 30 для незарегистрированных пользователей и до 300 для зарегистрированных (также есть возможность загрузки списка ссылок из карты сайта xml). Для получения расширенного доступа, оставьте заявку в группе Facebook.
2. Генераторы кода разметки Schema.org. Представляем генератор кода для товаров. В последующем будут добавлены генераторы для всех видов микроразметки.
3. Выгрузка ссылок их XML-карты. Появилась возможность выгрузки ссылок из карты сайта для незарегистрированных пользователей.
4. Многоссылочная визуальная проверка разметки в поисковой выдаче Яндекса. Проверьте, как отображаются размеченные странице в выдаче Yandex.ru. Второй колонкой будет отображаться результат выдачи без разметки (из XML).

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

Микроразметка позволяет точно указать поисковому роботу точную информацию о сайте, продукте и т.п. В этом плане она чем-то похожа на теги <title> и <h1>, поскольку они также четко отвечают за заголовок страницы и ни за что более. Делая микроразметку мы оптимизируем семантику контента сайта, тем самым улучшая в целом внутреннюю оптимизацию сайта. Например, с помощью специальных атрибутов (о них чуть ниже) можно точно указать в html-коде где располагается:

• Информация о товаре: цвет, цена, название, производитель, фото товара, отзывы, описание, рейтинг и т.п.
• Информация о фильме: год выхода, название, актеры, описание, рейтинг
• Адрес компании и ее телефон
• и т.д.

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

---

Как сделать микроразметку Schema

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

Пример 1. Контакты с микроразметкой Schema

Приведем пример, как правильно оформить блок с контактами на сайте с применением микроразметки. Исходный html-код без разметки:

<divclass=»info»> <divclass=»name»>Название организации — «Слоник»</div> <divclass=»adres»>Адрес — Москва, ул.Пушкина, 1</div> <divclass=»tel»>Телефоны: +7(495)111-2222</div> <divclass=»faks»>Факс: +7(495)212-1221</div> </div>

С разметкой согласно Schema код будет следующим:

<divitemscopeitemtype=»http://schema.org/Organization» class=»info»> <divclass=»name»>Название организации — «<spanitemprop=»name»>Слоник</span>»</div> <divitemprop=»address» itemscopeitemtype=»http://schema.org/PostalAddress» class=»adres»>Адрес — <spanitemprop=»addressLocality»>Москва</span>, <spanitemprop=»streetAddress»>ул.Пушкина, 1</span> </div> <divclass=»tel»>Телефоны: <spanitemprop=»telephone»>+7(495)111-2222/span</div> <divclass=»faks»>Факс: <spanitemprop=»faxNumber»>+7(495)212-1221/span</div> </div>

---

---

Пояснение к примеру

С помощью внедрения специальных атрибутов itemscope, itemtype и itemprop мы четко разметили: название организации, город, улицу и дом, телефон и факс.

Атрибут itemscope написанный в теге <div> означает, что мы описываем некую сущность. Тип сущности указывается с помощью атрибута itemtype:

<divitemscopeitemtype=»http://schema.org/Organization» class=»info»> … Описание сущности … </div>

Вместо Organization мы могли описывать и другие сущности. Например, продукт, товар, фильм, рецепт.

Атрибут itemprop=»» пишем в тегах <span>. У него есть множество подклассов. В нашем примере:

• itemprop=»name» — название организации
• itemprop=»addressLocality» — город
• itemprop=»telephone» — телефон
• itemprop=»faxNumber» — факс

---

Пример 2. Микроразметка с оформлением единицы товара

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

<divclass=»tovar»> <divclass=»nazvanie»>Наименование товара</div> <divclass=»foto»><imgsrc=»https://steptosleep.ru/wp-content/uploads/2018/06/96838.jpg» /></div> <divclass=»tovar_info»> <divclass=»proizvoditel»>Производитель</div> <divclass=»price»>Стоимость: 5000 руб</div> <divclass=»desc»>Описание товара</div> </div> </div>

С микроразметкой согласно Schema код будет следующим:

<divitemscopeitemtype=»http://schema.org/Product» class=»tovar»> <divitemprop=»name» class=»nazvanie»>Наименование товара</div> <divclass=»foto»><imgitemprop=»image» src=»https://steptosleep.ru/wp-content/uploads/2018/06/96838.jpg» /></div> <divitemprop=»offers» itemscopeitemtype=»http://schema.org/Offers» class=»tovar_info»> <divitemprop=»brand» class=»proizvoditel»>Производитель</div> <divclass=»price»>Стоимость: <spanitemprop=»price»>5000</span> <spanitemprop=»priceCurrency»>руб</span></div> <divitemprop=»description» class=»desc»>Описание товара</div> <!— Можно также указать рейтинг товара: —> <divitemprop=»aggregateRating» itemscopeitemtype=»http://schema.org/AggregateRating»> <divitemprop=»ratingValue»>Средняя оценка</div> <divitemprop=»bestRating»>Максимальная оценка</div> <divitemprop=»worstRating»>Минимальное оценка</div> <divitemprop=»ratingCount»>Количество голосов</div> </div> </div> </div>

Пояснение к примеру

Как и в первом примере, с помощью сущностей itemscope, itemtype и itemprop мы задаем важнейшие параметры товара: название, цена, фото, описание и т.п.

Пояснения к атрибуту itemprop:

• itemprop=»name» — название товара
• itemprop=»image» — изображение товара
• itemprop=»offers» — указание, что будет описывать сущность (товар, предложение)
• itemprop=»brand» — производитель товара
• itemprop=»price» — стоимость товара
• itemprop=»priceCurrency» — валюта, в которой указана стоимость
• itemprop=»description» — описание товара

---

---

Примечание

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

<divitemscopeitemtype=»http://schema.org/Product» class=»tovar»> <divclass=»nazvanie»>Наименование товара</div> <metaitemprop=»name» content=»Наименование товара»> <divclass=»foto»><imgsrc=»https://steptosleep.ru/wp-content/uploads/2018/06/96838.jpg» /></div> <divitemprop=»offers» itemscopeitemtype=»http://schema.org/Offers» class=»tovar_info»> <divclass=»proizvoditel»>Производитель</div> <divclass=»price»>Стоимость: 5000 руб</div> <divclass=»desc»>Описание товара</div> <metaitemprop=»brand» content=»Производитель»> <metaitemprop=»price» content=»Стоимость»> <metaitemprop=»priceCurrency» content=»Валюта»> <metaitemprop=»description» content=»Описание товара»> <linkitemprop=»availability» href=»http://schema.org/InStock»> </div> </div>

Пояснение к примеру

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

---

В Яндекс Вебмастер есть онлайн валидатор разметки. Т.е.

14 способов улучшить сниппет в Яндекс и Google и увеличить CTR

вы сразу же можете проверить правильно ли вы заполнили все поля.

---

Влияет ли микроразмета на позиции сайта?

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

---

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

Есть несколько вариантов микроразметок: Schema и RDFa. Естественно адекватно и использовать Schema, т.к. она наиболее удобна и распространённая.

Существует так называемые микроформаты hCard, hRecipe, hReview, hProduct. Они используются реже, поскольку Schema куда удобнее.

Читайте также:
• Микроразметка хлебных корочек
• Что такое seo-текст
• Крауд-маркетинг
• Абсолютный и относительный адрес URL
• Все про контент-маркетинг
• Что такое ЧПУ
• Что такое траст сайта

← Перейти в каталог html уроков и советов

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

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

• 1. schema.org/Article
• 2. schema.org/BlogPosting
• 3. schema.org/Blog

В основном, если блог и размечен, то в качестве микроразметки на главной странице и страницы со статьей, используется сущность «Article», реже используется сущность «BlogPosting», иногда их комбинируют, но вот еще не разу не видел блога, где используется сущность «Blog», а тем более не видел блога, впрочем как и сайта, который размечен более менее правильно.

Ну вот сами подумайте, зачем в качестве разметки блога использовать сущность «Article», когда есть специально созданная для блога сущность «BlogPosting»? Даже если зайти на сайт schema.org и посмотреть на эти две сущности, то станет ясно, что «BlogPosting» наследуется от «Article». Т.е. сущность «Article» более обобщенное понятие, а так как у нас блог, то поисковые роботы должны знать, что это статья блога, а не сайта, каталога или какого-нибудь другого ресурса.

Конечно, пока только микроразметка набирает обороты, мало кто ее еще использует и если вы разметили свой блог неправильно, то поисковое машины скорей всего закроют на это глаза, но пройдет время, и я думаю, вы все равно возвратитесь к этому вопросу. Поэтому рекомендую сделать один раз, но правильно. В любом случае вы будете в плюсе. И так, давайте начнем с главной страницы нашего блога, где будет использована сущность «Blog» и вот, как это будет выглядеть:

Микроразметка главной страницы блога

А вот, как будут видеть данную микроразметку поисковые роботы, на примере моего блога:

Хорошо, я думаю здесь все понятно, есть главная страница блога (Blog) и далее идут статьи с кратким описанием (blogPosts).

А теперь давайте разметим непосредственно статью блога.

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

В данном случае мы используем сущность «BlogPosting» и вот, как это будет выглядеть:

Смотрим, как выглядит микроразметка в глазах поисковых машин:

Ну вот и все, сегодня я не стал расписывать какие-то вещи более подробно, так как думаю, что все довольно просто.

Микроразметка для чайников или как сделать свой сайт лучше

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

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

Впрочем, почему можно? Такое решение, естественно, уже найдено, причем не одно. Прежде всего это концепция микроформатов, используемая, например, Google в сервисе Google Maps, Yahoo! (в Yahoo! Query Language) или, до недавнего времени, крупнейшим российским поисковым порталом «Яндекс». Давайте посмотрим, что она из себя представляет.

Микроформаты (microformats, F) — это способ семантической разметки, вносящей сведения об определенных общностях (товарах, событиях, персоналиях и т. д.) и использующей стандартные HTML-элементы. Оставаясь незаметной для человека, такая разметка предоставляет структурированную информацию программам-парсерам. Обычно микроформаты определяются с помощью атрибута class внутри HTML-тегов (контейнеров, например <span> или <div>); при этом, используя тот факт, что в данном атрибуте можно перечислить несколько классов, указываются имя сущности и значение его свойства.

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

— hCard — формат разметки контактной информации (адресов, телефонов и т. д.);

— hProduct — формат разметки товаров;

— HAtom — формат для разметки лент новостей;

— hReview — отзывы (о товарах, услугах, событиях и тому подобном);

— hCalendar — события.

Всего же микроформатов существует несколько десятков (самый важный из них, разумеется, hRecipe — формат для описания кулинарных рецептов).

Теперь посмотрим, как применять эти форматы. Возьмем обычную HTML-разметку, с описанием некоего человека:

<div>

<img src="pic. jpg">

Здравствуйте! Я Иван Паровозов, более известный как Crazzy.

Подробнее обо мне:

<a href="http://www. сrazzy1969.com" >www. сrazzy1969.com</a>. Мой адрес г. Эгвекинот, Чукотский АО 3-я улица Строителей, дом 25, квартира 12 Я программист в Nord Software

Мои контакты:

+7 (952) 345 67 89 parovozoff@yandex. ru

Мои контакты в соцсетях:

<a href="Http://www. facebook. com/profile. php? id=100003262466667">facebook</a>,

<a href="http://edna-blog. example. com">вконтакте</a>,

<a href="Http://www. odnoklassniki. ru/#/profile/522180651074" > одноклассники</a>

</div>

Разметим его, используя микроформат hCard (описание можно найти здесь: Http://microformats. org/wiki/hCard):

<div class=”vcard”>

<img class=”photo” src=”pic. jpg” class=”vcard”>

Здраствуйте! Я Иван Паровозов,

Более известный как <span class=”fn nickname”>Crazzy</span>.

Подробнее обо мне:

<a class=”url” href=”http://www. crazzy1969.com” >www. crazzy1969.com</a>

Мой адрес:

<span class=”adr”>

Г. <span class=”locality”>Эгвекинот</span>,

<span class=”region”Чукотский AO</span>

<span class=”street-address”>3-я улица Строителей, дом 25, квартира 12

</span>

</span>

Я <span class=”title”>программист</span> в <span class=”org”>Nord Software</span>

Мои контакты:

<span class=”tel”>

<span class=”value”>+7 (952) 345 67 89</span>

</span>

<span class=”email”>

<span class=”value”>parovozoff@yandex. ru</span>

</span>

Мои контакты в соцсетях:

<a class=”url” href=”Http://www. facebook. com/profile. php?

Schema.org

id=100003262466667”> faceboock</a>,

<a class=”url” href=”http://edna-blog. example. com”>вконтакте</a>,

<a class=”url” href=”Http://www. odnoklassniki. ru/#/profile/522180651074” > одноклассники</a>

</div>

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

В первой строке мы сообщаем используемый микроформат. Атрибут class=”vcard” в данном случае означает, что будет применяться формат hCard, и речь пойдет о контактной информации. Для обозначения таких свойств, как фамилия, адрес, должность, организация, телефон и т. д., текст, представляющий соответствующее значение, заключается в тег (в данном случае <span>), которому присваивается атрибут class с содержимым, указывающим имя свойства.

Свойства могут содержать в себе другие свойства. В приведенном выше примере свойство adr описывает адрес человека и содержит вложенные свойства (street-address, locality и region).

Свойства могут иметь несколько значений (тут — свойство url).

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

Rating

Canonical URL: http://schema.org/Rating

A rating is an evaluation on a numeric scale, such as 1 to 5 stars.

Usage: Between 100,000 and 250,000 domains

Property	Expected Type	Description
Properties from Rating
Organization  or Person	The author of this content or rating. Please note that author is special in that HTML 5 provides a special mechanism for indicating authorship via the rel tag. That is equivalent to this and may be used interchangeably.
Number  or Text	The highest value allowed in this rating system. If bestRating is omitted, 5 is assumed.
Number  or Text	The rating for the content.
Text	This Review or Rating is relevant to this part or facet of the itemReviewed.
Number  or Text	The lowest value allowed in this rating system. If worstRating is omitted, 1 is assumed.
Properties from Thing
URL	An additional type for the item, typically used for adding more specific types from external vocabularies in microdata syntax. This is a relationship between something and a class that the thing is in. In RDFa syntax, it is better to use the native RDFa syntax — the ‘typeof’ attribute — for multiple types. Schema.org tools may have only weaker understanding of extra types, in particular those defined externally.
Text	An alias for the item.
Text	A description of the item.
Text	A sub property of description. A short description of the item used to disambiguate from other, similar items. Information from other properties (in particular, name) may be necessary for the description to be useful for disambiguation.
PropertyValue  or Text  or URL	The identifier property represents any kind of identifier for any kind of Thing, such as ISBNs, GTIN codes, UUIDs etc. Schema.org provides dedicated properties for representing many of these, either as textual strings or as URL (URI) links. See background notes for more details.
ImageObject  or URL	An image of the item. This can be a URL or a fully described ImageObject.
CreativeWork  or URL	Indicates a page (or other CreativeWork) for which this thing is the main entity being described. See background notes for details. Inverse property: mainEntity.
Text	The name of the item.
Action	Indicates a potential Action, which describes an idealized action in which this thing would play an ‘object’ role.
URL	URL of a reference Web page that unambiguously indicates the item’s identity. E.g. the URL of the item’s Wikipedia page, Wikidata entry, or official website.
CreativeWork  or Event	A CreativeWork or Event about this Thing.. Inverse property: about.
URL	URL of the item.

Instances of Rating may appear as values for the following properties

Property	On Types	Description
CreativeWork	Official rating of a piece of content—for example,’MPAA PG-13′.
Review	The rating given in this review. Note that reviews can themselves be rated. The applies to rating given by the review. The aggregateRating property applies to the review itself, as a creative work.
FoodEstablishment  or LodgingBusiness	An official rating for a lodging business or food establishment, e.g. from national associations or standards bodies. Use the author property to indicate the rating organization, e.g. as an Organization with name such as (e.g. HOTREC, DEHOGA, WHR, or Hotelstars).

Available properties in extensions

More specific Types

More specific Types available in extensions

Examples

Example 1

Schema Version 3.4