Yandex schema org


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

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

Основные параметры разметки контактной информации Schema для сайта:

  • itemscope itemtype=»http://schema.org/Organization»
  • itemprop=»name» — Название компании
  • itemprop=»address» itemscope itemtype=»http://schema.org/PostalAddress»
  • itemprop=»addressLocality» — Город
  • itemprop=»streetAddress» — Адрес
  • itemprop=»postalCode» — Индекс
  • itemprop=»telephone» — телефон
  • itemprop=»email» — адрес эл. почты

 

Пример 1 (разметка контактов Schema.org с использованием тега meta):

<div itemscope itemtype=»http://schema.org/Organization»>
<meta itemprop=»name» content=»SEO-точка»>
Контакты:
<div itemprop=»address» itemscope itemtype=»http://schema.org/PostalAddress»>
Адрес:
<meta itemprop=»addressLocality» content=»Брянск»>
<meta itemprop=»streetAddress» content=»ул. Дуки, 60″>
<meta itemprop=»postalCode» content=»271007″>
</div>
Телефон:  <meta itemprop=»telephone» content=»+7 953 276 70 95″>
Факс:  <meta itemprop=»faxNumber» content=»+7 953 276 70 95″>
Электронная почта:  <meta itemprop=»email» content=»zullbatol@gmail.com»>
</div>

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

 

Пример 2 (с разметкой контактов Microdata):

<div itemscope itemtype=»http://schema.org/Organization»>
<span itemprop=»name»> SEO-точка </span>
Контакты:
<div itemprop=»address» itemscope itemtype=»http://schema.org/PostalAddress»>
Адрес:
<span itemprop=»addressLocality»> Брянск </span>,
<span itemprop=»streetAddress»> ул.


ки, 60</span>,
<span itemprop=»postalCode»>271007</span>
</div>
Телефон:  <span itemprop=»telephone»>+7 953 276 70 95</span>
Факс:  <span itemprop=»faxNumber»>+7 953 276 70 95</span>
Электронная почта:  <span itemprop=»email»> zullbatol@gmail.com </span>
</div>

разметка шейма для контактных данных

Проверить микроразметку Schema для контактов можно  в  Яндекс Валидатор Разметки —  перейдите по ссылке: https://webmaster.yandex.ru/microtest.xml

Смотрите также: Разметка отзывов и комментариев

www.seo-ap.ru

Что такое семантическая разметка?

Подходящего определения на просторах Интернета мне найти не удалось, поэтому я его решил составить его из 4 наиболее подходящих определений.

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


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

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

