Схема орг

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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»/>

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

Более на этом стандарте останавливаться не будем, отметим лишь то, что он служит не только для передачи данных соцсетям, его понимают и поисковые системы. К примеру, Яндекс может брать из него такие данные, как информацию для сервиса Яндекс.Видео. Также на его основе есть возможность строить заголовок сниппета (если он будет отвечать на запрос пользователя лучше, чем сниппеты, сформированные из данных, полученных из других источников).
И вот, наконец, мы подобрались, на мой взгляд, к основному стандарту 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. Реализация данного вида поможет получить нам следующий сниппет в Яндексе:

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

В 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=»Наволочка COTTON DREAMS «></a>
<!—В поле description дается описание товара.—>
<p itemprop=»description»>Добавьте еще больше уюта в доме с наво.

выводим мета информацией так как на странице она не где не присутствует.—>
<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 указывается дата публикации отзыва.—>
<span class=»date» itemprop=»datePublished» content=»2017-03-21T08:27:00″>21.03.2017 08:27
<div class=»rating-person»>
<inp.

»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 так:

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

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

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

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

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

Сперва немного отвлечемся от темы и опишем историю, которая произошла с сайтом нашего клиента. Клиент обратился к нам с просьбой разметить информацию на его сайте, а именно рецепты. В соответствии со стандартом schema.org и сущностью Recipe мы это и сделали. Начали ждать положенных две недели для переиндексации ресурса. Через две недели 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>

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

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

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

1ps.ru

<div>  <strong><span>Change a Flat Tire</span></strong>  <div>About <span>$20</span></div>  <div>About <span>30 minutes</span></div>  <div>Necessary Items:</div>  <div>Spare tire</div>  <div>Lug wrench</div>  <div>Jack</div>  <div>Wheel wedges</div>  <div>Flares</div>  <div id="steps">  <div>Preparation</div>  <div>  <div>  Turn on your hazard lights and set the flares.  </div>  <div>  You're going to need space and want to be visible.</div>  <div>  <div>  Position your wheel wedges in front of the front tires if a rear tire is flat, or behind the rear tires if a front tire is flat.  </div>  <div>  You don't want the car to move while you're working on it.  </div>  </div>  </div>  </div>  <div id="steps">  <div>Raise the car</div>  <div>  <div>  <span><img alt="image showing positioning of jack" src="position-jack.jpg" /></span>  Position the jack underneath the car, next to the flat tire.  </div>  </div>  <div>  <div>  <span><img alt="image showing car while still on the ground" src="car-on-ground.jpg" /></span>  Raise the jack until the flat tire is just barely off of the ground.  <span><img alt="image showing car raised by jack" src="car-raised.jpg" /></span>  </div>  <div>  It doesn't need to be too high.  </div>  </div>  <div>  <div>  Remove the hubcap and loosen the lug nuts.  </div>  </div>  <div>  <div>  Remove the flat tire and put the spare tire on the exposed lug bolts.  </div>  </div>  <div>  <div>  Tighten the lug nuts by hand.  </div>  <div>  Don't use the wrench just yet.  </div>  </div>  </div>  <div id="steps">  <div>Finishing up</div>  <div>  <div>  Lower the jack and tighten the lug nuts with the wrench.  </div>  </div>  <div>  <div>  Replace the hubcap.  </div>  </div>  <div>  <div>  Put the equipment and the flat tire away.  </div>  </div>  </div> </div>

