Микроразметка на пальцах | Как пользоваться сайтом Schema.org

Микроразметка на пальцах | Как пользоваться сайтом Schema.org

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

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

Ну, смотрите сами: вот я хочу разобраться, как мне добавить микроразметку на свою страницу со статьей. Я захожу на сайт Schema.org, перехожу в раздел Schemas, далее по ссылке Full list of types, shown on one page и получаю огромный список сущностей (Thing):

Далее нахожу раздел Article и в нем несколько свойств (Properties):

И что дальше? Среди этих шести свойств явно чего-то не хватает, а именно: названия статьи, автора, даты написания и пр. Есть какие-то невнятные articleBody, articleSection, pageEnd и т.д. Ну, и что мне с этим делать? Если кликнуть по свойству, то ничего нового не обнаружишь:

И так по всему списку. Абсолютно не дружественный интерфейс, заточенный, разве что, под труЪ программистов, которым все ясно с полуслова, причем нерусского.

Гуд! Давайте разбираться, что здесь и с чем едят, на этом Schema.org. Чтобы все непонятки исчезли, а поисковики погладили нас по головке за использование микроразметки на нашем сайте, потому что это кошерно.

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

Зачем нужна микроразметка и при чем тут Schema.org

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

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

Почувствуйте, как говорится, разницу. Если не почувствовали, объясняю: без микроразметки бот поисковика не может сам определить, о чем конкретно идет речь на странице сайта. Слово «аватар» может иметь массу значений. Чтобы дать понять поисковому роботу, что в статье говорится о конкретном фильме, мы добавляем специальные метки и объявляем, что все они относятся к сущности типа Фильм (Movie).

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

В документе с разметкой добавлена куча нейтральных тэгов span с различными атрибутами вида itemprop="". Здесь есть также два непонятных атрибута: itemscope и itemtype и добавлена ссылка на раздел Movie того самого сайта schema.org. Окей! перейдем по этой ссылке и посмотрим, что там есть:

Еще один список свойств (Properties), но среди них есть всего лишь два из тех, что использованы в примере Яндекса — director и trailer. Где же остальные: name и genre? Яндекс, что ли, сам их придумал?

Дело в том, что у schema.org есть определенная иерархия, и ее можно видеть как раз на странице с общим списком всех сущностей (Thing). Здесь пора уже пояснить, что это такое — сущность.

Сущность (Thing) в Schema.org означает какую-то конкретную вещь, причем самим словом Thing можно обозначить любую из возможных вещей. В нее вложены все остальные типы вещей. Не все на свете, разумеется, но чаще всего используемые для описания в интернете: статьи, новости, события, личности, книги, программы и т.д.

Каждая из вложенных вещей может содержать свой «набор» сущностей похожего типа. Например, в сущность с именем Событие (Event) могут входить события разного вида: бизнес-события, детские мероприятия, фестивали, музыкальные тусовки и пр.

Ясное дело, что если сущности имеют иерархию, то есть, своеобразную вложенность, то они вполне могут перенимать свойства (Properties) от своих родителей. Сущность Фестиваль перенимает свойства от сущности Событие, а также перенимает свойства самой главной в списке сущности — Thing.

Теперь вы понимаете, откуда Яндекс взял недостающие свойства name и genre для примера микроразметки фильма? Свойство genre есть у родительской сущности CreativeWork, в которую вложена Movie; а свойство name есть у самой главной сущности Thing, в которую входит сущность CreativeWork. Все просто!

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

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

Почему Schema.org?

Так почему именно Schema.org, а не кто-либо другой? Кто вообще такие эти ребята? Как говорит Википедия, это инициативная группа товарищей от крупнейших поисковых систем Google, Yahoo!, Bing и Яндекс, которые в 2011 г. решили добавить к семантической верстке HTML5 специальный набор семантических же метаданных, что должно улучшать результаты поисковой выдачи.

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

Что такое itemscope и itemtype и для чего они нужны

C itemprop — Свойством (Properties), надеюсь, вы уже разобрались. Кто еще не понял — это самая мелкая деталь микроразметки, обозначающая конкретное свойство объекта. Например:

<span itemprop="director">Джеймс Кэмерон</span>