Виды разметки данных

  1. Data Vocabulary – стандарт разметки данных, которая разрабатывала компания Google до июня 2011 года.

    Официальный сайт: http://www.data-vocabulary.org/

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

  2. Dublin Core, или Дублинское ядро – стандарт, разработанный в 1995 году. Семантика Дублинского ядра была создана международной междисциплинарной группой профессионалов библиотечного и музейного дела, компьютерных наук. Представляет собой набор из метатегов, 15 основных и 3-х дополнительных свойств.

    Официальный сайт: http://dublincore.org/

    Признаков использования данных из этого стандарта в поисковых системах не обнаружено.

  3. FOAF, или Friend of a Friend – «друг друга» – стандарт, созданный Либби Миллером и Дэном Брикли в 2000 году. Используется в основном для домашних страниц и социальных сетей. Решает задачу построения связей между людьми и объединению их.

    Официальный сайт: http://www.foaf-project.org/


  4. Microformats, или же микроформаты – стандарт, созданный в 2005 году сообществом заинтересованных энтузиастов из WC3.

    Официальный сайт: http://microformats.org/

    Данный стандарт был очень популярным до появления Schema.org и на многих сайтах используется до сих пор. На момент написания статьи Яндекс поддерживает следующие Microformats: hCard – формат разметки контактов (адресов, телефонов и т.д.); hRecipe – формат описания кулинарных рецептов; hReview – формат разметки отзывов.

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

  1. Open Graph – стандарт семантической разметки веб-документов, разработанный компанией Фейсбук с первоначальной целью контроля превью при размещении в социальных сетях.

    Официальный сайт: http://ogp.me/

    Русскоязычный сайт: http://ruogp.me/

    Данная разметка представляет собой набор метатегов, находящихся между элементами <head> и </head>.

    Также хочется отметить, что в стандарте Open Graph одна страница описывает только один объект – человека, продукт, фильм или другую сущность.


    Давайте рассмотрим основные теги более подробно.

    <meta property=»og:title» content=»Заголовок»/>
    <meta property=»og:description» content=»Описание страницы»/>
    <meta property=»og:image» content=»изображение.jpg»>
    <meta property=»og:type» content=»Тип обьекта»/>
    <meta property=»og:url» content= «Идентификатор адреса страницы» />

    Пример использования:

    <meta property=»og:type» content=»article» />
    <meta property=»og:title» content=»Яйца фаршированные тунцом — ********- Как готовить вкусно!» />
    <meta property=»og:description» content=»Если вам хочется порадовать себя и своих родных чем-то вкусным, легким и несложным в приготовлении блюдом, то воспользуйтесь нашим чудесным рецептом. Яйца, фаршированные тунцом, выглядят потрясающе аппетитными, на вкус – удовлетворят любого гурмана, плюс – полезны и калорий не так, чтобы много. Зато удовольствия будет с избытком. Особенно, если к готовке подключить свою «вторую половинку»,…Подробнее» />
    <meta property=»og:url» content=»http://****/recipe/yajca-farshirovannye-tuncom/»/>
    <meta property=»og:image» content=»http://***/wp-content/uploads/2016/11/Tuna-Deviled-Eggs-1-15.jpg»/>

    Получаем при шаринге в соцсетях следующее:


    Формат опенграф шаринг в Фейсбук

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

  2. И вот, наконец, мы подобрались, на мой взгляд, к основному стандарту shema.org, который поисковые системы рекомендуют использовать (но не стоит думать, что вы можете использовать только данный формат – не забывайте, что всё зависит от целей).

    Shema.org – стандарт, разработанный 2 июня 2011 года при совместном участии ведущих поисковых систем мира (Google, Yahoo, Microsoft), а 1 ноября 2011 года к ним присоединился и Яндекс.

    Официальный сайт: https://schema.org/

    Русскоязычный сайт: http://ruschema.org/ (на данный момент содержит не все сущности).

    Прежде чем перейти дальше, рассмотрим, что такое синтаксис микроразметки.

    Синтаксис микроразметки (формат) — способ использования стандарта (словаря). Формат устанавливает, при помощи каких тегов и как будут описываться сущности и их свойства на веб-документах.


    Для shema.org на данный момент описано 3 основных синтаксиса: Microdata, RDFa и JSON-LD (рекомендуемый компанией Google).

    Но в данном случае советом от Google мы всё же рекомендуем пренебречь и использовать синтаксис Microdata. Это связано с тем, что синтаксис JSON-LD (офицальный сайт http://json-ld.org/) на данный момент используется Яндекс.Почтой, но пока не отображается в результатах поиска Яндекса (то есть сформировать расширенный сниппет в Яндексе при использовании JSON-LD у вас не получится).

Вроде со стандартом определились, с синтаксисом тоже.

Для начала определимся, какая основная цель разметки. Если вы прочитали статью о том, что с разметкой вам гарантировано место в топ-10, то это не так. Цель микроразметки – улучшить понимание сайта в глазах робота, отправить в базы знаний поисковых систем информацию, повысить CTR вашего сниппета (что косвенно может увеличить и ваш трафик и позиции). Но надо понимать, что это всё косвенные показатели. Сайты с использованием микроразметки и без неё ранжируются одинаково.

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

Более подробно разберем три наиболее встречаемых примера:

Разметка карточки товаров schema.org


Товарные карточки – размечаем по сущности Product. Реализация данного вида поможет получить нам следующий сниппет в Яндексе:

Товарный сниппет schema.org в Яндексе

Не путать с товарным сниппетом в выдаче Яндекса, полученным при использовании .yml файла из Яндекс.Маркета или сервиса «Товары и цены» вебмастера Яндекса.

Товарный сниппет .YML в Яндексе

В Google:

Товарный сниппет в Google

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

Используя словарь schema.org и синтаксис Microdata, добавляем к существующему html-коду следующее.

<!—Указывается схема Product.—>
<div itemscope itemtype=»http://schema.org/Product»>
<!—В поле name указывается наименование товара.—>
<h1 itemprop=»name»>COTTON DREAMS Наволочки </h1>
<!—В поле image указывается ссылка на картинку товара.—>
<a itemprop=»image» class=»fancyboxitem» href=»/userfiles/cotton-dreams.jpeg» title=»COTTON DREAMS Наволочки » ><img src=»/userfiles/cotton-dreams.jpeg» alt=.


8212;>
<span itemprop=»price» content=»929.00″ class=»strong»>929,00 <small>р.</small>
<!—В поле priceCurrency указывается валюта данные выводим мета информацией так как на странице она не где не присутствует.—>
<meta itemprop=»priceCurrency» content=»RUB»>
<!—Указывается свойство InStock, которое свидетельствует о том, что товар в наличии, данные выводим также метаинформацией —>
<meta itemprop=»availability» content=»http://schema.org/InStock»/>

Разметка отзывов в товарной карточке schema.org

Отзывы о товаре или услуге размечаем по сущности Review.

<!—Указывается схема Review.—>
<div class=»comment» itemprop=»review» itemscope itemtype=»http://schema.org/Review»>
<!—В поле date указывается дата публикации отзыва..


7;reviewRating» itemscope itemtype=»http://schema.org/Rating»>
<!—В поле worstRating метаинформацией указываем минимально возможный рейтинг.—>
<meta itemprop=»worstRating» content = «1»/>
<!—В поле ratingValue мета информацией указываем текущий рейтинг.—>
<meta itemprop=»ratingValue» content = «5»/>
<!—В поле bestRating метаинформацией указываем максимально возможный рейтинг.—>
<meta itemprop=»bestRating» content = «5»/>
</span>
<!—Указывается схема Person.—>
<span itemprop=»author» itemscope itemtype=»http://schema.org/Person»>
<!—В поле name указываем имя автора.—>
<span itemprop=»name» class=»name»>Наталья</span>
</span>
<!—В поле reviewBody указываем сам отзыв на товар.—>
<p itemprop=»reviewBody»>Супер вещь!) Эффект сразу и налицо)</p>
</div>
</div>