<div itemscope itemtype="http://schema.org/HowTo">  <strong><span itemprop="name">Change a Flat Tire</span></strong>  <div>About <span itemprop="estimatedCost" itemscope itemtype="http://schema.org/MonetaryAmount">  <meta itemprop="currency" content="USD"/>  <meta itemprop="value" content="20"/>  </span>$20</div>  <div>About <span itemprop="totalTime" content="PT30M">30 minutes</span></div>  <div>Necessary Items:</div>  <div itemprop="tool">Spare tire</div>  <div itemprop="tool" itemscope itemtype="http://schema.org/HowToTool">  <span itemprop="name">Lug wrench</span>  <img alt="image of a lug wrench" itemprop="image" src="lug-wrench.jpg"/>  </div>  <div itemprop="tool">Jack</div>  <div itemprop="tool" itemscope itemtype="http://schema.org/HowToTool">  <span itemprop="name">Wheel wedges</span>  <img alt="image showing wheel wedges" itemprop="image" src="wheel-wedges.jpg"/>  </div>  <div itemprop="supply" itemscope itemtype="http://schema.org/HowToSupply">  <span itemprop="name">Flares</span>  <img alt="image of flares" itemprop="image" src="flares.jpg"/>  </div>  <div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">  <div itemprop="name">Preparation</div>  <meta itemprop="position" content="1"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="1"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="text">Turn on your hazard lights and set the flares.</div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToTip">  <meta itemprop="position" content="2"/>  <div itemprop="text">You're going to need space and want to be visible.</div>  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="2"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="text">Position your wheel wedges in front of the front tires if a rear tire is flat, or behind the rear tires if a front tire is flat.</div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToTip">  <meta itemprop="position" content="2"/>  <div itemprop="text">You don't want the car to move while you're working on it.</div>  </div>  </div>  </div>  <div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">  <div itemprop="name">Raise the car</div>  <meta itemprop="position" content="2"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="1"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <img alt="image showing positioning of jack" itemprop="duringMedia" src="position-jack.jpg" />  <div itemprop="text">Position the jack underneath the car, next to the flat tire.</div>  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="2"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="beforeMedia" itemscope itemtype="http://schema.org/ImageObject">  <img alt="image showing car while still on the ground" itemprop="contentUrl" src="car-on-ground.jpg" />  </div>  <div itemprop="text">Raise the jack until the flat tire is just barely off of the ground.</div>  <div itemprop="afterMedia" itemscope itemtype="http://schema.org/ImageObject">  <img alt="image showing car raised by jack" itemprop="contentUrl" src="car-raised.jpg" />  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToTip">  <meta itemprop="position" content="2"/>  <div itemprop="text">It doesn't need to be too high.</div>  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="3"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="text">Remove the hubcap and loosen the lug nuts.</div>  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="4"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="text">Remove the flat tire and put the spare tire on the exposed lug bolts.</div>  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="5"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="text">Tighten the lug nuts by hand.</div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToTip">  <meta itemprop="position" content="2"/>  <div itemprop="text">Don't use the wrench just yet.</div>  </div>  </div>  </div>  <div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">  <div itemprop="name">Finishing up</div>  <meta itemprop="position" content="3"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="1"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1">  <div itemprop="text">Lower the jack and tighten the lug nuts with the wrench.</div>  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="2"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="text">Replace the hubcap.</div>  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="3"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="text">Put the equipment and the flat tire away.</div>  </div>  </div>  </div> </div>

<div vocab="http://schema.org/" typeof="HowTo">  <strong><span property="name">Change a Flat Tire</span></strong>  <div>About <span property="estimatedCost" typeof="MonetaryAmount">  <meta property="currency" content="USD"/>  <meta property="value" content="20"/>  </span>$20</div>  <div>About <span property="totalTime" content="PT30M">30 minutes</span></div>  <div>Necessary Items:</div>  <div property="tool">Spare tire</div>  <div property="tool" typeof="HowToTool">  <span property="name">Lug wrench</span>  <img alt="image of a lug wrench" property="image" src="lug-wrench.jpg"/>  </div>  <div property="tool">Jack</div>  <div property="tool" typeof="HowToTool">  <span property="name">Wheel wedges</span>  <img alt="image showing wheel wedges" property="image" src="wheel-wedges.jpg"/>  </div>  <div property="supply" typeof="HowToSupply">  <span property="name">Flares</span>  <img alt="image of flares" property="image" src="flares.jpg"/>  </div>  <div property="step" typeof="HowToSection">  <div property="name">Preparation</div>  <meta property="position" content="1"/>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="1"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="text">Turn on your hazard lights and set the flares.</div>  </div>  <div property="itemListElement" typeof="HowToTip">  <meta property="position" content="2"/>  <div property="text">You're going to need space and want to be visible.</div>  </div>  </div>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="2"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="text">Position your wheel wedges in front of the front tires if a rear tire is flat, or behind the rear tires if a front tire is flat.</div>  </div>  <div property="itemListElement" typeof="HowToTip">  <meta property="position" content="2"/>  <div property="text">You don't want the car to move while you're working on it.</div>  </div>  </div>  </div>  <div property="step" typeof="HowToSection">  <div property="name">Raise the car</div>  <meta property="position" content="2"/>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="1"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <img alt="image showing positioning of jack" property="duringMedia" src="position-jack.jpg" />  <div property="text">Position the jack underneath the car, next to the flat tire.</div>  </div>  </div>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="2"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="beforeMedia" typeof="ImageObject">  <img alt="image showing car while still on the ground" property="contentUrl" src="car-on-ground.jpg" />  </div>  <div property="text">Raise the jack until the flat tire is just barely off of the ground.</div>  <div property="afterMedia" typeof="ImageObject">  <img alt="image showing car raised by jack" property="contentUrl" src="car-raised.jpg" />  </div>  </div>  <div property="itemListElement" typeof="HowToTip">  <meta property="position" content="2"/>  <div property="text">It doesn't need to be too high.</div>  </div>  </div>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="3"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="text">Remove the hubcap and loosen the lug nuts.</div>  </div>  </div>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="4"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="text">Remove the flat tire and put the spare tire on the exposed lug bolts.</div>  </div>  </div>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="5"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="text">Tighten the lug nuts by hand.</div>  </div>  <div property="itemListElement" typeof="HowToTip">  <meta property="position" content="2"/>  <div property="text">Don't use the wrench just yet.</div>  </div>  </div>  </div>  <div property="step" typeof="HowToSection">  <div property="name">Finishing up</div>  <meta property="position" content="3"/>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="1"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1">  <div property="text">Lower the jack and tighten the lug nuts with the wrench.</div>  </div>  </div>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="2"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="text">Replace the hubcap.</div>  </div>  </div>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="3"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="text">Put the equipment and the flat tire away.</div>  </div>  </div>  </div> </div>