Эта строка просто говорит, что товарищ по имени Джеймс Кэмерон не грузчик с Привоза, а настоящий Режиссер.

itemtype — означает конкретную сущность, которую мы описываем при помощи микроразметки. Например, Фильм (Movie).

itemscope — означает Сущность вообще. Это атрибут просто говорит поисковикам, что здесь есть какая-то сущность с микроразметкой и им, поисковикам, следует на это обратить внимание.

Обычно эти два атрибута пишутся один за другим и добавляются оба-два какому-нибудь блоку DIV на сайте. Сначала идет itemscope, а за ним itemtype + добавляется ссылка на раздел конкретной сущности в Schema.org:

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

Сущности могут быть вложены одна в другую. Например, в более крупную сущность Article могут входить другие сущности, вроде NewsArticle, Report и др. Часто глобальные сущности вроде Article добавляют прямо к тэгу body на странице сайта:

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

Остальные сущности добавляются по мере их появления на странице. Каждая конкретная сущность также предваряется атрибутами itemscope itemtype. Соответственно, на странице сайта таких конструкций может быть несколько, и они должны соблюдать вложенность — все как и с обычными тэгами HTML.

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

Микроразметку можно добавить непосредственно в HTML код страницы, а можно воспользоваться сторонними плагинам для CMS типа WordPress и др.

Для привязки атрибутов itemscope, itemtype и itemprop можно использовать уже имеющиеся HTML тэги блоков, абзацев текста, ссылок и списков, а можно добавлять нейтральные тэги span.

Если нужно в микроразметку добавить свойство url (ссылка), но не изображать ее как ссылку, можно воспользоваться тэгом link. Посетители увидят ее просто как текст, а поисковый бот прочтет ее, как нужно.

Некоторые ушлые вебмастера используют тэг meta в теле страницы. Тэг meta, Карл!!! Я не советую этого делать. Во-первых, это тэг заголовка страницы head и там ему самое место. А во-вторых, поисковики не жалуют за это, так что бдите.

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

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

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

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

Поэтому развлекайтесь с микроразметкой, как угодно, но знайте меру!

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

Вы можете нарулить в коде такое, что сам черт ногу сломит. Поэтому есть удобные валидаторы микроразметки от Гугла и Яндекса. Причем, каждый из них относится к правильности микроразметки по-своему, учитывайте это.

Если вы чего-то нахомутали, то валидатор выдаст соответствующее сообщение(я). Либо Ошибку, либо Предупреждение, либо и то и другое вместе. Читайте их, вникайте и тут же исправляйте. Ошибки следует исправлять обязательно, на предупреждения можно забить, но лучше тоже исправить, от греха подальше.

Как сделать микроразметку в шаблоне WordPress

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

Микроразметку добавить в шаблон WordPress не просто, а очень просто! Возьмем, к примеру, страницу с отдельными постами, которые обычно выводятся шаблоном single.php. Все что нужно, это внедрить следующие куски кода по месту:

itemscope itemtype=http://schema.org/Article – добавить в тэг DIV с атрибутом post или entry;

itemprop="name" – добавить в тэг H1 или H2;

itemprop="url" – добавить в тэг H1 или H2 вместе с тэгом link. Пример:

<h1><link itemprop="url" href="<?php the_permalink() ? >" > <span itemprop="name"><?php the_title(); ? ></span></link></h1>

itemprop="author" – добавить в кусок кода, выводящий имя автора. Пример:

<span itemprop="author"> <?php the_author(); ? ></span>

itemprop="datePublished" – дата публикации в формате 'Y-m-d'. Пример:

<span itemprop="datePublished"> <?php the_time('Y-m-d')? > </span>

itemprop="articleBody" – вставляем в блок вывода текста статьи;
itemprop="articleSection" – вывод рубрики;
itemprop="image" – ссылка на картинку к посту;
и т.д.

Более толково весь этот процесс расписан здесь Рекомендую!

Я надеюсь, теперь вы легко сможете разобраться в микроразметке Schema.org.

Правильная микроразметка на сайте

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

Оставайтесь на связи! А еще лучше подписывайтесь на рассылку новостей блога Вебсовет.