Без разметки наш сниппет выглядел в Google так:

Сниппет без разметки Google

С использованием разметки по сущности Person и Review сниппет выглядит так:

Красивый товарный с рейтингом сниппет Google

Согласитесь, сниппет стал намного привлекательней. С таким сниппетом гарантированно повышение CTR.

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

Красивый сниппет мобильная выдача Google

Разметка рецептов по schema.org

Отойдем от коммерческой тематики и попробуем разметить сущность Recipe.

Сперва немного отвлечемся от темы и опишем историю, которая произошла с сайтом нашего клиента. Клиент обратился к нам с просьбой разметить информацию на его сайте, а именно рецепты. В соответствии со стандартом schema.org и сущностью Recipe мы это и сделали. Начали ждать положенных две недели для переиндексации ресурса. Через две недели Google сайт переиндексировал практически полностью. И отображал вот такой вот красивый сниппет:

Сниппет рецептов Google

А в Яндексе как было, так и осталось. При том, что сайт чист, без санкций, дизайн шикарный, сайт посещаем, разметка выполнена верно, в валидаторе ошибок не наблюдалось. Поискав причину ещё пару дней, решили отписать Платону.

На вопрос, почему такая ситуация с данным сайтом, мы получили следующий ответ.

Ответ Яндекса

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

Теперь перейдем к реализации разметки кулинарных сайтов.

<!—Указывается схема Recipe.—>
<div class=»single-panel» itemscope itemtype=»http://schema.org/Recipe»>
<!—В поле totalTime указывается время приготовления в формате ISO 8601.—>
</i><meta itemprop=»totalTime» content=»PT40M»/><span> 40 мин.</span></li>
<!—В поле name название рецепта или блюда.—>
<h1 itemprop=»name»>Название рецепта</h1>
<!—В поле recipeYield количество порций на выходе—>
<span itemprop=»recipeYield»>Порций 6</span>
<!—В поле ingredients количество ингредиентов рецепта (как правило, несколько) —>
<div class=»print-ingredient» itemprop=»ingredients»>
<span class=»ingredient-amount»>6шт.</span>
<span class=»ingredient-name»>Яйца</span>br> </div> <div class=»print-ingredient» itemprop=»ingredients»>
<span class=»ingredient-amount»>400гр.</span>
<span class=»ingredient-name»>Сахарный песок</span>
</div>
……………………И т.д ингредиенты……………………………
<div class=»print-ingredient» itemprop=»ingredients»>
<span class=»ingredient-amount»>100гр.</span>
<span class=»ingredient-name»>Какао</span>
</div>
<!—В поле description дается описание рецепта.—>
<div class=»single-content-self» itemprop=»description»>
<p>Торт Черепаха готовится не трудно, к тому же он бесспорно станет любимым тортом для ваших детей, поскольку выглядит он как симпатичная черепашка.</p>
</div>
<!—В поле recipeInstructions инструкция по приготовлению.—>
<table class=»recipe-steps-table» itemprop=»recipeInstructions»>
<!—В поле image изображение процесса приготовления, может быть несколько. Рекомендуем указать данное поле для формирования улучшенного сниппета.—>
<img itemprop=»image» src=»/адрес изображения.jpg» alt=»»>
<p>…….</p>
</table>
<!—В схема nutrition описывается энергетическая или пищевая ценность блюда—>
<div class=»single-nutritions-list» itemprop=»nutrition» itemscope itemtype=»http://schema.org/NutritionInformation»>
<!—В поле calories указывается калорийность блюда—>
<div class=»single-nutrition-value» itemprop=»calories»>2100</div>
</div>
<!—В поле author указывается указывается автор, написавший данный рецепт—>
<h3 class=»author-name» itemprop=»author»><a rel=»nofollow» href=»****/»>Victory</a></h3>
…..
</div>
</p>
<p><a class=»photos p-zoom» href=»/files/blog/2017/social-partners_13.jpg» rel=»imgs»>
<img class=»shadowed» src=»/files/blog/2017/social-partners_13-mini.jpg» alt=»Формат опенграф шаринг в Фейсбук»>
<span class=»zoom»></span> </a>

