Проверить микроразметку google

Собственно говоря, HTML так и называется «гипертекстовый язык разметки». Его можно назвать языком «макроразметки» — разметки контента всего содержимого web-страницы.

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

Все требования подобного рода и собраны в микроразметку сайта.

Для пользователя следствием удачного применения микроразметки является более полный сниппет (превью сайта) в результатах поиска. У хорошо размеченных сайтов выше кликабельность (CTR) в поисковой выдаче. Это значит вы будете получать больше органического трафика и ваши позиции будут расти за счет этого.

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


<meta property="og:image" content="http://example.com/rock.jpg" />    <meta property="og:image:width" content="300" />    <meta property="og:image:height" content="300" />    <meta property="og:image" content="http://example.com/rock2.jpg" />    <meta property="og:image" content="http://example.com/rock3.jpg" />    <meta property="og:image:height" content="1000" />  

Яндекс использует несколько отличную от Гугл систему микроразметки:

<div itemscope itemtype="http://schema.org/Organization">   <span itemprop="name">Название организации</span>   Контакты:   <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">   Адрес:   <span itemprop="streetAddress">Александра Пушкина, 114</span>   <span itemprop="postalCode">746228</span>   <span itemprop="addressLocality">Владивосток</span>,   </div>   Телефон:<span itemprop="telephone">+7 999 777–77–77</span>,   Факс:<span itemprop="faxNumber">+7 999 111–11–11</span>,   Электронная почта: <span itemprop="email">myorg@list.ru</span>  </div>  

Сравните тот же самый код страницы, но уже без микроразметки:

<div>   <span>Название организации</span>   Контакты:   <div>   Адрес: Александра Пушкина, 114,   746228,   Владивосток,   </div>   Телефон: +7 999 777-77-77,   Факс: +7 999 111-11-11,   Электронная почта: myorg@list.ru  </div>  

5 популярных форматов микроразметки:


  • Schema.org — совместная разработка Гугл, Yahoo и Microsoft, к которой со временем примкнула и Яндекс;
  • OpenGraph — разработка компании Facebook, которой придерживаются все её разработки и разработки тесно сотрудничающих с Facebook её партнёров;
  • Микроформаты – целая серия форматов, описывающих различные тематические направления web-страниц, от кулинарных рецептов до социальных взаимоотношений;
  • RDF — Resource Description Framework («среда описания ресурса») – разработка консорциума W3C, носящая глобальный характер среды описания данных. В настоящий момент действует 3 версия (1.1) данного формата. Его полное описание доступно на http://www.w3.org/TR/2015/REC-rdfa-core-20150317/;
  • Микроданные (microdata) – ещё одна разработка W3C

Все форматы находятся в постоянном развитии, и пока уникальная разметка существует не для всех сфер.

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

Как внедрить микроразметку?

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

Механизм применения микроразметки на примере формата Schema.org. Три шага:


  1. Описание заключается в контейнер – ему присваивается имя и тип:
    <div itemscope itemtype=»http://schema.org/Organization» >

    </div>
  2. Внутри контейнера происходит описание конкретного свойства.
  3. Вне контейнера в конкретных точках применения происходит разметка информации со ссылкой на конкретное свойство схемы:
    <span itemprop=»streetAddress»>Александра Пушкина, 114</span>

Что интересно, унифицированного алгоритма обработки получаемых данных не существует, всё зависит от конкретной темы сайта.

Так как объём информации по каждой теме довольно широк, возникает необходимость её проверки на соответствие стандартам. Яндекс, и Google, имеют специальные валидаторы для проверки микроразметки на сайте.

Проверка микроразметки в Яндекс Вебмастере

Идем в Вебмастер Яндекса: https://webmaster.yandex.ru/tools/microtest/

Перед нами вся необходимая информация для проведения анализа:

Проверить микроразметку google

Теперь, в многостраничном поле ввода под двухцветным заголовком «URL документа или вставьте фрагмент HTML-кода» размещаем адрес проверяемой страницы.


Тут возникает только одна проблема – страница должна содержать эту самую микроразметку. Если микроразметки нет, то под заголовком «Результат проверки» просто показывается сообщение, что разметка на странице не обнаружена.

Запуск проверки проводится кнопкой «Проверить» или комбинацией горячих клавиш Ctrl + Enter.

