Разметка schema org

Вы знаете, что такое schema.org, но никак не можете внедрить ее на свой сайт? Вы прочитали кучу статей по теме, но ни одна из них не дала вам четкого руководства к действию? И вроде бы все понятно, но коды все-равно не работают?

Если вы оставляли подобные комментарии и вообще вышеописанная ситуация – это про вас, не расстраивайтесь. Мы поможем вам разобраться. В данном материале мы не будем отсылать вас на сайт schema.org со словами «Там все подробно написано, читайте». Вместо этого мы постараемся в максимально доступной форме (и с наглядными примерами) объяснить вам, как использовать эту пресловутую микроразметку и какой код куда нужно вписывать.

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

  • Видео

<div itemscope itemtype="http://schema.org/VideoObject»>

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

<meta itemprop="url" content="http://example.com" />

<meta itemprop="isFamilyFriendly" content="True">

<meta itemprop="duration" content="Длительность – T7M02S" />

<meta itemprop="thumbnail" content="URL скриншота" />

<meta itemprop="contentURL">"Ссылка на сам видеофайл — http://www.example.com/video123.flv"

<meta itemprop="uploadDate" content="2011-07-05T08:00:00" />

<iframe width="560" height="315" src="//www.youtube.com/embed/N-4tzVFsyLU" frameborder="0" allowfullscreen></iframe> – HTML-код видео. Берется с видеохостинга:

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

</div>

  • Рецепт

<div itemscope itemtype="http://schema.org/Recipe">

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

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

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

<meta itemprop="datePublished" content="2009-05-08">May 8, 2009

<img itemprop="image" src="Картинка_блюда.jpg" />

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

<meta itemprop="cookTime" content="Время приготовления – PT1H">1 hour

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

<span itemprop="ingredients">1 яйцо</span>

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

</div>

  • Организация

<div itemscope itemtype="http://schema.org/Organization">

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

<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">

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

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

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

</div>

<img itemprop="logo" src="Ссылка на логотип – http://www.example.com/logo.png" />

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

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

Микроразметка — это разметка веб-страниц сайта или блога с использованием специальных тегов и атрибутов.


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

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

В настоящее время есть следующие разновидности микроразметки: микроформаты, RDFa и микроданные:

микроразметка сайта и её типы

Ну а теперь вкратце о каждом виде разметки.

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

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

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


Микроданные

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

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

При разметке html-страниц применяются тоже, как и в микроформатах, HTML-теги <div> и <span>. С помощью этих элементов и свойств важным данным, на которые мы хотим сделать акцент, присваиваются определенные краткие описания.

RDFa

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

Ребята, я не стал подробно описывать каждый тип микроразметки, так как основные читатели моего веб-ресурса блогеры. И если у вас есть блог, вам будет достаточно создать на нем один вид микроразметки. Какой? Читайте дальше и все узнаете.

В настоящее время специалисты таких поисковых систем как Google и Yandex советуют каждому вебмастеру внедрить один из типов микроразметки — микроданные, а именно Schema.org.

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

Преимущества микроразметки


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

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

Он в основном содержит в себе описание данной страницы, фото, контактные данные, цену товара и его рейтинг и т.д.

Плюсы микроразметки

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

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

Использование микроразметки

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

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

Видеоролики в сниппете (изображение видео):


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

Рецепты в сниппете (фото самого блюда и рейтинг рецепта):

рецепты в сниппете

Рестораны в сниппете (рейтинг ресторана по звездочкам, количество отзывов и месторасположение):

ресторан в сниппете

Мероприятия в сниппете (дата и название мероприятия, место проведения):

тренинги и семинары в сниппете

Товары в сниппете (рейтинг этого товара и средняя цена на него):

товары в сниппете


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

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

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

микроразметка schema org

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

На сегодняшний день Schema является стандартом для микроданных.

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

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

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

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

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

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

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

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

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

Анализ и проверка микроразметки

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

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

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

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

Валидатор микроразметки Яндекса:

 http://webmaster.yandex.ru/microtest.xml

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

 http://www.google.ru/webmasters/tools/richsnippets

Как я внедрил микроразметку на своём блоге

Да, друзья, все, о чем я писал в сегодняшней статье, не пустые слова, а нужная и полезная информация!

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

Первый — это самостоятельно удалить старые микроформаты hcard и hatom, которые были вмонтированы в мой бесплатный шаблон Incredy, а затем установить микроданные Schema.org.

Второй путь — заказать удаление микроформатов и установку микроданных Schema за деньги.

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

Однако все мои усилия не привели к желаемому результату. Старые микроформаты hcard и hatom не хотели покидать мой блог, и постоянно выбрасывали разные «финты»:

ошибки старой микроразметки