В Гугле наш красивый сниппет:

Сниппет рецептов Google с выводом калорий

Мы разместим скриншот снипетта в Яндексе, когда информация обновится (ориентировочно через две недели).

UPD от 05.06.2017: Как и обещали, добавляем скрин из Яндекса:

Сниппет рецептов в Яндексе

1ps.ru

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

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

Yandex schema org

Люди, которые отвечают за разработку и всю техническую часть таких сайтов, как Holodilnik.ru, Ozon.ru, Lenta.ru, Interfax.ru и Ivi.ru, ответили на вопросы о том, как на практике происходит внедрение микроразметки и каких результатов она позволяет добиться. А мы со своей стороны рассказали, какие типы мы бы порекомендовали таким сайтам и для чего.

Интернет-магазины

Денис Егоров, руководитель направления интернет-маркетинга Holodilnik.ru:

На сайте holodilnik.ru мы решили внедрить сразу два типа разметки, Open Graph и Schema.org/Product. Причина такого выбора проста — один из этих типов поддерживает поисковик на «Я», а второй — поисковик на «G»:) Внедрять ее было достаточно легко, и о своем выборе нам не пришлось пожалеть.

Yandex schema org

Конечно, многие сейчас задаются вопросом, какова эффективность того или иного внедрения, в том числе и какова эффективность внедрения мироразметки — на все нужны ресурсы, которые потом должны себя оправдать. Вопрос этот, действительно, интересен. На момент внедрения мы считали микроразметку необходимым улучшением, и у нас не было цели напрямую отслеживать ее эффективность. Однако за год, прошедший с момента ее внедрения, мы получили следующее: глубина просмотра посетителей из поисковиков выросла почти в 2 раза, при этом показатель отказов снизился в 3-4 раза. Количество же достижения цели выросло на 20-30%. Согласитесь, это неплохой показатель. И хотя, конечно, мы не связываем весь этот рост только с внедрением одной лишь микроразметки, значительная доля изменения этих показателей, безусловно, ее заслуга.

Андрей Кузьмичёв, руководитель направления поисковой оптимизации Ozon.ru:

В Ozon.ru мы внедрили разметку разных стандартов, потому что каждая из них дает выигрыш в чем-то своем: микроформат hCard и Schema.org дают качественное представление в поисковых системах, а Open Graph — в социальных сетях. В общем и целом, благодаря этой разметке наши сниппеты стали более качественными и структурированными.

Yandex schema org

На достигнутом мы останавливаться не собираемся, как, видимо, и поисковые системы. Чем больше новых типов микроразметки они начинают учитывать, тем больше у магазинов становиться возможностей как-то выделиться на поиске. Так, недавно стала учитываться разметка Schema.org/Product по новой партнерской программе Яндекса для разметки товаров. Однако для некоторых категорий мы будем использовать семантическую разметку товаров совместно с программой «Товары и цены», которая пока иногда дает преимущества по скорости обновления данных о продуктах. И такая задача уже стоит у наших программистов.

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

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

Yandex schema org

Для формирования таких сниппетов нужны указанные поля name, description, price и priceCurrency:

<section itemscope itemtype="http://schema.org/Product">  <h1 itemprop="name"> массажёр Beurer MG 81 </h1>  <span itemprop="description"> Массажер Beurer MG81 - это современный, элегантный и многофункциональный прибор. Крупные массажные головки эргономичной формы выполняют глубокий вибрационный (ударный) массаж на любом участке тела. Дополнительно массируемый участок тела можно прогреть инфракрасным нагревательным элементом. Также возможно подключить 2 разные массажные насадки. Вибромассажер с инфракрасным излучателем может проводить массаж с различной интенсивностью. Вы можете проводить массаж и самостоятельно, и с помощью другого человека. Длинный сетевой шнур позволяет проводить сеанс массажа в удобном месте независимо от расположения розетки. Также у массажера удобная и не скользящая ручка для простого и надежного применения.</span>  <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">  <meta itemprop="priceCurrency" content="RUB" />  <span itemprop="price" >3320</span>  <span class="b-price__sign">руб.</span>  </span> </section> 

Большое влияние на решение о покупке оказывают отзывы. Если у вас есть отзывы, мы рекомендуем добавить специальную разметку: в Product для этого есть свойство AggregateRating, а в микроформатах есть тип hReview.

В Google на основе разметки формируются специальные сниппеты.

