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

Микроразметка сайтов стала активно развиваться в начале 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://rpilot62.ru/wp-content/uploads/2018/06/56153.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://rpilot62.ru/wp-content/uploads/2018/06/56153.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://rpilot62.ru/wp-content/uploads/2018/06/56153.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 мы также указали, что товар есть в наличии.


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


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

Микроразметка имеет влияние на ранжирование, но косвенное. Однако поскольку поисковые системы лучше составляют сниппеты, то пользователь с большой охотой кликают на такие сайты, тем самым повышая 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. Всем пока и увидимся в следующих статьях моего блога.

Категория: Все для создания сайтов

.

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В настоящее время по заявлению Яндекса микроразметку в том или ином виде используют порядка 30% всех веб-страниц. Внедрять или нет микроразметку на свой сайт, решать только Вам в настоящее время её использование носит рекомендательный характер. Однако никто не знает, что будет завтра.

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

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

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

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

На «заметные» сайты заходят гораздо больше посетителей и если поисковый робот «решит» что посетителям сайт понравился, тогда позиции сайта начнут расти. Это если объяснять совсем кратко.

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

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

Как я уже говорил, для микроразметки не существует единого стандарта, по крайней мере, пока. Микроразметка состоит из множества так называемых словарей, каждый из таких словарей имеет свой синтаксис. Но из всего многообразия словарей можно выделить только два особо распространенных — Schema.org и Open Graph. Первый используется поисковыми системами, второй социальными сетями.

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

Schema.org

Словарь или стандарт микроразметки Schema.org был разработан в 2011 году поисковиками Google, Yahoo! и Bing (от мелкомягких). Позднее этот же стандарт подхватил и Яндекс.

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

В основе словаря Schema.org лежат так называемые сущности. Сущность это что-то вроде объекта, например, есть сущность статья, комментарий, фильм и так далее. Объявляется сущность с помощью специального атрибута itemscope, далее следует обозначить тип сущности при помощи атрибута itemtype. В микроразметке Schema.org используется просто огромное количество типов сущностей, таким образом, с их помощью можно описать практически любой элемент на сайте.

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

Чтобы стало понятнее, давайте разберем небольшой пример, допустим, нам надо в статью добавить микроразметку Schema.org. Сущностью здесь будет являться сама статья, поэтому в начале документа добавляем специальный тип itemtype=https://schema.org/Article. Далее размечаем тело статьи при помощи атрибута itemprop="articleBody", заголовок itemprop="headline", количество просмотров itemprop="interactionCount" и так далее. Более наглядно все это дело смотрите на картинке:

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

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

Обо всех тонкостях микроразметки Schema.org Вы можете прочитать в статье «Микроразметка Schema.org для материалов (статьи)» и «Микроразметка Schema.org для блога Joomla 3».

Open Graph

Второй по популярности словарь микроразметки изначально введенный соцсетью Facebook, однако сейчас поддерживается и другими популярными сетями, такими как ВКонтакте, Google+, Twitter и другими. Задачей микроразметки Open Graph является передача корректных данных с сайта в социальные сети, когда пользователь жмет кнопку поделиться. Так же разметка Open Graph используется сервисом Яндекс.Видео.

Для корректной работы микроразметки Open Graph необходимо добавить дополнительные атрибуты в теге <html> и метатеги в head документа. В теге <html> мы указываем роботу на то, что на странице используется микроразметка Open Graph:

<html prefix="og: ogp.me/ns#>

Далее между тегами head необходимо добавить новые метатеги, основные из них мы сейчас рассмотрим:

  • og:title – используется для задания заголовка документа.
  • og:type – говорит роботу о том, какого рода контент (тип содержимого) находится на странице. Если типов используется несколько, то указать необходимо основной.
  • og:url – канонический адрес страницы, будет использован в качестве идентификатора.
  • og:image – указывает на изображение объекта (статьи, видео и т.п.)
  • og:description – краткое описание, некое подобие мета-тега description в Joomla 3.

Чтобы все стало понятнее, давайте рассмотрим небольшой пример, в котором при помощи микроразметки Open Graph разметим страницу с видео (адреса вымышленные).

<html prefix="og: http://ogp.me/ns#"> <head> <title>Последний богатырь (2017)</title> <meta property="og:title" content="Последний богатырь" /> <meta property="og:description" content="Краткое описание фильма"/> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://www.video.com/ru/pb2017" /> <meta property="og:image" content=" http://www.video.com/ru/pb2017/pb.jpg" /> … </head> <body> … </body> </html>

Более подробную информацию о протоколе Open Graph и как его прикрутить к сайту на Joomla 3 читайте в статье «Open Graph для joomla».

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

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

147

Добавить комментарий

Закрыть меню