<script type="application/ld+json"> {  "@context": "http://schema.org",  "@type": "HowTo",  "name": "Change a Flat Tire",  "estimatedCost": {  "@type": "MonetaryAmount",  "currency": "USD",  "value": "20"  },  "totalTime": "PT30M",  "tool": [  {  "@type": "HowToTool",  "name": "Spare tire"  },  {  "@type": "HowToTool",  "name": "Lug wrench",  "image": "lug-wrench.jpg"  },  {  "@type": "HowToTool",  "name": "Jack"  },  {  "@type": "HowToTool",  "name": "Wheel wedges",  "image": "wheel-wedges.jpg"  }  ],  "supply": {  "@type": "HowToSupply",  "name": "Flares",  "image": "flares.jpg"  },  "step": [  {  "@type": "HowToSection",  "name": "Preparation",  "position": "1",  "itemListElement": [  {  "@type": "HowToStep",  "position": "1",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Turn on your hazard lights and set the flares."  },  {  "@type": "HowToTip",  "position": "2",  "text": "You're going to need space and want to be visible."  }  ]  },  {  "@type": "HowToStep",  "position": "2",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Position your wheel wedges in front of the front tires if a rear tire is flat, or behind the rear tires if a front tire is flat"  },  {  "@type": "HowToTip",  "position": "2",  "text": "You don't want the car to move while you're working on it."  }  ]  }  ]  },  {  "@type": "HowToSection",  "name": "Raise the car",  "position": "2",  "itemListElement": [  {  "@type": "HowToStep",  "position": "1",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "duringMedia": "position-jack.jpg",  "text": "Position the jack underneath the car, next to the flat tire."  }  ]  },  {  "@type": "HowToStep",  "position": "2",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "beforeMedia": {  "@type": "ImageObject",  "contentUrl": "car-on-ground.jpg"  },  "afterMedia": {  "@type": "ImageObject",  "contentUrl": "car-raised.jpg"  },  "text": "Raise the jack until the flat tire is just barely off of the ground."  },  {  "@type": "HowToTip",  "position": "2",  "text": "It doesn't need to be too high."  }  ]  },  {  "@type": "HowToStep",  "position": "3",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Remove the hubcap and loosen the lug nuts."  }  ]  },  {  "@type": "HowToStep",  "position": "4",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Remove the flat tire and put the spare tire on the exposed lug bolts."  }  ]  },  {  "@type": "HowToStep",  "position": "5",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Tighten the lug nuts by hand."  },  {  "@type": "HowToTip",  "position": "2",  "text": "Don't use the wrench just yet."  }  ]  }  ]  },  {  "@type": "HowToSection",  "name": "Finishing up",  "position": "3",  "itemListElement": [  {  "@type": "HowToStep",  "position": "1",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Lower the jack and tighten the lug nuts with the wrench."  }  ]  },  {  "@type": "HowToStep",  "position": "2",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Replace the hubcap."  }  ]  },  {  "@type": "HowToStep",  "position": "3",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Put the equipment and the flat tire away."  }  ]  }  ]  }  ] }

schema.org

Что такое структурированная информация

Это данные, которые вы добавляете на свой сайт, размеченные особым способом. Он помогает пс понимать, что именно находится на вашем портале. Вам понадобится так называемый словарь, который использует большинство систем — Schema.org. В нем находятся описание для разного типа материалов: продукты, обзоры, списки местных компаний… Системы Google. Bing, Яндекс и Yahoo вместе разработали этот словарь, чтобы лучше читать веб-сайты.

Если разметка правильно внедрена на сайт, системы смогут использовать структурированные данные. Результатом станет лучшее ранжирование ресурса, и получение дополнительного места в выдаче: расширенные сниппеты или карточки товаров. Гарантировать, однако, это нельзя — все зависит от самого поисковика.

Зачем нужно структурировать данные

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

Влияет ли структура данных на SEO

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

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

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

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

Структурированные данные — больше места в выдаче

Адаптируя свой сайт под требования поисковиков, вы позволяете им делать интересные вещи с вашими материалами. Shema.org постоянно развивается и обновляется. Структурированные данные — основа для новых разработок в сфере SEO, например, голосового поиска. В будущем появится еще больше новых функций. Ниже — выборка результатов расширенного поиска, которые доступны сейчас. Вы можете найти примеры всех в Google’s Search Gallery. Здесь приведены самые важные и актуальные.

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

Расширенные результаты

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

Расширенные результаты на мобильных устройствах

Вот так они выглядят сейчас.

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

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

Сеть знаний

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

Расширенный сниппет

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

Как структурирование информации работает на мобильных устройствах

Результаты структурирования показываются на всех устройствах. Для мобильных Shema.org только начинает портироваться. Хотя Google давно заявляет о важности этих платформ и уже ввел специальное индексирование.

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

Разные типы структурированных данных

Посмотрите на сайт микроразметки Schema.org. Есть много разных типов данных, которые вы можете использовать для своего портала. Но не все из них будут уместны. Чтобы внедрить микроразметку, ответьте на следующие вопросы:

у вас есть товары в интернет-магазине?
или у вас ресторан?
у вас региональная компания, которая оказывает услуги?
или сайт с лучшими рецептами чизкейков?

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

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

Creative works

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

Статьи

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

Книги

Может быть в бумажном или электронным формате. Можно отдельно указать автора, даже его награды и премии.

Курсы

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

Множества

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

Руководства

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

Музыка

СКРИНШОТ
Аудио тоже может попасть в расширенную выдачу. Есть несколько типов для такой информации:

MusicRecordings;
MusicAlbum;
MusicEvent;
MusicGroup.
Рецепты

Указывая поисковику, что текст на сайте — рецепт, вы можете вывести их на главную страницу выдачи. А ранжирование для мобильных устройств позволяет сделать представление красочным — добавить на сниппет изображения блюда. Но и это не все. Голосовой бот Google может вслух зачитать этот рецепт для вас.

Фильмы и ТВ-передачи

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

Вы можете сделать собственную подборку с фильмами или телепередачами, разметить ее и таким образом загнать в выдачу. Дайте пользователю сразу то, что ему нужно — используйте ViewAction и Watch Action. Человек сможет сразу в выдаче перейти к просмотру материала.

Видеоролики

С видео можно делать интересные вещи. Прямо сейчас Google работает над новыми способами отображения в выдаче, например, над использованием AMP в каруселях роликов или списках Top Stories.

Подкасты

Записываете свои подскасты? Разметьте! Google подтянет на страницу выдачи описание к каждому выпуску, даже добавит кнопку воспроизведения.

Commerce

Вторая основная группа — это коммерческие расширения.

Мероприятия

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

Организации

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

Товары

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

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

Отзывы

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

Получение рейтинга в 5 звезд может стать одной из главных задач маркетинга.

Новый расширенный результат: действия

Голосовые помощники стремительно набирают популярность — у Яндекса появилась «Алиса», а Google начал вплотную заниматься голосовым поиском. Вы можете отправить рецепт блюда со страницы выдачи в Google Home. Голосовой помощник вслух зачитывает рецепт, пока вы будете готовить еду. Этот расширенный результат называется «действия».

Добавьте на свой сайт эту структуру данных. Дополнительную информацию найдете здесь. На странице Google’s Assistant почитайте о том, что еще можно воплотить в жизнь таким способом.

Технические аспекты

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

Посмотрим на иерархию. Внедрение микроформатов начинается с сущности Thing — общего типа всех элементов. Элемент — более конкретная сущность: авторская работа, событие, компания, личность, место, товар.

Например, фильм — это thing и авторская работа. Он относится к категории «Кино». К нему можно добавить много свойств-атрибутов:

аннотация;
режиссер;
актеры;
плакаты — изображения;
продолжительность;
жанр.

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

Простой пример иерархии для Schema.org

Если мы расположим всю информацию о сущности в иерархическом порядке, получим следующее:

Сущность
- Авторская работа
  - Фильм
    - Описание (тип: текст);
    - режиссер (тип: личность);
    - актеры (тип: личность);
    - постер (тип: изображение).

Если мы работаем с описанием компании, получим что-то такое:

Сущность
- Организация (или место)
  - Местная компания
    - Стоматология
      - имя;
      - адрес;
      - email-адрес;
      - логотип;
      - обзор.

Для местных организаций укажите конкретный вид бизнеса. Поисковые системы сразу поймут, чем вы занимаетесь. Иногда вы можете заниматься тем, для чего нет конкретной сущности в Schema.org. Используйте Product Types Ontology, чтобы дифференцировать вашу тематику.

Есть ряд обязательных данных, которые нужно указать. Среди них — адрес и телефон компании. Есть рекомендуемые данные:

url сайта;
геолокация;
часы работы.

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

Есть интересный плагин от Yoast. Инструмент платный, но он поможет вытянуть все необходимые сущности, которые вам следует разметить.

Какие данные нужно размечать

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

Как внедрить микроразметку Schema.org на сайт

Несмотря на то, что это техническая работа, все упрощает JSON-LD. Этот формат данных основан на JavaScript. Он упрощает добавление микроформатов. Вам не нужно ничего вписывать в HTML-код страниц. Внесение данных и их обновление стали простыми. А сам инструмент отлично подходит для людей — он простой и понятный, и для поисковиков — они с легкостью распознают микроформаты.

Используем JSON-LD для микроформатов

JSON-LD сегодня — предпочтительный вариант внедрения микроразметки на ресурс. Он долго не поддерживался поисковиком Bing. Но сегодня все популярные системы распознают этот формат. Ниже — листинг для микроразметки информации для SEO-плагина от Yoast.

Для простоты используется небольшой объем информации:

тип;
имя;
логотип;
описание;
разработчик.

В конце кода есть раздел с призывом к действию купить плагин, который стоит 86 долларов.

Другие способы: RFDa и Microdata

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

Написание микроформата и поддержка через RDFa или Microdata — боль. Старайтесь как можно чаще использовать JSON-LD.

Тем более, Microdata нуждается в функции itempops. Любой микроформат придется прописывать в HTML-коде. Читать и редактировать это крайне неудобно.

Структурированные данные и AMP

Суть технологии AMP — ускорить загрузку страниц на мобильных устройствах. Google продвигает AMP, в том числе и для структурированных данных. Хотите внедрить AMP? Добавьте структурированные данные. Система использует несколько элементов Schema.org, чтобы сохранить интерактивность в выдаче.

Инструменты для работы со структурированными данными

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

Генераторы

Google Data Highlighter.
Google Structured Data Markup Helper.
JSON-LD Schema Generator by Merkle.

Валидаторы

Yandex Structured data markup.
Yandex Structured data validator API.
Structured Data Testing Tool.
Google Search Console Rich Cards.
Google Rich Results Tester.

Плагины для WordPress

Yoast SEO local.
Yoast SEO.

Полезные ссылки

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

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

Руководство от Google.
Руководство от Яндекс.
Руководство от Bing.

Итоги

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

semantica.in

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

Достаточно подробно о том, что такое микроразметка Schema.org, мы писали в одной из наших прошлых статей. А если коротко, то Schema.org – это словарь семантической разметки данных, поддерживаемый всеми ведущими поисковыми системами. Ее цель – помогать поисковым роботам лучше понимать содержание страницы и, тем самым, улучшать результаты выдачи.

Куда что нужно вписывать?

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

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

itemscope нужен только для того, чтобы показать поисковому боту, что на странице описывается определенный объект.
itemtype всегда идет рядом с itemscope и нужен для того, чтобы показать поисковому боту тип объекта (в данном случае, это Movie). Полный список объектов можно посмотреть по ссылке.

itemprop – описывает свойства выбранного объекта. В данном случае это: название фильма (name), режиссер (director), жанр (genre) и наличие трейлера (trailer). Все доступные свойства перечислены на сайте schema.org в соответствующем разделе:

Примечание. Вышеприведенный скриншот был сделан на сайте ruschema.org – проект перевода schema.org, развивающийся силами добровольцев. На данный момент переведен не весь сайт. Поучаствовать в переводе может любой желающий.

Помимо этих трех атрибутов в коде присутствуют еще и теги. Рассмотрим на другом примере, тип объекта – Person (Человек):

Теги <div> … </div> показывают, где начинается и заканчивается описание объекта.
В теги <span> … </span> заключаются те свойства объекта, которые можно описать словами.
Тег <link> с атрибутом href нужны для перечислений и ссылок на канонические страницы. Ссылки, поставленные таким образом, не видны пользователям.
Теги <time> … </time> с атрибутом datetime используются для указания даты, времени и длительности. Дату и время необходимо указывать в следующих форматах: YYYY-MM-DD (2014-05-26), Тhh:mm (Т10:25) либо Тhh:mm:ss (Т02:40:15). При этом, их можно указывать одновременно:

Теги <a> … </a> используются для указания ссылок, видных для пользователей.
Тег <meta> (на изображении не используется) скрывает информацию от пользователей. Данный тег не рекомендуется использовать слишком часто – Google это не одобряет.

Как это сделать на практике?

Заходим на ruschema.org в раздел «Схемы». Выбираем нужный объект. Допустим, Book (Книга). Смотрим, какие свойства мы хотим указать. И начинаем собирать код.

У вас должно получиться примерно следующее:

Проверить правильность проставления микроразметки можно в специальных сервисах от Google и от Yandex.

Несколько примеров сниппетов и кодов

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

Видео

<h2>Video: <span itemprop="name">Название видео</span></h2>

<span itemprop="description">Описание видео</span>

</div>

Рецепт

<span itemprop="name">Название рецепта</span>

<span itemprop="recipeInstructions">Берем бананы, снимаем с них кожуру. Перемалываем в блендере и добавляем туда муку"

<span itemprop="author">Имя автора</span>,

<span itemprop="description">Описание рецепта</span>

<span itemprop="ingredients">3 банана</span>

<span itemprop="ingredients">Стакан сахара</span>

</div>

Организация

<span itemprop="name">Название организации</span>

<span itemprop="streetAddress">Улица</span>,

<span itemprop="addressLocality">Город</span>,

<span itemprop="addressRegion">Область</span>.

</div>

Phone: <span itemprop="telephone">Номер телефона – 206-555-1234</span>

</div>

Важная информация

Если вы используете авторство Google, и в поиске уже отображается ваша фотография, не используйте микроразметку Schema.org, поскольку авторство после этого может нарушиться.

Пример 1. При описании видеообъекта (videoObject), фотография автора полностью заменяется на скриншот из видео (thumbnail), а информация об авторе перемещается в самый низ сниппета. В некоторых случаях, авторство удаляется полностью.

Пример 2. При описании объекта отзыв (review), происходит то же самое – фото автора исчезает и появляется информация о том, кому принадлежит данный отзыв (обзор).

Какой из сниппетов показывает лучший CTR, к сожалению, неизвестно. Но эта информация важна, и ее нужно было донести.

Адаптация материала Schema-org Guide for Beginners (Everyone Can Understand!) + Schema Cheatsheet и Structured Data: Why you should mark-up for higher CTR.

kak-ispolzovat-mikrorazmetku-schema-org-rukovodstvo-dlya-chaynikov

texterra.ru

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

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

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

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

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

Что такое структурированная информация

Зачем нужно структурировать данные

Влияет ли структура данных на SEO

Структурированные данные — больше места в выдаче

Расширенные результаты

Расширенные результаты на мобильных устройствах

Сеть знаний

Расширенный сниппет

Как структурирование информации работает на мобильных устройствах

Разные типы структурированных данных

Creative works

Статьи

Книги

Курсы

Множества

Руководства

Музыка

Фильмы и ТВ-передачи

Видеоролики

Подкасты

Commerce

Мероприятия

Организации

Товары

Отзывы

Новый расширенный результат: действия

Технические аспекты

Простой пример иерархии для Schema.org

Какие данные нужно размечать

Как внедрить микроразметку Schema.org на сайт

Используем JSON-LD для микроформатов

Другие способы: RFDa и Microdata

Структурированные данные и AMP

Инструменты для работы со структурированными данными

Генераторы

Валидаторы

Плагины для WordPress

Полезные ссылки

Итоги

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

Куда что нужно вписывать?

Как это сделать на практике?

Несколько примеров сниппетов и кодов

Важная информация

Лучшие статьи читаем:

You May Also Like

Slovoeb официальный сайт

Yandex schema org

About the Author: admind

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