27.02.2017

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (16 votes, average: 4,75 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

15 комментариев

  1. Михаил Т

    28.02.2017

    Для меня эта микро-разметка темнющий лес. Знаю, что надо бы изучить, но пока мало что понимаю.

  2. Игорь Квентор

    05.03.2017

    Михаил, тут главное — не спешить. Со временем все станет абсолютно понятным.

  3. Мария

    01.03.2017

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

  4. Игорь Квентор

    05.03.2017

    Мария, думаю, вам подойдет тип разметки Product. Подробнее о нем можно почитать в справке Яндекса здесь:
    https://yandex.ru/support/webmaster/supported-schemas/goods-prices.xml?lang=ru

  5. Светик

    04.03.2017

    Я тоже мало чего понямаю в микроразметке. Надеюсь с Вашей помощью разобраться ))

  6. Игорь Квентор

    05.03.2017

    Светик, вэлкам! Будут вопросы — обращайтесь.

  7. Михаил
    http://breloknomerok.ru/
    18.04.2017

    Игорь, добрый день. Буду Вам признателен как эксперту за консультацию по микроразметке. На сайт была добавлена микроразметка schema.org, сущности product и offer. Валидатор яндекс не обнаружил ошибок:

    resource = http://breloknomerok.ru/
    product
    itemType = http://schema.org/Product
    description = Сделайте заказ брелока с номером машины на нашем сайте. Выбирайте готовое изображение или заказывайте свой индивидуальный дизайн.
    offers
    offer
    itemType = http://schema.org/Offer
    price = от 350.00
    pricecurrency = RUB
    name = Брелок с номером машины на заказ

    Но в панели веб мастер появилось сообщение:
    «На многих страницах сайта breloknomerok.ru отсутствуют или некорректно заполнены мета-теги . Это может негативно повлиять на представление сайта в результатах поиска. »

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

  8. Игорь Квентор

    18.04.2017

    Здравствуйте, Михаил!
    Яндекс, хоть и предупреждает об отсутствии некоторых мета-тегов, но не гарантирует абсолютно, что они будут использованы в сниппете. В вашем же случае яндекс указывает на явную ошибку в мета-теге description. Там не может размещаться атрибут itemprop=. Он должен быть в пределах тела страницы body, а не в head.

  9. Михаил
    http://breloknomerok.ru/
    19.04.2017

    Игорь, спасибо за ответ. Тогда чтобы еще больше разобраться. Правильно ли я понимаю, что микроразметкой размечают ТОЛЬКО видимые области сайта?

    А поскольку Мета-тег description на самом сайте не показывается, то и микроразметка к нему не «приделывается»?

    Поэтому в моем случае (одностраничник) можно использовать или description, или в качестве описания продукта — часть какого нибудь видимого текста?

  10. Игорь Квентор

    19.04.2017

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

  11. Михаил
    http://breloknomerok.ru/
    20.04.2017

    Игорь, спасибо что подтвердили мои домыслы) Тогда, если описание товара будет содержаться и в мета-теге description и дополнительно в микроразметке (кусочек видимого текста), тогда что попадет в сниппет?

  12. Игорь Квентор

    20.04.2017

    Пожалуйста, Михаил! А вот что именно попадет в сниппет, знает только поисковая система :)

  13. Виолетта

    20.05.2017

    Добрый день! Подскажите, пожалуйста, а если у нас интернет-магазин и много-много страниц на сайте, то что именно размечать? Какие страницы, какие разделы? Это же такой большой объем…

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

  14. Игорь Квентор

    26.05.2017

    Виолетта, вы абсолютно правы. Четких алгоритмов нет. Есть примерные схемы, на которые можно ориентироваться (например, в том же Яндексе). Что касается множества страниц, то да, придется размечать их все. Такова уж суть всех интернет-магазинов :)

  15. Сергей
    https://webersant.ru/
    21.09.2017

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

    Размечал: меню, хлебные крошки, блог, статьи блога, комментарии. Только делал немного наоборот. Сначала микроразметку в тектовый редактор поставил, проверил её, потом под неё верстал =) А потом и сайт забросил.

Оставить комментарий: