Здравствуйте! Пришло время рассказать о том, как я внедрял микроразметку Schema.org на своем блоге в конце прошлого года и что из этого получилось.
Schema.org является единым общепризнанным стандартом, который распознают наиболее популярные поисковые системы, такие как , Яндекс, Yahoo и Bing. Его разработкой занимается международная группа начиная с лета 2011 года.
Микроразметка — это семантическая разметка страниц сайта с целью структурирования данных, основанная на внедрении специальных атрибутов в HTML код документа.
Приведу пару доводов в пользу разметки:
Спецификация стандарта предлагает владельцам сайтов разнообразные схемы, которые можно использовать для карточек товаров в интернет-магазинах, кулинарных рецептов с пошаговыми инструкциями и необходимыми ингредиентами, адресов организаций и размещения отзывов. Полный список схем Вы найдете на официальной странице проекта .
Блоги, как правило, состоят из страниц ориентированных на информационные запросы. Они не содержат отзывов или галерей изображений, не продают товары и не имеют адреса организации. Поэтому для блогов больше всего подходит схема CreativeWork — Творческие работы.
А сейчас я приведу пример верстки блога на WordPress с применением атрибутов Schema.org. Нам потребуется добавить атрибуты itemscope , itemtype , itemprop и присвоить им свойства в соответствии с принятой схемой CreativeWork.
Обратите внимание, в основе примера я рассматриваю свой блог сайт, сверстанный на HTML5, поэтому допускаю любые несоответствия с Вашей версткой.
Имеются в виду заголовки, секционные и блочные элементы, теги. Обращайте внимание на стандартные функции и к ним добавляйте необходимые атрибуты по аналогии с примером.
Формирование конечной страницы в WordPress осуществляется путем объединения нескольких файлов шаблона. Исходный код верхней части страницы как правило располагается в файле header.php. Добавим атрибуты тегу
чтобы обозначить тело веб-страницы. Тип разметки — WebPage. <body itemscope ="itemscope" itemtype ="http://schema.org/WebPage" >Теперь добавим микроразметку к тегу
В моем случае название блога динамически обертывается в различные теги в зависимости от того, на какой странице мы находимся. Открывая главную страницу название заключено в заголовок H1, а названия анонсов в H2. В свою очередь, переходя на страницу с одной записью, в заголовок верхнего уровня помещается название статьи, а название блога является , ведущей на главную страницу.
Таким вот образом у меня сформирована логическая структура заголовков, правильная с моей точки зрения. Добавляю в конструкцию свойство name:
<a itemprop ="name" href ="" > a > <h1 itemprop ="name" > <a href ="" > a > h1 >И сразу после добавляю описание, которое размечается атрибутом itemprop со свойством description:
<span itemprop ="description" > span >В верхнем меню сайта, как правило, находятся ссылки, ведущие на статические страницы, важные разделы или отдельные категории. Для меню сайта схемой предусмотрен тип разметки — SiteNavigationElement.
<nav itemscope itemtype ="http://www.schema.org/SiteNavigationElement" > <ul class ="menu" > <li itemprop ="name" > <a itemprop ="url" href ="https://сайт/" > Главнаяa > li > <li itemprop ="name" > <a itemprop ="url" href ="https://сайт/author-bloga/" > Авторa > li > ul > nav >Здесь применяются свойства name и url для атрибута itemprop . Подобная разметка поможет поисковым системам определить для сайта быстрые ссылки, которые не редко встречаются в результатах поиска.
Основное содержимое страницы формируется в файлах single.php (одна запись) и page.php (страница). Для начала задаю статье тип разметки Article:
Дата публикации:
<span itemprop ="datePublished" > span >Но есть одно НО. ПС находят эти данные и выводят дату в сниппете, получается что статьи, вроде как и остаются актуальными по сей день, но CTR выдачи сильно падает.
<span itemprop ="author" > span >Как я уже говорил, заголовок статьи заключен в тег H1, дополним его тегом itemprop с присвоенным свойством headline:
В справке сервиса Яндекс.Вебмастер сообщается, что если в документе одновременно используются атрибуты headline и name , то обрабатываться и участвовать в формировании сниппета будет только последнее значение свойства.
С помощью свойства articleBody атрибута itemprop делаем микроразметку для основного текста записи:
Вы тоже уже запарились разбираться в устройстве сайта Schema.org и в том, как использовать его монструозный список для создания микроразметки на собственном сайте? Тогда эта подробная и доходчивая статья раз и навсегда прояснит все для вас, и вопросов больше не останется. Гарантирую!
Я сам подступался к микроразметке несколько раз, и каждый раз бросал его к чертям собачьим, ибо сайт Schema.org абсолютно бестолково устроен. Да, там есть обширный список сущностей и типов, и к нему целая куча описаний. Есть даже частичный перевод сайта на русский язык - ruschema.org . Но один хрен - нифига не понятно.
Ну, смотрите сами: вот я хочу разобраться, как мне добавить микроразметку на свою страницу со статьей. Я захожу на сайт Schema.org, перехожу в раздел Schemas , далее по ссылке Full list of types, shown on one page и получаю огромный список сущностей (Thing):
И что дальше? Среди этих шести свойств явно чего-то не хватает, а именно: названия статьи, автора, даты написания и пр. Есть какие-то невнятные articleBody , articleSection , pageEnd и т.д. Ну, и что мне с этим делать? Если кликнуть по свойству, то ничего нового не обнаружишь:
И так по всему списку. Абсолютно не дружественный интерфейс, заточенный, разве что, под труЪ программистов, которым все ясно с полуслова, причем нерусского.
Гуд! Давайте разбираться, что здесь и с чем едят, на этом 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, а не кто-либо другой? Кто вообще такие эти ребята? Как говорит Википедия , это инициативная группа товарищей от крупнейших поисковых систем Google, Yahoo!, Bing и Яндекс, которые в 2011 г. решили добавить к специальный набор семантических же метаданных, что должно улучшать результаты поисковой выдачи.
В качестве основного формата разметки веб-страницы метаданными разработчики schema.org предлагают микроразметку - теги и атрибуты для разметки структурированной информации на веб-страницах, появившиеся в стандарте HTML5.
C itemprop - Свойством (Properties), надеюсь, вы уже разобрались. Кто еще не понял - это самая мелкая деталь микроразметки, обозначающая конкретное свойство объекта. Например:
Джеймс Кэмерон
Эта строка просто говорит, что товарищ по имени Джеймс Кэмерон не грузчик с Привоза, а настоящий Режиссер.
itemtype - означает конкретную сущность, которую мы описываем при помощи микроразметки. Например, Фильм (Movie).
itemscope - означает Сущность вообще. Это атрибут просто говорит поисковикам, что здесь есть какая-то сущность с микроразметкой и им, поисковикам, следует на это обратить внимание.
Обычно эти два атрибута пишутся один за другим и добавляются оба-два какому-нибудь блоку DIV на сайте. Сначала идет itemscope , а за ним itemtype + добавляется ссылка на раздел конкретной сущности в Schema.org:
Сущности могут быть вложены одна в другую. Например, в более крупную сущность Article могут входить другие сущности, вроде NewsArticle , Report и др. Часто глобальные сущности вроде Article добавляют прямо к тэгу body на странице сайта:
Остальные сущности добавляются по мере их появления на странице. Каждая конкретная сущность также предваряется атрибутами 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 не просто, а очень просто! Возьмем, к примеру, страницу с отдельными постами, которые обычно выводятся шаблоном single.php . Все что нужно, это внедрить следующие куски кода по месту:
itemscope itemtype=http://schema.org/Article – добавить в тэг DIV с атрибутом post или entry;
itemprop="name" – добавить в тэг h1 или h2 ;
itemprop="url" – добавить в тэг h1 или h2 вместе с тэгом link . Пример:
itemprop="author" – добавить в кусок кода, выводящий имя автора. Пример:
itemprop="datePublished" – дата публикации в формате "Y-m-d" . Пример:
itemprop="articleBody" – вставляем в блок вывода текста статьи;
itemprop="articleSection" – вывод рубрики;
itemprop="image" – ссылка на картинку к посту;
и т.д.
Более толково весь этот процесс расписан Рекомендую!
Я надеюсь, теперь вы легко сможете разобраться в микроразметке Schema.org.
В интернете, разумеется, существует не только этот тип микроразметки. На самом деле их несколько разных, под разные задачи. В следующий раз поговорим про Open Graph - второй по популярности вариант микроразметки от социальной сети Фейсбук. Он предназначен для адекватного отображения страниц сайта в соцсетях.
Оставайтесь на связи!
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Что делать, если ваш уникальный, качественный и полезный контент в упор не видит Google? Поисковым системам можно и нужно помогать — специально для этих целей и существует микроразметка. Благодаря ей поисковые роботы быстрее и четче находят нужную пользователям информацию на страницах сайта.
Но вначале разберемся с главным.
Микроразметка — своего рода единый язык, который одинаково понимают и трактуют поисковые роботы Google, Яндекс, Bing, Yahoo. Об этом они «договорились» еще в далеком 2011 году. Язык этот состоит из специальных тегов (например Например, на странице «О нас» или «Контакты» компании стоит выделить микроразметкой блок с контактными данными — в таком случае на запрос пользователя «контакты компании N» робот безошибочно покажет нужную страницу и нужные данные. Другой пример. Допустим, мы хотим, чтобы роботы поняли: эта маленькая картинка сверху — логотип компании. Для разметки логотипа следует указать: Получаем фрагмент микроразметки для логотипа:
Если все чётко, можно внедрять микроразметку в тело сайта или ставить соответствующую задачу программисту. Если сайт большой, SEO-специалист тратит достаточно много времени, определяя, какие типы страниц будут «размечены», какую именно информацию следует выделить. Конечно, для этого следует изучить основы языка микроразметки — словари и синтаксис. Любой вебмастер хорошо знаком с HTML-разметкой. Обычно HTML-теги указывают браузеру, как отображать информацию, заключенную в тег. Например, тег Schema.org предоставляет общедоступный словарь, с помощью которого вебмастера могут размечать страницы, так чтобы они были понятны самым распространенным поисковым системам: Яндексу, Google, Microsoft и Yahoo!. Обратите внимание, что мы добавили дополнительный тег ... , чтобы привязать атрибут itemprop к соответствующему тексту на странице. Тег не влияет на отображение страницы в браузере, поэтому его удобно использовать вместе с itemprop . Теперь поисковые системы смогут понять не только то, что http://www.avatarmovie.com - это ссылка, но и то, что это ссылка на трейлер фантастического фильма «Аватар»
режиссера Джеймса Кэмерона. Иногда значение свойства может само являться сущностью, с собственным набором свойств. Например, режиссер фильма может быть описан как сущность с типом Person, у которой есть свойства name (имя) и birthDate (дата рождения). Чтобы указать, что значение свойства представляет собой сущность, необходимо добавить атрибут itemscope сразу после соответствующего itemprop . Кроме типов Movie и Person, упомянутых в разделе , schema.org описывает множество разнообразных типов сущностей, для каждого из которых определен набор свойств. Наиболее обобщенный тип сущности - это Thing (нечто), у которого есть четыре свойства: name (название), description (описание), url (ссылка) и image (картинка). Более специализированные, частные типы имеют общие свойства с более универсальными. Например, Place (место) - частный случай Thing, а LocalBusiness (местная фирма) - частный случай Place. Частные типы наследуют свойства родительского типа. (Более того, тип LocalBusiness является и частным случаем Place, и частным случаем Organization, поэтому наследует свойства обоих родительских типов.) Вот список некоторых популярных типов сущностей: Многие страницы можно разметить, используя только атрибуты itemscope , itemtype и itemprop (описанные в разделе Как размечать контент с помощью микроданных) вместе с типами и свойствами schema.org (описанными в разделе Как использовать словарь schema.org). Однако в некоторых случаях роботу сложно однозначно интерпретировать свойство сущности. Этот раздел описывает, как добавить машиночитаемую версию информации в разметку страниц. Не всегда роботам удается правильно понять дату и время. Например, «04/01/11»
- это 11 января 2004 г., 4 января 2011 г. или 1 апреля 2011 г.? Чтобы однозначно задать дату, используйте тег Время суток задается в формате hh:mm либо hh:mm:ss , с префиксом T . Время может быть указано вместе с датой: Рассмотрим пример в контексте: HTML-код с информацией о концерте, который состоится 8 мая 2011 г. Разметка типа Event включает название события, описание и дату. Длительность описывается аналогичным образом, с помощью тега H обозначает количество часов, а M - количество минут. Форматы даты, времени и длительности соответствуют стандарту ISO 8601 . Перечисления
Некоторые свойства имеют ограниченный набор возможных значений. Программисты называют их перечислениями. Например, интернет-магазин может использовать тип сущности Offer для подробного описания товарного предложения. Свойство availability (наличие) обычно имеет одно из нескольких возможных значений: In stock (в наличии), Out of stock (отсутствует), Pre-order (на заказ) и т. д. Значения перечисляемых свойств можно указывать в виде URL, аналогично типам сущностей schema.org. Вот товарное предложение, размеченное как сущность типа Offer, с соответствующими свойствами: А вот то же самое предложение, размеченное с использованием и href , что позволяет однозначно указать одно из допустимых значений свойства availability: Schema.org предоставляет список возможных значений для небольшого количества свойств - в тех случаях, когда у свойства есть ограниченный набор типичных значений. Так, возможные значения для свойства availability перечислены в ItemAvailability . Как видите, атрибут itemprop="url" можно использовать для ссылки на страницу другого сайта (в этом случае, Википедии), которая описывает ту же самую сущность. Ссылки на сторонние сайты помогают поисковым системам лучше понимать, о чем речь на вашей странице. Иногда важная информация не может быть размечена из-за способа ее отображения на странице. Например, информация представлена на рисунке (изображение рейтинга 4 звезды из 5) или во Flash-объекте (например, длительность видеоролика) либо она подразумевается, но не указана на странице в явном виде (например, валюта цены). В таких случаях можно использовать тег с атрибутом content . В следующем примере картинка иллюстрирует рейтинг 4 звезды из 5: А вот тот же пример с размеченной информацией о рейтинге. Этим приемом не следует злоупотреблять. Используйте тег с атрибутом content только для той информации, которую невозможно разметить иным способом. Большинству сайтов и организаций не потребуется расширять schema.org. Тем не менее schema.org предусматривает возможность добавлять свойства и дочерние типы для имеющихся типов сущностей. Если вы заинтересованы в этом, ознакомьтесь сАватар
означает, что строку «Аватар»
следует отображать в формате заголовка первого уровня. Однако HTML-тег не предоставляет никакой информации о смысловом значении этой строки: «Аватар»
может относиться к чрезвычайно успешному 3D-фильму или к картинке в пользовательском профиле. Это усложняет поисковым системам задачу нахождения информации, адекватной запросу пользователя. itemprop="name"
>Аватар
Режиссер:
itemprop="director"
>Джеймс Кэмерон
(род. 16 августа 1954 г.)
itemprop="genre"
>Фантастика
itemprop="trailer"
>Трейлер
Вложенные сущности
Аватар
Типы и свойства schema.org
Дополнительно: машиночитаемая версия информации
Даты, время и длительность: используйте тег
Перечисления и ссылки на канонические страницы: используйте тег link с атрибутом href
Недостающая или неявная информация: используйте тег с атрибутом content
25 оценок
itemprop="ratingCount"
>25 оценок
Расширение schema.org
Предыдущая статья: Как сделать сброс к заводским настройкам на Флай
Следующая статья: Антенна для Yota: варианты усиления сигнала