Я начал опять рыться в Интернете, как свинья в огороде, надеясь отыскать заветный желудь. И мне повезло. Я попал на блог webreligion.ru, автором которого является Руслан Белый.

Хочу сказать, что я и раньше был на его блоге (читал его статьи и писал к ним комментарии), так как мы с ним были в одной группе участников блогомарафона «Дружба блогеров», который организовал Константин Белан.

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

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

Хочу отметить, что Руслан (автор блога webreligion.ru) отлично разбирается в программировании. Очень быстро и со знанием дела удалил старую микроразметку и встроил новую Schema.org. В валидаторах проверки микроразметки Яндекс и Google ни одной ошибки!

Но всё дело в том, что Руслан уже не занимается данной услугой…Поэтому, если Вам нужна микроразметка, то пишите на почту суперпрограммисту, моему партнёру и просто отличному специалисту — Дмитрию Горунину: gorunk@yandex.ru

Так вот ребята. Для чего я все это вам рассказываю? Думаете, что я решил просто развеять вашу тоску или похвалиться своей новой разметкой? Нет! Я просто хочу, чтобы вы не повторяли моих ошибок и не лезли в дебри движка WordPress, если понятия не имеете о том, что нужно делать и как. Лучше обратитесь к профессионалам, например к Руслану, и не пожалеете об этом.

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

Ну, вот и все. Моя статья подходит к концу. Надеюсь, она вам поможет.

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

Успехов Вам и Удачи
С Уважением,
Разметка schema org

saranchinsergey.ru

знакомство с Schema.org — стандартом семантической микроразметки данных в интернетсети

 

 

 

 

Привожу цитату:

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

 

Приступим:

 

 

 

к оглавлению $

как удалить разметку hentry

 

 

 

 

Давайте сделаем так: откройте вкладки этого адреса и этого — первая — валидатор микроразметки web-мастера Яндекс и вторая — ссылка Google.

Вбиваем свой домен и проверяем.

 

Мы сейчас, условно, рассматриваем вариант чистого сайта. Хотя у кого-то может уже быть какая-то другая разметка: её придётся подправить или удалить. Итак..! …взгляните на картинку.

 

 

Внедрение семантической разметки shema.org на сайт

 

 

Здесь явно наличие разметки hentry. Я её часто встречал на сайтах и, как и многие, склоняюсь к удалению этого ненужного свойства сайта.

 

Делается это так: открываем файл функций functions.php и в самый его финал (перед тегом ?>) прописываем следующий пример:

 

 

//удаление класса РАЗМЕТКА hentry start  function wph_remove_hentry_class($classes) {  $classes = array_diff($classes, array('hentry'));  return $classes;  }  add_filter('post_class', 'wph_remove_hentry_class');  //удаление класса hentry end

 

 

…после этих действий класс разметки исчезнет.

 

Я же не стану толковать о вреде или целесообразности разметки hentry, решать вам: я удалил — считаю, что от неё ни тепло ни холодно!

 

Далее…

 

 

 

к оглавлению $

размечаем шапку сайта в файле header.php классом разметки schema

 

 

 

 

Смотрим на фото: это чистый документ header.php — у вас будет что-то похожее. Принцип везде один — в нём и будем разбираться.

Рассмотрим пример динамического варианта вывода ИМЁН сайта.

 

 

 

 

подписка feedburner Online консультация по работе c сайтом на WordPress

 

 

размечаем шапку сайта в файле header классом shema org

 

 

В начале славных дел нас интересует цикл отработки шапки сайта от  закрывающего тега </head>  а именно: <div id="header"> или <div class="logo"> это кому как удобнее. Далее поймёте почему.

 

А пока, для более подробного ознакомления с разметкой shema.org, можете почитать на страничке Яндекс. Или изучить синтаксис ТУТ.

 

Итак: предлагаю начать со строки <div class="logo"> — обернём (или поместим) циклы вывода site_title и site_description в необходимый контейнер схемы разметки.

 

Следует добавит атрибуцию самого контейнера: от кавычек «logo» — через пробел — библиотеку разметки itemscope itemtype="http://schema.org/WPHeader".

 

 

Должно получится так:

 

<div class="logo" itemscope itemtype="http://schema.org/WPHeader">

 

 

Далее обозначаем отдельные поля с указанием на конкретное свойство схемы (нас интересуют свойства ИМЕНИ и ОПИСАНИЯ сайта): берём строки c h1 title и h2 description (описание сайта) и к их div-классам добавляем необходимые атрибуты… itemprop="headline" И itemprop="description"

 

Получится так:

 

<h1 class="site_title" itemprop="headline"><a href="<?php echo home_url(); ?>"><?php $theme->option('site_title'); ?></a></h1>

 

…и вот так…

 

<h2 class="site_description" itemprop="headline"><?php $theme->option('site_description'); ?></h2>

 

 