Если разметка на сайте используется, то результат проверки будет отражён в многостраничном поле ниже:

Проверить микроразметку google

Если вы просто ввели HTML-код страницы, то результат работы будет представлен адресом локального хоста:

Проверить микроразметку google

Если у вас возникают вопросы по поводу сервиса валидации микроразметки Яндекса, то можно обратиться к страницам помощи, которые служба размещает по адресу: https://yandex.ru/support/webmaster/yandex-indexing/validator.xml

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

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

  • Страница не может быть загружена для анализа;
  • Микроразметка не обнаружена – может произойти по двум причинам – или разметки действительно нет, или она неверно оформлена;
  • Отсутствие необходимого поля – это уже элемент именно проверки, например, при описании картинки не указан её адрес;
  • Невозможно определить чему принадлежат некоторые поля – обычно они выходят за свою разметку;
  • Не выполнены условия организации сниппетов;
  • В свойстве “content” meta-тега находится ссылка, что недопустимо.

Кроме того, в окне результатов могут появляться три предупреждения:

  • Некорректное значение поля – например, некорректный формат даты;
  • Неверно задан тип данных – обращаем внимание, что наряду со стандартными типами, определёнными W3C, Яндекс определяет и некоторые свои типы;
  • Отсутствие разметки, которая должна использоваться вместе с используемой.

Как результат успешно проведённой Яндексом валидации – в результатах поиска Яндекса страница будет представлена структурированным сниппетом. Это обычно происходит через 10-14 дней.

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

Аналогичным образом проводится валидация микроразметки в Google: https://developers.google.com/structured-data/testing-tool/

Схема расстановки микроразметки, на которую ориентируется Google, называется Schema.org. Во многом идея работы «американца» ничем не отличается от работы российского варианта валидации.

Проверить микроразметку google

Как видим, здесь тоже есть возможность ввести адрес проверяемой страницы или непосредственно html-код.

Запуск проверки производится кнопкой «Запустить тест». Несмотря на то, что оба валидатора работают по одной схеме Schema.org, результаты их работы несколько отличаются. Вот результат работы Google:


Проверить микроразметку google

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

Необходимо, по возможности, использовать оба валидатора и на основе двойной проверки делать выводы.

gruzdevv.ru

Для чего служит разметка?

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

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

Думаю, вам теперь примерно понятно для чего она служит на сайте. Это наглядно видно из видио от Яндекса.


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

Первый способ как проверить разметку

Проверять микроразметку на сайте мы будем с помощью 2 сервисов, это Google Structured Data Testing Tool и Валидатор микроразметки от Яндекса.

Начнем с Валидатора от Яндекса. Заходим на сам сервис и вводим любую ссылку на статью. После чего нажимаем проверить. Я за пример возьму свою статью 16 мифов о ведении блога.

валидатор от яндекса

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

Вот такие результаты выдал Яндекс:

Schema

Как вы можете видеть, ошибок не обнаружено и разметка прописана правильно. В случае если у вас ошибки, то Яндекс покажет вам такую картину:


ошибка Schema

Все ошибки нужно устранить!

Разберем подробнее мою разметку статьи:

правильная разметка в валидаторе

Теперь вы лучше понимаете, зачем проверять разметку.

Второй способ как проверить микроразметку

Второй сервис, который мы рассмотрим сегодня это Валидатор от Google. Переходим по ссылки и попадаем в сам инструмент. Тут необходимо ввести все тот же адрес статьи. Нажимаем на «Получить данные по URL» и вводим ссылку статьи.

валидатор гугла

В правом окне видим результат нашей проверки. Как вы видите, Google сообщает мне, что у меня есть 2 ошибки с разметкой для рейтинга. Я о них знаю и в скором времени устраню. Но зато с остальным у меня все отлично. 🙂


правильно в валидаторе гугла

В валидаторе от Google примерно то же самое, что и от Яндекса. За одним исключением вы можете видеть, что вам нахватает и где ошибки в разметке.

подробно в гугле

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

Если вы не разбираетесь в коде, поручите работу фрилансеру, он за небольшую плату все сделает за вас.

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

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

Всех желающих воспользоваться моими услугами прошу в обратную связь.


blogoshpora.ru

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

Многие слышали о микроразметке, но никогда ее не применяли. Основная причина — непонимание, что это такое и зачем нужно. Сейчас мы все по порядку расскажем.

Семантическая разметка или микроразметка была введена поисковыми системами относительно недавно (начиная с 2011 года). Основная цель — сделать сайт более понятным для поисковой системы. Сразу приведем пример.

Поисковику важно понимать, есть на сайте телефон или его нету. От этого зависит очень многое. Телефон можно найти по маске +7 ххх хх-хх-хх и подобным. В этом сложности нет. Но как отличить телефон от факса? Если сам сайт не «сообщит», какой номер к чему относится, то сделать это невозможно.

Такая же сложность есть и с текстом. Как отличить кулинарный рецепт от статьи на тему приготовления пищи?

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

Приведем самый простой пример:

Предположим, у нас есть отрывок из верстки страницы с контактами:

  <div>   <span>DH Agency</span>   Контакты:   <div>   Санкт-Петербург, ул. Верности 6      </div>   Телефон: +7 000 00–00–00,    Факс: +7 000 00–00–00,    Электронная почта: info@dh-agency.ru  </div>  

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

  <div itemscope itemtype="http://schema.org/Organization">   <span itemprop="name">DH Agency</span>   Контакты:   <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">   Адрес:  <span itemprop="addressLocality">Санкт-Петербург</span>   <span itemprop="streetAddress">ул. Верности 6</span>   </div>   Телефон:<span itemprop="telephone">+7 000 00–00–00/span>,   Факс:<span itemprop="faxNumber">+7 000 00–00–00</span>,   Электронная почта: <span itemprop="email">info@dh-agency.ru</span>  </div>  

Довольно просто и интуитивно понятно, не так ли? Нужно знать только синтаксис. Вся разметка делается в коде сайта, никаких дополнительных файлов создавать не придется.

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

Зачем сайту микроразметка?

Если поисковая система понимает, какой материал находится на сайте, то она постарается сделать сниппеты максимально привлекательными. Расположить цену, условия, ответы/вопросы, отзывы и т.д.

К примеру, Яндекс может написать цену на товар рядом с Вашим сайтом.

Цена в сниппете

Кроме этого, микроразметка помогает точнее разобраться в коммерческих факторах — телефонах, адресах, ценах и подобных.

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

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

  1. Микроразметка влияет на сниппеты и делает сайт заметнее в выдаче. Что в итоге приводит к увеличению посещаемости при прочих равных условиях.
  2. Яндекс и Гугл любят качественный и понятные сайты. Микроразметка, это еще одна ступень приведения сайта в «порядок».

Всем ли сайтам это нужно?

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

  • Кулинарные рецепты;
  • Вопросы и ответы;
  • Отзывы;
  • Цены на товары;
  • Описания товаров;
  • Некоторые другие категории.

Какие бывают виды?

Существует несколько вариантов (синтаксисов) сообщить роботу, что находится у Вас на сайте. Самый распространенный и используемый — разметка «по правилам» shema.org. Именно ее и рекомендует Яндекс.

Кроме данной разметки существует еще Open Graph (разработан Facebook). Данный вид разметки больше ориентирован на соц. сети и используется ВК, ФБ, Твиттер, Гугл Плюс и другими.

Существует так же еще один формат —  JSON-LD, но он используются только Яндекс Почтой. Изменить информацию в сниппетах при его помощи не получится.

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

Schema.org

Schema.org — это самый популярный формат микроразметки, который понимают все популярные поисковые системы. Формат позволяет описать сотни различных сущностей и рассказать об их свойствах.

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

  <div itemscope itemtype="http://schema.org/Organization" >  Тут будут находиться Ваши данные  </div>  

(Вас не должно пугать наличие ссылки на сторонний ресурс. Не стоит прописывать тэгов rel=»nofollow» и подобные.)

Далее Вы размечаете уже конкретные сущности и их свойства. К примеру, адрес Вашей организации.

  <span itemprop="streetAddress">Россия, Санкт-Петербург, ул. Верности</span>  

Подробный синтаксис можно посмотреть на официальном сайте — http://schema.org. (Не официальный перевод на русский язык — http://ruschema.org)

Open Graph

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

Пример ссылки в Facebook

Данную разметку используют все популярные социальные сети — ВКонтакте, Фэйсбук, Твиттер, Линкедин. Яндекс при помощи Open Graph передает данные в свой сервис «Видео».