Yandex schema org

Для этого необходимо указать значение поля AggregateRating:

<div itemscope itemtype="http://schema.org/Product">  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">  <h1 itemprop="name"> "Смартфон Apple iPhone 6 4.7" 16Gb Space Gray</h1>  <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> 	<meta itemprop="ratingValue" content="4,3" /> 	<meta itemprop="ratingCount" content="15" /> 	<meta itemprop="bestRating" content="5" />  </span>  </div> </div> 

Для страницы с контактами подходит разметка Organization от Schema.org или микроформат hCard. C их помощью можно участвовать в партнерской программе Яндекса: попасть в справочник и улучшить ответы не только в поиске, но и на Яндекс.Картах.

Yandex schema org

При использовании микроформата необходимо указать название организации, адрес и телефон:

<div class="TabbedPanelsContentGroup vcard">  <span class="fn org">Онлайн-мегамаркет OZON.ru</span>: год за годом  <p>Офис в Москве</p>  <div class="adr">  <p>   <span class="postal-code">125252</span>  <abbr class="country-name" title="Россия"></abbr>  <abbr class="region" title="Московская Область"></abbr>, г.  <span class="locality">Москва</span>,  <span class="street-address">Чапаевский переулок, д. 14</span>  </p>  </div>  <span class="url" title="http://www.ozon.ru"></span>  <abbr class="tel" title="+74955102727"></abbr>  <span class="geo">  <span class="latitude">  <span class="value-title" title="55.798362"></span>  </span>  <span class="longitude">  <span class="value-title" title="37.517774"></span>  </span>  </span> </div> 

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

Yandex schema org

Для формирования превью достаточно разметки названия, краткого описания и картинки.

<meta property="og:title" content="Тяжело без крокодила" /> <meta property="og:description" content="Эти стихотворения писатель-сатирик и публицист Виктор Шендерович сочинил почти тридцать лет назад. Он наблюдал, как растёт его дочка, и вспоминал собственное детство: те далёкие времена, когда телефоны были с дисками и проводами, а большущая... " /> <meta property="og:type" content="book" /> <meta property="og:url" content="http://www.labirint.ru/books/453612/" /> <meta property="og:image" content="http://img1.labirint.ru/books/453612/big.jpg" /> 

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

Yandex schema org

Разметка полей name, description, image, url нужна для формирования таблицы, а для указания цен offers.priceCurrency, offers.price.

<div itemscope itemtype="http://schema.org/ItemList">  <h1 itemprop="name"> Сковороды Rondell</h1>  <link itemprop="url" href="http://home.wikimart.ru/kitchen_one/cooking_utensils/pans/brand/RONDELL/"/>   <span itemprop="numberOfElements" class="count">{{totalModelsCount}}</span>  <span itemprop="numberOfElements" class="count">{{currentModelsCount}}</span> </div> 

Платформа «Острова» находится на стадии бета-тестирования

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

СМИ

Александр Ломакин, технический директор Lenta.ru:

В Lenta.ru мы используем три типа семантической разметки: это Open Graph, Twitter Cards и Schema.org.
С первыми двумя стандартами от Facebook и Twitter все просто — наши материалы достаточно много «шерят» и «лайкают», поэтому в социальных сетях они должны выглядеть ничуть не хуже, чем на основном сайте. С помощью разметки мы это контролируем, размечая фотографию, заголовок, и краткое описание.

Yandex schema org

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

В итоге наши материалы стали заметнее как в социальных сетях, так и в результатах выдачи поисковых систем. Но, что самое главное, мы получили дополнительный трафик. Честно говоря, я не понимаю, почему большое количество ресурсов забивают и не используют микроразметку. Ведь даже на такой большой сайт, как Lenta.ru, добавить разметку очень просто. Поэтому мы не хотим останавливаться на имеющейся разметке и в ближайшем будущем планируем внедрить еще один тип — микроформат hNews, который сделает наши материалы более читабельными в сервисах типа Readability.

Михаил Воблов, руководитель разработки Interfax.ru:

Мы задумались над внедрением микроразметки в тот момент, когда осознали важность социальных сетей, в частности, Facebook, и трафика, который от них поступает. Научиться отображать там наши материалы в удобной форме — с правильной картинкой и с нужной текстовой вставкой, — вот какая задача перед нами стояла. И она решалась при помощи Open Graph, именно поэтому этот тип стал первой внедренной разметкой на нашем сайте.

Yandex schema org

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

На сайтах СМИ содержатся страницы с разными видами контента — как текстами, так и мультимедийными материалами.

На все страницы статей, новостей и репортажей, на наш взгляд, крайне важно добавить Open Graph — как правило, на отдельные новости ссылаются и пользователи, и группы в своих постах. По тем же причинам рекомендуем использовать Twitter Cards.

Yandex schema org

<meta content="summary" property="twitter:card"> <meta content="@lentaruofficial" property="twitter:site"> <meta content="228661749" property="twitter:site:id"> <meta content="article" property="og:type"> <meta content="«Яндекс.Музыка» ввела функцию рекомендаций новых треков" property="og:title"> <meta content="http://icdn.lenta.ru/images/2014/09/17/15/20140917150310534/original_bb8b02c32aa88565e4147f7cda1bebed.jpg" property="og:image"> <meta content="«Яндекс» обновил свой музыкальный сервис, главной особенностью которого стала система персональных рекомендаций.Cистема основывается на песнях, которые слушают друзья пользователя по «ВКонтакте» и Facebook, также рассказывает о музыкальных новинках, например, звучащих в блокбастерах или на фестивалях." property="og:description"> 

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

Yandex schema org

Можно указать автора, заголовок и краткое содержание. В данном случае остров строится на основе заголовка и содержания:

<div itemscope itemtype="http://schema.org/Article">  <h1 itemprop="name">Детский театральный фестиваль "Большая перемена" открывается в Москве</h1>  <div itemprop="description">Традиционно программа фестиваля состоит из основной и специальной программ. Если основную афишу формируют из зарубежных и российских спектаклей, то в дополнительную входят мастер-классы и встречи, тема которых - театральные технологии и искусство для детей.</div> </div> 

Платформа «Острова» находится на стадии бета-тестирования

На страницу с контактами можно добавить разметку Organization или hCard.

Видеохостинги

habr.com

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

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

Семантическая разметка или микроразметка была введена поисковыми системами относительно недавно (начиная с 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

Проверять ли микроразметку валидатором Яндекса?

Ответ на этот вопрос однозначно- Да!  Почему?

  1. Валидатор микроразметки Яндекс позволяет проверить код страницы на корректность распознавания метаданных микроразметки;
  2. Также валидатор проверяет код на соответствие требованиям сервисов Яндекса.

 

О валидаторе микроразметки Yandex

Валидатор поддерживает следующие виды семантической микроразметки и словари:

  1. микроформаты;
  2. Schema.org;
  3. микроданные HTML;
  4. RDF;
  5. Open Graph.

По микроразметке Schema.org Яндекс на данный момент поддерживаются следующие схемы:

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

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

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

1. По URL-у документа: способ удобен, если ресурс находится в сети. Необходимо в представленное поле ввести адрес сайта.

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

  • о следующих ошибках:
  1. Страница не может быть загружена;
  2. Микроразметка не обнаружена =(
  3. Поле отсутствует или пусто
  • о следующих предупреждениях:
  1. поле не определено в спецификации
  2. поле не является корректным значением

А теперь рассмотрим пример: имеется произвольный код со страницы «Контакты» :

  <span itemscope itemtype="http://schema.org/LocalBusiness">  	<b>Семантика</b></br>  	<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">  		<span itemprop="address">Воронеж</span></br>  		<span itemprop="streetAddress">ул. Торпедо, д. 15</span>  	</span></br>  	<time itemprop="openingHours" datetime="Mo, Tu, We, Th, Fr 09:00−22:00">  		Пн-Пт, с 09:00 до 22:00  	</time></br>  	<span itemprop="telephone">+7 (473) 279-96-26</span>  </span>  

Проверим в валидаторе Яндекса:

 

Валидатор показал что у нас имеется ошибка и предупреждение. Информация об ошибках достаточно подробна. Приведем к валидности разметку.

  1. Ошибка: поле name отсутствует или пусто — name относится к сущности Organization, и валидатор Яндекса настаивает, чтобы мы присвоили соответствующий атрибут к тегу с названием организации. Название организации у нас имеется — Семантика. Нам необходимо сделать следующие правки:
     ... <span itemprop="name"><b>Семантика</b></span></br> ... 
  2. Предупреждение: поле address не определено в спецификации. Предупреждение сообщает, что у сущности PostalAddressнет в спецификации свойства address. В чем же мы ошиблись? Зайдем на официальный сайт Schema.org, найдем данную сущность и выясним.

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

     ... <span itemprop="addressLocality">Воронеж</span></br> ... 

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

 

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

semantica.in

Основы микроразметки Schema.org

  • Что такое микроразметка сайта?

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

  • Есть ли Schema.org на русском?

  • Как сделать разметку страницы или сайта?

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

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

  • Рекомендации Google по применению микроразметки

  • Какую микроразметку использовать для своего сайта?

  • Генератор микроразметки Google

  • Как влияет разметка Schema на индексацию Google?

Как проверить "правильность" микроразметки Schema.org?

Для проверки валидации ("правильности") микроразметки предназначены специальные сервисы, которые были разработаны поисковыми системами. Мы будем в данной статье проверять микроразметку для поисковой системы Yandex и Google.

Вот ссылки на два сервиса проверки валидации микроразметки Schema.org:

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

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

Как раскрутить сайт с нуля до 32 000 посетителей в месяц

Как пользоваться валидаторами микроразметки?

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

Итак, начнем с валидатора от Google. Страница выглядит следующим образом:

Есть два варианта проверки валидации страницы:

  1. С помощью прямой вставки HTML кода
  2. С помощью вставки URL адреса страницы, которую необходимо проверить

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

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

После проверки в валидаторе Google появится слева код Вашей HTML страницы, а справа — какая микроразметка там присутствует и есть ли там ошибки:

С валидатором Google я думаю все понятно. Перейдем к валидатору от Yandex.

Когда Вы зайдете на сайт с валидатором микроразметки от Yandex, Вы увидите несколько иную картину, но смысл там остается тот же:

Здесь интерфейс немного проще и опять же есть два варианта проверки Вашего HTML кода: с помощью вставки исходного кода страницы, либо с помощью вставки лишь URL необходимой страницы.

После того как Вы проверили свою страницу на валидность микроразметки, Yandex покажет свои ошибки немного в другом формате, прямо рядом с микроразметкой:

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

Где проверять свою микроразметку Вы сейчас знаете. Поэтому немедленно перейдите на свой сайт, скопируйте URL ссылку первой же статьи и проверьте ее на валидацию.

Очень много ошибок? Не волнуйтесь, все можно исправить. Главное разобраться в этом постепенно исправить все ошибки.

Шаг 1. Что необходимо разметить на странице?

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

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

В данной статье я покажу как сделать пример для сайта, под управлением CMS WordPress. А на данной CMS чаще всего создают блоги. Поэтому будем писать разметку для такого типа страниц, как "Статья".

Далее нам необходимо определить, какую сущность из словаря мы будем использовать. На официальном ресурсе Schema.org есть следующая структура: Article. Но внутри нее есть подструктуры, которые мы можем использовать. Спускаясь все глубже по подструктурам я нашел следующий тип: BlogPosting. Он является частным вариантом сущности Article. И он отлично подходит для разметки записей на блогах.

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

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

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

Шаг 2. Формируем шаблон микроразметки

Что именно будем размечать стало понятно. Осталось собрать правильную структуру.

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

ВАЖНО: Google постоянно вносит изменения и оставил «звездочки» только для страниц с продуктами. Есть сайты, которые это обходят, но все же желательно размечать так, как этого требует Schema.org. Поэтому сейчас код был изменен и «звездочки» на поиске можно сделать только в сущности Product. Это больше относится к таким услугам и товарам, но не к обычным статьям.

Без прелюдий перейдем сразу к делу. После многочисленных попыток сделать микроразметку Schema.org валидной для Google и Яндекса получилась следующая структура:

      

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

  • Строка 1: объявляем тип контента, который будет размечен.
  • Строка 5: здесь указываем URL адрес страницы, на которой сейчас находится пользователь, то есть адрес текущей статьи.
  • Строка с 8 по 18: небольшая подструктура, в которой необходимо указать более подробно сведения о сайте: логотип (адрес до изображения и его размеры), телефон, адрес и название компании (сайта).
    • Строка 9 по 13: еще одна подструктура с выводом изображения, то есть логотипа. Все изображения, которые необходимы для микроразметки необходимо выводить именно в такой структуре, где помимо адреса до изображения в meta-тегах еще указывается информация о его размерах.
    • Строка 14: указываем телефон, если он есть.
    • Строка 15: реальный адрес, если работаете в офисе, например.
    • Строка 16: здесь пишем название компании.
  • Строка 21: дата публикации статьи. Здесь будьте очень внимательны, потому что ее указывать необходимо в специальном формате: "ГОД-МЕСЯЦ-ДЕНЬ". И обязательно разделитель должен быть знак "".
  • Строка 24: дата последнего изменения статьи, чтобы подсказать поисковику какую из статей необходимо переиндексировать, если она была изменена в последнее время. Здесь также действуют правила из предыдущего пункта.
  • Строка с 27 по 29: указываем в специальной подструктуре информацию об авторе статьи.
  • Строка 32 по 45: основная контентная часть Вашей статьи, внутри которой необходимо отметить несколько элементов:
    • Строка 35: заголовок Вашей статьи. Его помечаем следующим образом, добавляя к тегу заголовка свойство — itemprop="headline";
    • Строка 38 по 42: как Вы уже видели ранее, здесь располагается подструктура с изображением. Но в данном случае здесь мы указываем на главное изображение в статье;

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

Если Вы разобрались в структуре микроразметки Schema.org для статьи, то проделали уже 80% работы. Осталось малость, но эта "малость" требует технических знаний. Потому что сейчас необходимо перенести данную структуру на реальный работающий сайт.

Есть вариант сделать проще с помощью мастера разметки структурированных данных от Google.

Когда попадете туда — увидите следующее:

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

Чтобы разметить, необходимо либо ввести URL страницы, либо вставить HTML этой же страницы.

Мы введем адрес одной из статей сайта и на его примере покажу как разметить:

Вы попадете на страницу, где справа будут указаны элементы, которые необходимо пометить на странице слева.

Делается очень просто — вам лишь необходимо выделить элемент слева и затем выбрать к чему он относится.

Когда закончите, необходимо кликнуть справа вверху по кнопке «Создать HTML». Вас перенаправит на страницу с готовым HTML кодом и разметкой для вставки на сайт:

Есть 2 варианта внедрения этой разметки на свой сайт:

  • JSON-LD: необходимо лишь вставить между тегами head сгенерированный тег script;
  • Микроданные: в этом случае необходимо найти на сайте аналогичные элементы в своей HTML структуре и разметить их, как в сгенерированном HTML.

В CMS, таких как WordPress, OpenCart и других все делается с помощью плагинов, не вручную. Ниже посмотрим с помощью каких плагинов.

Как раскрутить сайт с нуля до 32 000 посетителей в месяц

Шаг 3. Внедряем микроразметку Schema.org на реальный сайт

Многие используют различные CMS. Поэтому нет уникального кода, который бы работал сразу на любом сайте. Но у Вас есть код микроразметки, который получился у меня в ходе многочисленных поисков. Вам останется постепенно внедрить данную разметку на своем сайте. И сейчас я дам советы, которые помогут Вам в этом:

  1. Начинайте разметку с основных структур. То есть для начала разметьте основную сущность, внутри которой находятся все остальные элементы. Поэтому сначала необходимо найти блок, в котором содержится все: изображение, автор, дата и так далее;
  2. Далее займитесь разметкой блока "Organization". Потому что он не меняется динамически. Его необходимо один раз сделать и поместить внутрь сущности "BlogPosting". Данный блок затем скройте с помощью CSS стилей.
  3. Затем необходимо разметить дату публикации и дату последнего изменения. Сделать это несложно. В каждой CMS есть своя функция, которая отвечает за это. Так как это мета-теги, то скрывать ничего не нужно. Например в WordPress дата публикации и дата изменения выводятся следующим образом:
    •  the_time('o-m-d'); // дата публикации статьи the_modified_date('o-m-d'); // дата изменения статьи 

      Вам лишь необходимо разместить это в соответствующих мета-тегах.

  4. Далее отметьте подструктуру "articleBody". Именно внутри нее Вам необходимо будет указать заголовок и главное изображение статьи.
  5. И последним шагом исправьте разметку главного изображения в статье. Так как это, чаще всего, сделать технически сложнее всего, то оставьте данный элемент на концовку.

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

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

Кликаете в правом верхнем углу по кнопке «Предварительный просмотр» и попадаете на странице предпросмотра:

Ошибки микроразметки Schema.org

Рассмотрим самые популярные ошибки при добавлении микроразметки Schema.

  • Необходимо указать значение для поля itemReviewed

  • Необходимо указать значение для поля item

  • Необходимо указать значение для поля url

  • Необходимо указать значение для поля image

  • Для id указан недопустимый url

  • Необходимо указать значение для поля itemListElement

      
    • Главная
    • Онлайн маркетинг

Частозадаваемые вопросы по микроразметке Schema.org

  • Itemprop что это?

  • Как узнать тип микроразметки в Гугл?

  • Как разместить URL сайта в Schema.org?

  • Каким образом можно проверить корректность настройки микроразметки?

  • Плагины внедрения микроразметки для CMS

  • Как выбрать тип Schema.org?

  • Как исправить ошибку микроданных в Google?

  • Каким разметить номер телефона с помощью Schema.org?

  • Как создать микроразметку для Яндекса онлайн?

  • Валидатор не видит разметку

  • Плагин проверки микроразметки в браузере Chrome

  • Как добавить микроразметку для сайтов на Wix? (Schema.org)

  • Как добавить микроразметку для сайтов на Tilda? (Schema.org)

Вывод

Многие, возможно, начнут возмущаться, что нет готового решения, которого все так ждали. Все хотят волшебную таблетку: "скопировал->вставил". Такого не будет, если Вы хотите реальных и ощутимых результатов. У Вас индивидуальный шаблон, у которого своя собственная структура. Поэтому наберитесь терпения и разберетесь в том, как устроена микроразметка Schema.org.

Что касается технической части, то скажу вот что: либо отдайте это дело профессионалу, либо самостоятельно разберитесь в том, что я описал в данной статье.

www.sitehere.ru


You May Also Like

About the Author: admind

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

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

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