…ИЛИ лучше description (ДЕСКРИПШН) завернуть не в h2, а так, например: (но об этом подробнее в следующих статьях)

 

<span itemprop="description" class="site_description" style="display:none;"><?php $theme->option('site_description'); ?></span>

 

 

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

 

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

 

 

размечаем шапку сайта в файле header.php классом разметки shema.org

 

 

 

Во всём остальном, шапочка у нас теперь должна быть причёсанная и аккуратненькая. Отныне боты-поисковики более внимательно отнесутся к вашему сайту, ибо вы обозначили поле их действия! Они с вами подружатся!

 

 

 

 

Ну, что.!? Продолжим… и приступим к вопросу:

 

 

 

 

к оглавлению $

как внедрить микроразметку Schema.org на главную страницу и в разделы архивов — категорий

 

 

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

 

 

 

 

Вероятнее всего, вам нужно будет открыть и работать с файлом вашей темы post.php (в корне шаблона). У кого-то может быть имя документа иное. Ищите тот файл, который отвечает за вывод и формирование главной страницы, категорий, тегов и архивов.

 

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

 

 

 

 

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

 

 

Итак, вот полный файл post.php размеченный стандартом schema.org (советую кликнуть по фотке, открыть в другом окне и изучать — а я буду пояснять)

 

 

как обозначить разметкой schema oрг главную и страницы категорий сайта

 

 

Строка номер три (3):

 

<div class="post" itemscope itemtype="http://schema.org/Article">

 

Див класс post (у вас будет иной класс — я здесь поменял имена, понятности ради) — в этот контейнер помещён цикл выводов анонсов главной страницы. И, как понимаете, к нему добавлена библиотека itemscope itemtype="http://schema.org/Article" Артикль. И вы проделываете то же самое.

 

5 — строка: div-класс информации об анонсе.

Дело в том, что новые стандарты разметки подразумевают замены стандартов, как то: дата должна быть двух вариантов — число написания itemprop="datePublished" и число редактирования itemprop="dateModified".

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

 

А пока переходим к строке — 13: это заголовок статьи (анонса) к нему следует добавить атрибут itemprop="headline"  Прописывайте…

 

Строка — 14: php — вывод миниатюры записи стандартом thumbnail. У вас миниатюры могут выводиться как-то иначе: или обычной фоткой статьи, или … словом, смотрите (о выводе картинок, также ниже).

Но коли у кого так же как и в показанном коде, целесообразнее и её обозначить (я этого не делал на главной…)

 

Можно  сделать так: прежде всего весь код php обернуть в див-класс. То.е перед <php вывода картинки прописать строку

 

<div itemscope itemtype="https://schema.org/ImageObject">

 

…А в сам php код добавить вот такую фразу после full , array('itemprop' => 'image')

 

Должно получиться так:

 

<div class="featured-image-container"><?php the_post_thumbnail('full' , array('itemprop' => 'image')); ?></div>

 

Не забывайте о закрывающем </div>.

 

Переходим к строке — 20:

Это сам текст анонса. Здесь спорный вопрос: кто-то выводит, а кто-то — нет. Я выводил какое-то время…

 

И если будете размечать анонс статьи и вы, то делайте так, как показано в коде ниже: т.е оберните php код в свойство itemprop="articleBody".

 

<div class="mihalica" itemprop="articleBody">  <?php  the_content('');  ?>  </div>

 

…обратите внимание на ДИВ класс (имя любое) и его закрывающий тег.

 

 

 

Проверяем на тестерах разметки! (ссылки выше).

 

 

 

Внедрение на сайт семантической разметки shema.org по обновлённому стандарту

 

Как видите, получается вот такая картинка (относительно всех анонсов главной): имя статьи, и сам анонс.

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

 

 

Теперь поясню: вот эти красные ошибки вовсе и не ошибки, но предупреждения GOOGLE web мастеру о незаполненных полях опубликованной записи, и всего делоф! А посему, я — считаю для своего сайта вывод этой инфы на страничках анонса ненужным. Вы можете вывести. Тогда будет всё зелёненькое (и не забывайте тестировать свою работу по разметке в Яндекс). Об этом расскажу ниже… в вопросе:

 

 

 

 

 

 

 

к оглавлению $

как микрозметить стандартом schema страницу сайта

 

 

 

Открываем файл, который на вашем сайте отвечает за вывод отдельного поста. У меня это  post-single.php Я этот файл нарочно оставил на финал, чтобы вы как-то пообвыклись и въехали в принцип.

 

Приступим: всё аналогично !!!

 

<div class="ВАШ_класс-CSS_полной_записи" itemscope itemtype="http://schema.org/Article">

 

 

 

 

 

Далее выполним обновлённые требования Google по разметке… шамкаем информационную часть.

 