Кроме формирования привью данный формат подходит для разработчиков приложений.
Синтаксис и подробную информацию можно найти на официальном сайте — http://ogp.me

Микроформаты

Это достаточно популярный способ семантической разметки для HTML страниц. Он позволяет поисковым роботам понимать смысловые значения контента. Сделан он довольно «необычным» способом. Что бы передать поисковому роботу информацию, элементу присваивается атрибут «class», который имеет значение схожее с именем свойства. К примеру, адрес будет выглядеть таким образом:

  <div class="adr"> Россия, Санкт-Петербург, ул. Верности, 6 </div>  

В отличии от других форматов Вам не придется прописывать «лишних» тэгов.

Микроформаты используются множеством сервисов по всему миру, в том числе и Яндексом. Правда, стоит сказать, что на данный момент Яндекс поддерживает не все микроформаты. (актуальный список поддерживаемых форматов можно найти в Интернете)

Подробная информация о синтаксисе доступна на официальном сайте — http://microformats.org/wiki/Main_Page

Какой формат лучше использовать?

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

Рекомендации Яндекса

Следовать данным рекомендация или нет — дело Ваше.

Примеры

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

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

Размечать контактную информацию следует на всех сайтах без исключения. Это позволит поисковой системе разобраться в коммерческих факторах, а так же структурировать сниппет.
С микроразметкой
С микроразметкой контактов
Без микроразметки
Без микроразметки контактов

  <div itemscope itemtype="http://schema.org/Organization">   <span itemprop="name">Фабрика плюшевых ежей "С иголочки"</span>   Контактная информация:   <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">   Адрес фабрики:  <span itemprop="addressLocality">Москва</span>   <span itemprop="streetAddress">ул. Ленина 140</span>   </div>   Телефон:<span itemprop="telephone">+7 945 00–00–00/span>,   Факс:<span itemprop="faxNumber">+7 945 00–00–00</span>,   Электронная почта: <span itemprop="email">info@example.ru</span>  </div>  

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

Эффективнее всего микроразметка проявляет себя при описании товаров. В сниппете появляется цена, преимущества, описание товара и другая важная информация.
С микроразметкой
Цена в сниппете
Без микроразметки
Без микроразметки товаров

  <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="Валюта - рубли, доллары, евро" />  <span itemprop="price">Стоимость товара</span>  <span itemprop="seller">Продавец товара</span>  </div>  </div>  

Пример микроразметки статьи:

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

  <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="Дата публикации">      <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>  

Пример микроразметки «хлебных крошек»

Несмотря на то, что далеко не все пользователи используют хлебные крошки, разметить их нужно. Микроразметка не только позволит поисковой системе лучше ориентироваться у Вас на сайте, но и выдаст в сниппете список подразделов, что привлечет внимание.
С микроразметкой
Микроразметка хлебных крошек
Без микроразметки
Хлебные крошки без микроразметки

    <ul itemscope itemtype="http://schema.org/BreadcrumbList">   <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">  <a href="/" title="Основной раздел" itemprop="item">  <span itemprop="name">Основной раздел</span><meta itemprop="position" content="0">  </a>   </li>   <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">  <a href="/uroven-one/" title="Подраздел уровня 1" itemprop="item"><span itemprop="name">Подраздел уровня 1</span><meta itemprop="position" content="1"></a>   </li>   <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">  <a href="/uroven-one/uroven-two/" title="Подраздел уровня 2" itemprop="item"><span itemprop="name">Подраздел уровня 2</span><meta itemprop="position" content="2"></a>   </li>  </ul>    

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

После того, как Вы сделали микроразметку сразу встает вопрос, как ее проверить? Как убедиться, что поисковая система правильно поймет все то, что Вы написали?

Для этих целей Яндекс и Гугл сделали онлайн сервисы по проверке корректности синтаксиса разметки.
Сервис Яндекса доступен в Вебмастере в разделе «Инструменты» -> «Валидатор микроразметки».
Валидатор микроразметки Яндекса