Здесь следует обратить внимание на див-класс post_meta (если он у вас был) — внутри него стоит всё заменить на новый стандарт!

 

Стандарт сказал — поехали))

 

Выводим дату: которая должна быть такого стандарта…

 

<span itemprop="datePublished"><?php the_time('Y-m-d'); ?></span>  <meta itemprop="dateModified" content="<?php the_modified_time('Y-m-d'); ?>"/>

 

Первая строка: дата публикации datePublished И- вторая — dateModified

 

И тут же под строками следующая инфа (советую размечать так).

Обратите внимание на строки 1 и 2 !! у меня размечено только имя автора, но коли вам нужно разметить и рубрики — размечайте…

 

 

&nbsp; <span> - автор:</span> <span itemprop="author"> <?php the_author(); ?></span>  &nbsp; <span> Рубрика: <?php the_category(', '); ?></span>  <?php  if(is_user_logged_in()) {  ?> &nbsp; <span class="meta_edit"><?php edit_post_link(); ?></span><?php  } ?>

 

 

Далее прописывайте следующее…

 

 

<meta itemscope content="ИМЯ ВАШЕГО САЙТА" itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php the_permalink(); ?>"/>  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">  <meta itemprop="telephone" content="ЭЛ/П@yandex.ru">  <meta itemprop="address" content="спб Петербург">  <meta itemprop="name" content="ИМЯ САЙТА или...">  <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">  <img itemprop="url" itemprop="image" src="http://ДОМЕН.ru/wp-content/themes/ШАБЛОН/images/ИМЯ.jpg" style="display:none;" title="logo" alt="logo"/>  <meta itemprop="width" content="150">  <meta itemprop="height" content="130">  </div>  </div>  </div>

 

Обратите внимание на три закрывающих div-класса: первый (сверху) закрывает <div itemprop="logo" … второй див — <div itemprop="publisher" … и третий <div class="postmeta"> (если был — здесь показано для примера).

 

 

 

Ну, давайте поближе рассмотрим вариации разметки информационного цикла:

 

1 строка: имя вашего сайта.

2 строка: открывается поле информации организации. То есть разметочная инфа вашего блога.

3 — указывайте свой телефон или эл/п … Далее разбирайтесь по коду.

7 строка: логотип вашего сайта и путь до его расположения.

8 — 9 -соответственные размеры лого.

 

 

 

Вот как бы с этим и всё! Далее остаётся обозначить разметкой TITLE статьи, типа такого:

 

<h1 class="title" itemprop="headline"><?php the_title(); ?></h1>

 

 

 

к оглавлению $

внедрить атрибуты микроразметки Schema.org в теги картинок

 

 

 

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

 

 

<div itemscope itemtype="https://schema.org/ImageObject">  <?php  if(has_post_thumbnail()) {  ?>  <div class="featured-image-container"><?php the_post_thumbnail('full' , array('itemprop' => 'image')); ?></div><?php  }  ?>  <meta itemprop="width" content="215">  <meta itemprop="height" content="128">  </div>

 

 

к оглавлению $

микроразметка текста статей

 

 

 

 

 

У кого-то может быть в шаблоне такой вариант вывода текста статьи:

 

…тогда предлагаю php код вывода контента статьи обернуть в какой-нибудь отдельный div-класс, но с атрибутом itemprop="articleBody" посредством которого в валидаторе разметки вы увидите текст вашей записи, ибо этим разметочным атрибутом вы указываете БОТУ на статью… вот, мол, чурбан железный, глотай…

 

 

<div class="ww" itemprop="articleBody">  <?php  the_content('');  wp_link_pages( array( 'before' => '<div class="lists"><p>' . __( 'Следующая страничка:', 'themater' ) . '', 'after' => '</p></div>' ) );  ?>  </div>

 

 

Вот теперь всё, товарищи.

 

Да, чуть не забыл, необходимо же

 

 

 

к оглавлению $

mihalica.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=»Наволочка COTTON DREAMS «></a>
<!—В поле description дается описание товара.—>
<p itemprop=»description»>Добавьте еще больше уюта в доме с наволочками «Cotton Dreams»! …<
<!—Указывается схема Offer.—>
<div itemprop=»offers» itemscope itemtype=»http://schema.org/Offer» class=»addtocartsuc»>
<!—В поле price указывается цена товара.—>
<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 указывается дата публикации отзыва.—>
<span class=»date» itemprop=»datePublished» content=»2017-03-21T08:27:00″>21.03.2017 08:27
<div class=»rating-person»>
<input type=»hidden» name=»val» value=»5″/>
<input type=»hidden» name=»vote-id» value=»Array»/>
</div>
</span>
<!—Указывается схема Rating.—>
<span itemprop=»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


You May Also Like

About the Author: admind

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

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

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

Adblock
detector