(Напомним, что Яндекс Вебмастер доступен по ссылке — https://webmaster.yandex.ru)

Сервис Гугл доступен по ссылке — https://search.google.com/structured-data/testing-tool?hl=ru
Валидатор микроразметки Гугл

Будьте предельно внимательны! Данные сервисы проверяют только синтаксис разметки. Оценить корректность данных они не в состоянии. Проверяйте несколько раз, корректно ли описаны сущности.

Подводим итоги

Микроразметка нужна как для коммерческих, так и для информационных ресурсов. Каким синтаксисом пользоваться зависит от целей и личного желания. Если у Вас одна из популярных CMS, таких как Joomla!, WordPress и MODx, то размечать каждую статью нету надобности. Все можно сделать в шаблоне один раз.

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

dh-agency.ru

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

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

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

Сниппет с микроразметкой

 

Видео по микроразметке:

Для чего нужна микроразметка?

Если вы еще не внедрили микроразметку на своем ресурсе, то поторопитесь с этим. И вот 2 причины поторопиться это сделать:

  • во-первых, так удобнее пользователю. Если HTML-код помогает оформить данные, то микроразметка помогает подробно объяснить, что именно мы имели в виду. Не только рассказать о ресурсе, но и показать часть его содержимого. Разметка помогает оптимизировать поиск, сделать этот процесс менее времязатратным;
  • во-вторых, это полезно с коммерческой точки зрения. Когда покупатель видит в поисковой выдаче множество ответов на свой вопрос, то ему легче выбрать сайт, который предоставляет всю информацию о себе именно в выдаче. Соответственно, больше шансов, что он перейдет по показанной ссылке.

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

  • Schema.org — язык роботов поисковых систем Яндекс и Google. Отметим, что его также понимают Bing и Yahoo, и другие роботы менее известных поисковых систем. Schema.org — самый распространенный язык микроразметки. несколько лет назад его приняли за всеобщий стандарт разметки данных. 
  • OpenGraph — способ разметки информации, используемый роботами социальных сетей. Разработала его Facebook, но подхватили Вконтакте, Twitter, Google+, LinkedIn и все остальные. Используется для отображения превью в новостной ленте пользователя. Также этот язык понимает Яндекс.Видео.
  • JSON-LD — способ описания содержания страницы с помощью языка связанных данных. Описанная таким образом информация видна для роботов, но скрыта от людей. Чтобы было понятно: этот язык различает Яндекс.Почта, но оставляет без внимания поисковой робот Яндекса. Может быть использован в качестве дополнения к Schema.org (кстати, структурированные таким образом данные выглядят красивее).
  • Микроформаты — альтернативный способ разметки гипертекста через атрибут “class”. Например, задаем тег<div class=”adr”></div>, то есть сообщаем роботу о том, что внутри <div>помещен адрес.

Что такое микроразметка Schema.org?

Schema.org – набор словарей, используемых для описания объектов и сущностей на страницах сайтов. Стандарт использует микроданные.

В стандарте Schema.org есть порядка 550 классов, но их число неуклонно растёт. Некоторые классы поддерживаются сервисами Яндекса.

Что можно размечать?

Практически всё (существует более 100 схем), но не вся разметка будет использована поисковыми системами. Что точно стоит размечать:

  • Товары
  • Контакты
  • Статьи
  • Отзывы / рейтинги
  • Комментарии
  • Видео
  • Люди (персоны)
  • Рецепты

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

<div itemscope itemtype="http://schema.org/Product"> <!--Указывается схема Product-->  	<!--В поле name указывается наименование товара-->  	<div itemprop="name"><h1>Кровать Мелисса с мягкой спинкой</h1></div>  	<!--В поле image указывается ссылка на картинку товара-->  	<a itemprop="image" href="products_pictures/large_krovat.jpg">  		<img src="products_pictures/medium_krovat.jpg" title="Кровать Мелисса с мягкой спинкой">  	</a>  	<!--Указывается схема Offer-->  	<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">  		<div>8 350 руб.</div>  		<!--В поле price указывается цена товара-->  		<meta itemprop="price" content="8350.00">  		<!--В поле priceCurrency указывается валюта-->  		<meta itemprop="priceCurrency" content="RUB">  	</div>  	<!--В поле description дается описание товара-->  	<div itemprop="description">Цена указана за кровать Мелисса с мягкой спинкой; размером спального места 900х2000 мм. Подушки у спинки кровати изготовляются из искусственной кожи. В комплектацию входит ортопедическое основание на ножках.</div>  	</div>  

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

<div itemscope itemtype=”http://schema.org/Organization”>
<span itemprop=”name”>superwebmaster</span>
Контакты:<div itemscope itemtype=”http://schema.org/ProstalAddress”>
Адрес:
<span itemprop=”streetAddress”>проспект Ленина,11</span>
<span itemprop=”prostalCode”>454055</span>
<span itemprop=”addressLocality”>Челябинск</span>
</div>
Телефон:<span itemprop=”telephone”>+7-908-04-29-***</span>
</div>

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

<div itemscope itemtype="http://schema.org/Article">
<header>
<h1 itemprop="headline name">Пример микроразметки статьи</h1>
</header>
<span itemprop="datePublished" content="ГОД-МЕСЯЦ-ДЕНЬ">Дата размещения</span> 
<span itemprop="author">Солтык Алексей</span>
<div itemprop="description"> 
<p>Текст краткого описания</p> 
<p>...</p>
</div>
<h2 itemprop="alternativeHeadline">Подзаголовок статьи</h2>
<div itemprop="articleBody">
<article> 
<img itemprop="image" src="URL адрес изображения" title="Какое-то изображение в статье" alt="Альтернативное название"> 
<p>Размечаем содержимое статьи!</p> 
<p>...</p>
</article>
</div>
</div>

Микроразметка отзывов (рейтинга)

<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="Название страницы"> 
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer"> 
<meta itemprop="price" content="0.00"> 
</span> 
<p itemprop="description">Описание страницы</p> 
<div class="left" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> 
<meta itemprop="ratingValue" content="4.63" /><!-- Количество отображаемых звезд -->
<meta itemprop="ratingCount" content="9" /><!-- Количество голосов --> 
</div>
</div>

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

<div itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/UserComments">  <span itemprop="commentTime" content="2017-05-23T12:14:22">23.05.2017 12:14:22</span>  <span itemprop="creator">Алексей</span>:  <div itemprop="commentText">Мощная статья. Спасибо!</div>  </div>

Микроразметка персон

<h1 itemprop="name">Анджелина Джоли</h1><br/>  <img itemprop="image" src="//domen.ru/wp-content/uploads/iphone360_20866-1.jpg" alt="Анджелина Джоли">  <b>ФИО на английском:</b> <span itemprop="alternateName">Angelina Jolie</span><br />  <b>Дата рождения:</b> 04 июня 1975 года<br />  <meta itemprop="birthDate" content="1975-06-04"/>  <b>Рост:</b> <span itemprop="height">1.69 м</span><br />  <b>Знак зодиака:</b> близнецы<br />  <b>Место рождения:</b> <span itemprop="birthPlace">Лос-Анджелес, Калифорния, США</span><br />  <b>Карьера:</b> <span itemprop="jobTitle">Актриса, Продюсер, Режиссер, Сценарист</span><br />  <b>Жанры:</b> драма, триллер, боевик<br />  <b>Супруг:</b> <span itemprop="spouse">Джонни Ли Миллер (развод), Билли Боб Торнтон (развод), Брэд Питт, шестеро детей</span><br />

Микроразметка рецептов

<div itemscope itemtype="http://schema.org/Recipe"> 
<h1 itemprop="name" >Курица в пиве с рисом</h1> 
Этот рецепт найден в Тибетском монастыре в 1871 году во время экспедиции графа Никанора Уйского. Он был написан в VI веке до нашей эры на глиняной табличке. 
<img itemprop="resultPhoto" src=​"profit.jpg" /> 
<ul> 
<li>Автор рецепта: <span itemprop="author">Граф Уйский</span></li> 
<li>После приготовления вы получите <span itemprop="recipeYield" >4 порции</span></li> 
<li>Время приготовления: <meta itemprop="totalTime" content="PT45M"/>45 минут</li> 
</ul> 
<h2>Ингредиенты</h2> 
<ul>
 <li itemprop="ingredients"> 1 курица </li>
 <li itemprop="ingredients" > 5 л пива </li> 
<li itemprop="ingredients" > соль </li> 
<li itemprop="ingredients" > перец </li> 
<li itemprop="ingredients" > специи по вкусу </li> 
</ul> 
<h2>Способ приготовления</h2> 
<ul itemprop="recipeInstructions"> 
<li><img itemprop="image" src=​"creks.jpg" alt="нарезанная кусочками курица"/> Курицу нарезать на кусочки, выложить в форму для запекания, посолить, поперчить, добавить специи по вкусу. </li>
 <li><img itemprop="image" src=​"feks.jpg" alt="курица залитая пивом"/> Курицу залить пивом, поставить в духовку. </li> 
<li><img itemprop="image" src=​"peks.jpg" alt="курица в духовке"/> Жарить при температуре 180 градусов в течение 40—45 минут. </li>
 </ul> 
<span itemprop="recipeCategory">Блюда из курицы</span> 
<div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> Пищевая ценность: 
<ul> 
<li>Калории: <span itemprop="calories">120 ккал.</span>,</li> 
<li>Жиры: <span itemprop="fatContent">7 г.</span></li> 
<li>Углеводы: <span itemprop="carbohydrateContent">1 г.</span></li> 
</ul> 
</div> Приятного аппетита! </div>

Влияние микроразметки на ранжирование в Яндексе

Разметка делает ресурс более заметным для пользователей в поисковой выдаче. Яндекс же радеет за то, чтобы пользователи получали ту информацию, которая пытались найти. Поэтому и была внедрена метрика «счастье пользователя». Если сайт с микроразметкой повышает «счастье пользователя», то он ранжируется выше.

Влияние микроразметки на ранжирование в Гугл

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

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

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

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

Инструменты для работы с микроразметкой поисковых систем:

  1. Structured Data Testing Tool. Особенность сервиса состоит в том, что можно на примерах увидеть, как выполняется микроразметка. Просто скопируйте пример в свой шаблон и подставьте $переменные$ в код.
  2. Разделы “Структурированные данные” и “Маркер” в Search Console от Google, которые позволят настроить микроразметку.
  3. Валидатор микроразметки от «Яндекс».
  4. Яндекс.Справочник. Добавьте информацию о своей организации и в результатах поиска “Яндекс” будет показываться адрес, телефон и график работы.

Выводы

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

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

webmaster-seo.ru

Способы проверки микроразметки валидатором от Google

По функционалу проверки микроразметки, поисковые системы Google и Яндекс схожи.

В валидаторе доступно две вкладки, соответственно два способа проверки микроразметки:

  1. по URL-у — способ удобен, если страница размещена в Интернете, необходимо просто скопировать адрес страницы и вставить в соответствующую строку
  2. по HTML- коду- способ удобен, если страница не опубликована в сети, необходимо скопировать фрагмент кода и вставить в соответствующее поле

После выбора способа разметки достаточно нажать кнопку Посмотреть. Результат проверки будет отображен в нижней части страницы.

Сравнение результатов валидаторов от Google и Яндекса.

А теперь подходим к самому интересному, сравнив результаты работы валидаторов от Google и от Яндекса.

Для большей наглядности, используем тот же фрагмент HTML-кода, что и при проверке микроразметки в валидаторе Яндекса.

  &lt;span itemscope itemtype=&quot;http://<a href="https://semantica.in/blog/kak-vnedrit-mikrorazmetku-schema-org-na-sajt-chast-1.html">schema.org</a>/LocalBusiness&quot;&gt;  	&lt;b&gt;Семантика&lt;/b&gt;&lt;/br&gt;  	&lt;span itemprop=&quot;address&quot; itemscope itemtype=&quot;http://schema.org/PostalAddress&quot;&gt;  		&lt;span itemprop=&quot;address&quot;&gt;Воронеж&lt;/span&gt;&lt;/br&gt;  		&lt;span itemprop=&quot;streetAddress&quot;&gt;ул. Торпедо, д. 15&lt;/span&gt;  	&lt;/span&gt;&lt;/br&gt;  	&lt;time itemprop=&quot;openingHours&quot; datetime=&quot;Mo, Tu, We, Th, Fr 09:00−22:00&quot;&gt;  		Пн-Пт, с 09:00 до 22:00  	&lt;/time&gt;&lt;/br&gt;  	&lt;span itemprop=&quot;telephone&quot;&gt;+7 (473) 279-96-26&lt;/span&gt;  &lt;/span&gt;  

Напомним, что при проверке данного фрагмента HTML-кода валидатор Яндекса показал одну ошибку и одно предупреждение. Рассмотрим результат инструмента от Google:

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

 

Подведем итог

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

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

 

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

semantica.in

Адреса и организации

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

Проверить микроразметку google

Словарные статьи

Если сайт справочного или словарного типа, то размечая страницу по этой схеме, можно принять участие в программе «Яндекс.Словарей» (подробнее тут), что улучшит отображение сниппета:

Проверить микроразметку google

Отзывы об автомобилях

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

Проверить микроразметку googleИ в результатах поиска:

Проверить микроразметку google

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

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

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

 

Примеры разметки по схемам, поддерживаемым Google

Отзывы

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

Пример сниппета отдельного отзыва:

Проверить микроразметку google

Пример сниппета сводного отзыва:

Проверить микроразметку google

Мероприятия

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

Проверить микроразметку google

Товары

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

Проверить микроразметку google

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

Мы рассмотрели лишь часть схем, которые поддерживает Google, подробнее узнать обо всех вариантах микроразметки вы можете здесь.

siteclinic.ru

Проверяйте микроразметку в разных валидаторах

  • Валидатор Яндекса
  • Валидатор Google
  • Валидатор Facebook

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

Google поступает ровно так же, причем вы можете еще замечать различия, потому что Google иногда более мягко относится к небольшим ошибкам и не покажет их вам. А валидатор Facebook покажет вам, правильно ли вы разметили, чтобы получить красивые ссылки в соцсетях.

Это он. Вы можете видеть такую выдачу:

Ошибки валидатор Яндекса

Ogp.me – это значит, что на странице есть разметка OpenGraph, значит, что на этой странице отсутствует картинка, что, кажется, не очень хорошо и стоило бы ее добавить. И имеет смысл смотреть, что именно находится в каком теге, и здесь можно посмотреть, что, например, в дескрипшине довольно мало информации и кажется, что она будет не слишком хорошо смотреться в ссылках и может не быть использована поисковыми системами даже там, где потенциально могла бы.

У Google имеется целых два валидатора.

Валидатор от Google

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

проверка странички в Google

Как будет выглядеть проверка странички в Google?

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

Валидатор Facebook выглядит примерно так:

Валидатор Facebook

Здесь есть информация о том, когда эта страница была создана в Facebook, то есть, если после этого были изменения, то тут есть кнопочка «Fetch new scrape information», она заставит Facebook принудительно еще раз собрать информацию со страницы, иначе он будет помнить о том, как он первый раз ее собрал со страницы.

Это очень важно, потому что, если вы там что-то поменяли, у Facebook про это может не быть данных, и он будет показывать предыдущую картинку. И понятно, что здесь он показывает вещи, которые должны быть исправлены, например, на страничке, которую я проверяла, отсутствует свойство «og:url».

Топ-5 ошибок в микроразметке

Выделяют 5 ошибок в микроразметке:

  • В RDFa (в том числе Open Graph) не указан префикс, не являющийся префиксом по умолчанию. Например, article, его нужно явно указывать в HTML, в атрибуте «префикс».
  • В микроданных itemprop указаны за границами тега, содержащего itemscopе, или атрибут itemscopе не указан. Часто бывает так, что dev, а в этом dev’е написано: «itemscope itemtype, например, product», dev закрылся, а дальше идут какие-то itemprop’ы, которые должны относиться к предыдущему product’у. Такие атрибуты ни одна поисковая система, никто их не поймет, как относящиеся к product’y, который был в dev’е, потому что они лежат не в том элементе.
  • Пропущены обязательные для получения результата поля. Это такая общая формулировка. Вообще здесь очень много ошибок, например, в Яндексе мы требуем в sxem.org для товарных предложений указывать валюту, в которой эта цена, потому что мы сами не умеем угадывать, может быть это в китайских юанях. Ее нужно указывать обязательно, об этом валидатор обязательно сообщит.
  • Неверный формат даты (не ISO 8601). Еще одна частая ошибка, когда дата размещается в человекочитаемом формате, но не подходящем для машин.
  • Использование неверного типа данных.

Не всякая разметка одинаково полезна

Иногда микроразметка бывает вредной, а не полезной.

Микроразметка бывает вредной

На этом сайте с помощью скрипта сгенерированная разметка сообщает всем желающим, что у него «title», «описание», «url» – пустые строки, и картинка тоже. Что он в итоге получает?

Проверить микроразметку google

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

Проверяйте микроразметку регулярно

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

o-es.ru


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector