Содержание

Микроразметка Schema org — как сделать расширенные сниппеты в Google и Яндекс

<script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "HowTo",
      "name": "Как отправить посылку за 1 день",
      "description": "Отправляйте товары легко с нашей инструкцией.",
      "step": [
        {
          "@type": "HowToStep",
          "url": "https://site.ru/posylka#step1",
          "name": "Шаг 1. Подготовьте посылку и документы.",
          "itemListElement": {
            "@type": "HowToDirection",
            "text": "Сложите отравление в коробку и аккуратно заклейте скотчем. 
            Прикрепите бумаги к коробке."
          },
          "image": {
            "@type": "ImageObject",
            "url": "https://site. ru/photos/photo-step1.jpg",


            "height": "406",
            "width": "305"
          }
        }, {
          "@type": "HowToStep",
          "name": "Шаг 2. Вызовите курьера.",
          "url": "https://site.ru/posylka#step2",
          "itemListElement": {
            "@type": "HowToDirection",
            "text": "Заполните заявку на 
            <a href=\"/forma\" rel=\"nofollow\" target=\"_blank\">сайте</a>."
          }, 
          "image": {
            "@type": "ImageObject",
            "url": "hhttps://site.ru/photos/photo-step2.jpg",
            "height": "406",
            "width": "305"
          }

        }, {
          "@type": "HowToStep",
          "name": "Шаг 3. Отдайте посылку курьеру.",
          "url": "https://site.ru/posylka#step3",
          "itemListElement": {
            "@type": "HowToDirection",
            "text": "Не забудьте записать номер накладной."
          }, 
          "image": {
            "@type": "ImageObject",
            "url": "https://site.ru/photos/photo-step3.jpg",
            "height": "406",
            "width": "305"
          }
        }
      ],
      "totalTime": "P1D"
    }

    </script>

Что такое микроразметка, зачем она нужна, и как добавить её на свой сайт uCoz?

Микроразметка материалов. Зачем она нужна и какую пользу приносит? Как добавить на сайт? В этом посте ответим на все главные вопросы и приведем примеры.

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

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

В чем польза микроразметки?

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

Микроразметка для поисковых систем

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

Пример для страницы товаров:

&lt;div itemscope itemtype="http://schema.org/Product"&gt;
<br> &lt;span itemprop="brand"&gt;$BRAND$&lt;/span&gt;
<br> &lt;span itemprop="name"&gt;$ENTRY_TITLE$&lt;/span&gt;
<br> &lt;img itemprop="image" src="$PHOTO$" alt="$ENTRY_TITLE$ - изображение" /&gt;
<br> &lt;span itemprop="description"&gt;$DESCRIPTION$&lt;/span&gt;
<br> ID товара: &lt;span itemprop="mpn"&gt;$ID$&lt;/span&gt;
<br> &lt;span itemprop="aggregateRating" itemscope itemtype="http://schema.
org/AggregateRating"&gt; <br> Рейтинг &lt;span itemprop="ratingValue"&gt;$RATING$&lt;/span&gt;, оценен &lt;span itemprop="reviewCount"&gt;$RATED$&lt;/span&gt; раз&lt;/span&gt; <br>&lt;/div&gt;

Data-driven без чепухи: спецпроект для практиков

Коллеги из E-Promo объясняют, как data-driven подход помогает проектировать сильные маркетинговые стратегии:

  • Откуда брать ценные для бизнеса данные;
  • Как их корректно агрегировать и анализировать;
  • Как устроено data-driven продвижение на примерах свежих кейсов;
  • И каких результатов можно достичь, интегрировав ИИ-сервисы в работу маркетологов.

2021 — год умного маркетинга, заряженного технологиями и большими данными, не отставайте →

Реклама

Полученный результат:

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

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

Микроразметка для социальных сетей

Микроразметка для социальных сетей позволяет роботам получить информацию для анонса при репосте (ссылки “Поделиться” или “Рассказать друзьям”). Для Facebook, VK, Google+ можно использовать словарь OpenGraph.

Пример:

&lt;html prefix="og: <a href="http://ogp.me/ns#" &gt;"="">http://ogp.me/ns#"&gt;</a>
<br>&lt;head&gt;
<br>&lt;title&gt;$ENTRY_TITLE$ - $SITE_NAME$&lt;/title&gt;
<br>&lt;meta property="og:title" content="$ENTRY_TITLE$" /&gt;&nbsp;
<br>&lt;meta property="og:description" content="$BRIEF$" /&gt;&nbsp;
<br>&lt;meta property="og:url" content="$ENTRY_URL$" /&gt;&nbsp;
<br>&lt;meta property="og:image" content="$IMG_URL1$" /&gt;&nbsp;
<br>&lt;meta property="og:type" content="article" /&gt;&nbsp;
<br>…
<br>&lt;/head&gt;
<br>…
<br>&lt;/html&gt;

Результат:

Еще можно использовать Twitter Cards. Это микроразметка для Twitter. Пример такой разметки:

&lt;meta name="twitter:card" content="summary" /&gt;
<br>&lt;meta name="twitter:site" content="@ваш_аккаунт" /&gt;
<br>&lt;meta name="twitter:title" content="$ENTRY_TITLE$" /&gt;
<br>&lt;meta name="twitter:description" content="$BRIEF$" /&gt;
<br>&lt;meta name="twitter:image" content="$IMG_URL1$" /&gt;

Результат:

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

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

Как добавить микроразметку на сайт:

  • 1. Подготовьте HTML-код микроразметки. Для этого воспользуйтесь инструментами, которые были приведены выше
  • 2. Зайдите в панель управления и в разделе “Управление дизайном (шаблоны)” выберите шаблон “Страница материала” или “Страница товара”
  • 3. Добавьте в шаблон ранее подготовленный HTML-код, который и будет отвечать за микроразметку
  • 4. Проверьте, как роботы понимают установленную микроразметку с помощью сервисов валидации

Выводы

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

Установка микроразметки на сайт занимает немного времени, по нашей оценке — не более 15 минут для одного модуля. Для этого нужно скачать пример микроразметки и подставить в нее соответствующие $переменные$. При этом знаний HTML, CSS не требуется.

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

для чего нужны, микроразметка ХК – самостоятельное продвижение сайтов bdbd.ru

Начнем с определения, что же это такое за навигационное меню «Хлебные крошки» (сокращенно ХК) — это полный путь, показывающий в какой категории, находится пользователь. Помимо очевидного удобства для пользователей, это меню также является элементом перелинковки.

Например, если пользователь зашел на страницу «Люстры на кухню», то ХК будут выглядеть следующим образом:

Главная / Каталог / Люстры / Люстры на кухню

Правила формирования навигационного меню «Хлебные крошки»

  • 1. Меню должно содержать полный путь от главной до текущей страницы включительно.
  • 2. С каждого пункта меню, кроме последнего должна быть ссылка на соответствующую страницу.
  • 3. Анкоры в ХК должны включать в себя ключевые слова, но при этом обращайте внимание на спамность.

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

Главная / Каталог / Женская одежда / Женские юбки / Кожаные женские юбки / Кожаные женские юбки на молнии

В таком случае лучше оформить так:

Главная / Каталог / Женская одежда / Юбки / Кожаные / Кожаные женские юбки на молнии

  • 4. «Хлебные крошки» должны находиться на каждой странице сайта под основным меню.
  • 5. Они не должны быть яркими и привлекать к себе сильное внимание. Идеальный вариант: небольшой серый шрифт.
  • 6. В ХК можно и даже нужно использовать микроразметку.

Пример правильного оформления ХК

Пример неправильного расположения ХК

Микроразметка хлебных крошек

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

Пример снипета с размеченными ХК

Не будем детально разбираться как именно её делать, вся необходимая информация есть тут: https://schema.org/BreadcrumbList

Проверка микроразметки в Google: https://search.google.com/structured-data/testing-tool/u/0/

Проверка микроразметки в Яндекс: https://webmaster.yandex.ru/tools/microtest/

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

Вывод

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

Если структура простая, то пренебрегать ХК тоже не стоит. Это не приведёт к бурному росту поведенческих, но перелинковку и юзабилити вы подтянете.

Микроразметка сайта Schema.org, использование микроразметки в SEO для цен, товаров, услуг: реальные примеры и кейсы

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

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

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

Schema.org

Это наиболее популярный способ микроразметки контента. Поддерживается с 2011 года поисковыми гигантами: Google, Яндекс, Yahoo, Bing. С его помощью можно выводить различные полезные характеристики в сниппет. Например рейтинг, отзывы, цены и др.:

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

  • itemscope — указывает, какой объект мы используем;
  • itemtype — всегда идет после itemscope и указывает, какой тип объекта будет размечен. В нашем примере, это Product (Продукт) — Iphone 6;
  • itemprop — указывает свойства выбранного объекта, в нашем примере, это цена, описание и т.д.

При помощи разметки Schema.org можно размечать не только товары, но и статьи, фильмы, рецепты и т.д. К примеру, полный список поддерживаемых структурируемых данных Schema.org в Google можно посмотреть тут — https://developers.google.com/search/reference/overview?hl=ru:

А для их проверки на сайте стоит использовать сервис https://search. google.com/test/rich-results?hl=ru

Размеченный участок кода выглядит следующим образом:

И вот этот же участок через сервис проверки:

Open Graph

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

Например, вот сниппет страницы сайта при скидывании в Телеграмме, где размечено название сайта, УРЛ, заголовок и описание:

А вот сниппет похожей страницы, где дополнительно размечено изображение:

Для создания кода разметки используют теги синтаксиса:

  • og:title — заголовок объекта репоста;
  • og:description — описание объекта;
  • og:image — изображение;
  • og:url — ссылка на расположение объекта;
  • og:type — тип объекта.

Пример кода с разметкой Open Graph:

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

Словарь микроразметки Microformats. org создан в 2007 году. Он включает разные типы объектов и описания их свойств. Этим словарём описывают товары, мероприятия, компании, рецепты и другие сущности с набором уникальных характеристик. Из всего списка микроформатов чаще используется hCard, который описывает контактные данные людей и организаций.

Участок кода с использованием микроформатов будет выглядеть так:

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

Кроме основных атрибутов itemtype, itemscope, itemprope из Schema.org можно использовать доп. Элементы:

  1. RDFa и RDFa Lite для описания разных типов объектов через атрибуты xmlns:v=”http://rdf.data-vocabulary.org/#, property=”v:title”, typeof=”v:Breadcrumb” и другие.
  2. JSON-LD используется для описания объектов связанных данных. С целью адаптации разметки к поисковикам, они помещаются в теги <script>. В RDFa и JSON-LD данные представлены в формате «ключ-значение». Пример:


Где:

  • «@type»: «Product» – указание типа микроразметки
  • «sku»: «1548189» – артикул товара
  • «name»: «Apple iPhone 7 32Gb» – название товара
  • «image»: ссылка на изображение товара

Микроразметка для Яндекс и Google

Наличие микроразметки на сайте – один из официально подтвержденных факторов ранжирования (о чем сообщил представитель Google Gary Illyes). В своих рекомендациях поисковый гигант Google рекомендует использовать микроразметку JSON-LD (о чем говорится в официальном «Руководстве» Google).

Условно (очень грубо) можно разделить микроразметки на несколько типов: для интернет-магазинов, для статейного сайта, общие.

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

BreadcrumbList (строки навигации)

Микроразметка хлебных крошек на страницах сайта. Выглядит правильная мироразметка ХК так:

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

Organization

Общая микроразметка контактных данных для сайта, подойдет для всех контактов и любого типа сайта. Пример:

LocalBusiness

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

ImageObject

Атрибут itemprop=»image» позволяет роботам быстро распознавать информацию о картинках. Достаточно будет указать ссылку на изображение, описание, название картинки, подпись, размеры изображения. Пример:

Review

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

Article

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

Product

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

Что размечаем:

  1. Хлебные крошки
  2. Контакты
  3. Товары
  4. Категории
  5. Отзывы (входит в товары)
  6. Рейтинг (входит в товары)
  7. Вопрос-ответ
  8. Статьи

Товары

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

Пример отличной микроразметки товара — https://eplio.com.ua/bu-apple-iphone-8-plus-256gb-space-gray.html:



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


Рекомендую:

  • «brand» – использовать название сайта
  • «sku» – использовать артикул
  • «description» – использовать дескрипшен
  • Глобальный идентификатор товара, например код GTIN, MPN или ISBN – использовать артикул
  • «priceValidUntil» – указать дату, до которой цена актуальна. Можно делать автогенерацией на месяц вперед. Или использовать указанную дату на сайте если она есть
  • «url» – указать УРЛ страницы товара
  • «availability» – наличие товара. Варианты:
    • in_stock — в_наличии
    • out_of_stock — нет_в_наличии]
    • preorder — предзаказ
  • Недопустимый формат значения цены для элемента данных «price» – в цене не должно быть пробелов, точек, запятых и т.д. Только цифры.

Если у товара есть характеристики, то их тоже можно разметить, пример:

Под микроразметкой категорий я имею в виду разметку кол-ва товаров и минимальной/максимальной цены в категории, которые могут быть добавлены в сниппет страницы. Данная разметка строится на основе вышеупомянутой микроразметки товаров Product. Пример — https://touch.com.ua/Telefony-iPhone/:

Как выглядит сниппет:

В чем же заключается разметка? Если у товаров основной элемент разметки это тег offer, то для категорий это offers, в котором, собственно, и указывается кол-во товаров и диапазон цен + можно вывести средний рейтинг и кол-во отзывов по товарам категории:

  • @type — Product
  • name – указываем название категории или Н1
  • aggregateRating
  • @type — AggregateRating
  • ratingValue – средний рейтинг по всем товарам категории
  • reviewCount – кол-во отзывов
  • bestRating – лучшая возможная оценка
  • offers
  • @type — AggregateOffer
  • lowPrice– цена самого дешевого товара в категории
  • highPrice– цена самого дорогого товара в категории
  • priceCurrency – указываем валюту

Отзывы (входит в товары)

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

  • @type — Review
  • reviewBody – текст отзыва
  • datePublished – дата публикации
  • author
  • @type — Person
  • Name – Кто оставил отзыв
  • reviewRating
  • @type — Rating
  • ratingValue – Оценка

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

Часто задаваемые вопросы (FAQPage)

Одно из последних нововведений в плане микроразметки для Google. Позволяет существенно расширить сниппет за счет вывода от 2 до 4 часто задаваемых вопросов по теме поискового запроса. До 19.07.2020 работало почти во всех случаях, можно было особо не заморачиваться и добавлять сквозной блок, но потом Google видимо понял, что при помощи данной разметки начали сильно манипулировать поисковой выдачей (сниппет на 70% дисплея у мобильных устройств) и сильно ограничил вывод шаблонных блоков, а сквозные вообще пофиксил (исключения есть конечно, но они встречаются редко, на то и исключения).

Интересненько! Например, вы настроили себе микроразметку FAQPage (все проверки пройдены) для страниц и решили ее проверить, как обычно это и делают через site:domain.ru и поехали смотреть, правильно ли так делать? Да, но нет. Объясняю:

  1. Данные при проверке через site:domain.ru и реальность – разные вещи!
  2. Всегда проверяйте данные и микроразметке через Google Search Console
  3. Правильность микроразметки не гарантирует вывод данных в сниппет

Пример «Ожидание»:

Реальность (да, реальность сеошника жестока):

Так почему же Гугл не выводит вопрос-ответ в сниппет, если все правильно сделано? Тут все дело в новых алгоритмах, которые апдейтнули 19 июля 2020 года. Если вопросы и ответы не связаны релевантностью или интентом к поисковому запросу – выводиться они не будут. Соответственно для разных поисковых запросов сниппет одной и той же страницы может быть и с вопросами, и без них. Или по одному запросу будет выведено 2 вопроса и ответа, а по-другому – 4.

И последним важным изменением стала отмена вывода emodji для вопросов и ответов примерно в 99% случаев. Как же красочно выглядел сниппет:

И как стало:

Так как же настроить вопросы-ответы, чтобы иметь шансы на расширенный сниппет? Мой способ состоит в следующем:

Контентные сайты – писать вопросы-ответы из СНЧ запросов, как правило большинство таких запросов и есть вопросами по теме, которую вы описываете. Идеально вообще писать текст на страницы и вместе с ним несколько вопросов и ответов, чтобы полностью раскрыть тему.

Интернет-магазины – тут однозначно стоит использовать автогенерилку ответов. Что чаще всего интересует пользователей, которые ищут что-то на покупку:

  1. Цены – дешевые и дорогие товары
  2. Популярные товары – всегда интересно что берут другие
  3. Отзывы – важно, также ищут товары с большим кол-вом отзывов
  4. Ассортимент – в целом важен ассортимент магазина

Все вышеописанные данные есть на страницах магазинов, а значит программисты смогут их использовать в автогенерилке. Пример того, как это реализовать (подчеркнутые – динамические данные):

По другим вопросам вообще идет вывод товаров:

Или категорий:

В выдаче так:

Статьи

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

Так говорит сам Google!

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

Существует 3 варианта такой микроразметки:

  1. https://schema.org/Article — Общая схема, подходящая всем текстовым материалам.
  2. https://schema.org/NewsArticle — Схема для разметки новостных статей.
  3. https://schema.org/BlogPosting — Схема для разметки статей в блоге.

Пример универсальной микроразметке (замените общий объект Article на NewsArticle или на BlogPosting и валидность сохранится):

<div itemscope itemtype=»https://schema. org/Article»><link itemprop=»mainEntityOfPage» href=»https://example.ru/» /><link itemprop=»image» href=»image»>

<meta itemprop=»headline name» content=»Название Статьи»>

<meta itemprop=»description»

content=»Обязательное краткое описание статьи для Яндекса длиной от 50 до 150 символов.»>

<meta itemprop=»author» content=»автор статьи»>

<meta itemprop=»datePublished» datetime=»2010-07-03″ content=»2010-07-03″>

<meta itemprop=»dateModified» datetime=»2018-09-15″ content=»2018-09-15″>

<div itemprop=»publisher» itemscope itemtype=»https://schema.org/Organization»>

<div itemprop=»logo» itemscope itemtype=»https://schema.org/ImageObject»>

<img itemprop=»url image» src=»images/logo.png» alt=»Описание картинки» title=»Описание картинки» style=»display:none;»/>

</div>

<meta itemprop=»name» content=»название сайта»>

<meta itemprop=»telephone» content=»»>

<meta itemprop=»address» content=»Россия»>

</div>

<p>Интро</p>

<span itemprop=»articleBody»>Контент</span>

</div>

Давайте разберем её:

  • itemprop=»mainEntityOfPage» — Основная страница объекта, можно указать каноническую ссылку. Данное свойство является необязательным, но Google рекомендует его заполнять.
  • itemprop=»image» — Ссылка на картинку материала, передаем её через атрибут link, так что пользователи её не увидят в контенте, а вот поисковые роботы схавают.
  • itemprop=»headline name» — Заголовок материала.
  • itemprop=»description» — Короткое описание материала, желательно не более 150 символов.
  • itemprop=»author» — Автор материала.
  • itemprop=»datePublished» — Дата публикации материала, указывайте в формате ГГГГ-ММ-ДД.
  • itemprop=»dateModified» — Дата обновления материала, указывайте в формате ГГГГ-ММ-ДД.
  • itemprop=»publisher» — Для этого свойства необходимо использовать объект schema.org/Organization.
  • itemprop=»logo» — URL картинки, например, логотип сайта. Для этого свойства используем объект schema.org/ImageObject.
  • itemprop=»url image» — URL логотипа.
  • itemprop=»name» — Название сайта / организации.
  • itemprop=»telephone» — Телефон можно оставить пустым, ну или если он у вас есть, заполнить.
  • itemprop=»address» — Тут я указываю просто страну.
  • itemprop=»articleBody» — Тело материала.

Вопросы-ответы (QAPage)

Страница вопроса с ответами – это веб-страница, на которой после одного конкретного вопроса идут ответы. Для таких страниц можно использовать следующие типы разметки schema.org: QAPage, Question и Answer.

Если разметка реализована правильно, то в результатах поиска могут появляться расширенные результаты, которые помогают привлечь на сайт подходящую аудиторию через Google Поиск. Ниже представлен пример результата по запросу «Как вытащить застрявший кабель из USB-порта?» при наличии нужной разметки на странице:

Требования к контенту:

  1. Разметку нужно применять для отбельной страницы с вопросами и ответами, на которой есть возможность задать вопрос или оставить ответ. Если на вопрос дан ответ и нет возможности добавить другие ответы, то нужно использовать разметку FAQPage.
  2. Не применяйте разметку QAPage на всех страницах сайта или форума, если не весь контент отвечает указанным требованиям. Например, на форуме может быть одновременно множество тем-вопросов, для которых разметка подходит, и не связанных с вопросами страниц, для которых она не подходит.
  3. Не размечайте при помощи QAPage страницы с ответами на часто задаваемые вопросы или с несколькими вопросами. Разметка QAPage предназначена для страниц, посвященных какому-то одному вопросу и ответам на него.
  4. Тип Answer предназначен только для ответов на вопросы. Комментарии по поводу вопросов или ответов размечать с помощью типа Answer не следует.
  5. Для показа в виде расширенных результатов не подходят вопросы и ответы, в которых содержатся непристойные, грубые, оскорбительные, дискриминационные высказывания, материалы сексуального характера, сцены насилия, а также призывы к опасным или противоправным действиям.

Другие менее популярные микроразметки и ссылки на информацию по ним

  • Book
  • Карусель
  • Course
  • Отзыв критика
  • Event
  • Инструкции
  • Профессиональное обучение
  • Movie
  • Recipe
  • Окно поиска по сайту
  • Приложение
  • Подписка и платный контент
  • Video

По всем этим микроразметкам рекомендую брать информацию у проверенного источника – Гугла:

https://developers.google.com/search/reference/overview?hl=ru

похожие статьи Что такое продвижение по трафику

Что такое продвижение по трафику

Диджитал маркетинг. Что это?

Диджитал маркетинг. Что это?

Как предоставить доступы к Google Ads, Analytics, Tag Manager & Merchant Center

Как предоставить доступы к Google Ads, Analytics, Tag Manager & Merchant Center

Микроразметка ᐈ Руководство по структурированным данным Гугл (Примеры)

Содержание:

Микроразметка. Способы создания и ее схемы

Использование словаря Schema.org

Общая информация о словаре Schema и микроразметке

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

Сниппеты для Гугл

Сниппеты для Yandex

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

Offer Schema

WebPage Schema

AggregateRating Schema

Product Schema

Review Schema

SearchAction Schema

MobileApplication Schema

Микроразметка. Валидация и проверка

Итоги

Само понятие Микроразметка появилось 2011-м году вследствие договора между крупнейшими интернет-корпорациями мира. Такие гиганты, как Google, Yandex, Microsoft и Yahoo, решили создать единый стандарт для семантической разметки. После этого появился словарь тегов Schema.org, который позволял создать страницу так, что любая поисковая система одинаково считывала информацию с любой страницы. Подобная унификация дала новый толчок развитию интернета и позволила владельцам быстрее совершенствовать собственные ресурсы.

Микроразметка позволяет использовать единую семантику для продвижения собственного сайта. В данное время микроразметка имеет три вида:

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

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

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

  • С помощью itemscope можно разбить всю информацию на страницы для более удобного отображения.
  • Itemtype используется вместе с первым атрибутом и анализирует заданный тип сущности, используя при этом иерархию типов Schema.
  • Itemtrop отображает более детальную информацию о сущности. Если это фильм, то это название, режиссер, год выпуска, актеры и т.д.
  • Словарь имеет в наличии множество готовых шаблонов с заданными свойствами.
  • Существует очень много разнообразных свойств, но основных всего четыре: URL, image, description и name. Все другие свойства получают свои характеристики именно из этих четырех.
  • При вводе любой схемы нужно быть предельно осторожным и внимательно следить за родительскими и дочерними типами. В ином случае микроразметка может неправильно отобразиться.
  • В большинстве случаев для каждой отдельной страницы нужно создавать свою схему. Обязательно проверяйте каждую ссылку, которые должны быть помечены как URL.

Правильно настроенная микроразметка значительно улучшает «привлекательность» ресурса для поисковых систем. Средний показатель трафика может повыситься на 30%. Она создает ботам подробную карту ресурса, которая помогает им правильно обработать информацию. В результате этого сайт при нужном поисковом запросе находится значительно выше, чем без использования микроразметки. Для владельца любого интернет-ресурса использование такой возможности должно стоять в приоритете.

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

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

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

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

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

Код сниппета для Гугл

Отображение сниппета для Гугл

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

Отображение сниппета для Yandex

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

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

Offer Schema

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

Пример

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

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

Пример

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

Пример

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

Пример

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

Пример

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

За разметкой на базе словаря Schema нужно постоянно следить для обнаружения проблем и ошибок. Чтобы проверить микроразметку, необходима ее валидация. Существует несколько разных инструментов для валидации:

  • Валидатор микроразметки
  • Structured Data Linker
  • Structured Data Testing Tool

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

 

Разметка ​Open Graph: теги, примеры, проверка, картинки

В процессе разработки над нашими проектами, не раз сталкивались с проблемой правильной микроразметки Open Graph. В статье хотим поделиться решением, которое подойдет в 99% случаев.

Для начала ответим на вопрос, что такое разметка Open Graph и зачем она нужна?

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

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

Остается вопрос, но как пользователи делятся публикациями? Разберем часто используемое решения:

Кнопки «Поделиться» на сайте

Этот функционал предлагают несколько сервисов. Например, мы используем Яндекс для русскоговорящих проектов или Addthis для всего остального мира.

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

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

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

Протокол Open Graph от Facebook

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

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

Зачем нужен Open Graph?

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

Разметку Open Graph поддерживают соцсети (ВКонтакте, Facebook, Twitter, Pinterest, Одноклассники) и мессенджеры (Telegram, Skype) и другие.

Разберемся, как настроить разметку Open Graph для страницы.

Теги Open Graph

Протокол Open Graph состоит из мета-тегов, их интегрируют в HTML-код страницы в секцию head.

Основные теги Open Graph

  • og:title — название материала;
  • og:description – описание материала, заполнять не обязательно;
  • og:image – ссылка на картинку, которая должна сопровождать материал;
  • og:type – тип добавляемого материала, например, «website» — для сайта и самая используемая, «article» – статья, «movie» – кино и т.д.;
  • og:url – ссылка на саму веб-страницу, которая добавляется в социальную сеть.

Дополнительные теги Open Graph

  • og:site_name — название сайта;
  • og:locale – язык сайта, необязательные тег;
  • og:image:width – ширина изображения, рекомендуем обязательно использовать, ускоряет скраппинг;
  • og:image:height – высота изображения, рекомендуем обязательно использовать, ускоряет скраппинг.

Дополнительные теги Open Graph для Twitter

  • twitter:creator — ник канала в Twitter, начинается с @;
  • twitter:card – типа карточки «summary», «summary_large_image», «app», or «player».

Обратие внимание, на тот факт, что твиттер просит использовать name, а не property.

<meta name="twitter:creator" content="@PaLPaLyCH">
<meta name="twitter:card" content="summary_large_image">

Пример разметки Open Graph

<meta property="og:type" content="website">
<meta property="og:site_name" content="Студия Палыча">
<meta property="og:url" content="https://palpalych.ru/cases/sites/sajt-hudozhnika">
<meta property="og:locale" content="ru">
<meta name="twitter:creator" content="@PaLPaLyCH">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="Создан сайт художника">
<meta property="og:description" content="Создан сайт художника, правда не смогли его выложить в Интернет по решению заказчика. ">
<meta property="og:image" content="https://palpalych.ru/storage/app/media/2019/sajt-hudozhnika_soc.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Этот пример Open Graph самодостаточен для публикации практически во все социальные сети.

Требования к картинке для разметки

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

На хабре рекомендуют изображение в 968×504 пикселя, это меньше минимально рекомендованных Фейсбуком. Зато при таком размере и ратио картинку нигде не кропят, и выглядит она отлично.

Мы используем размер рекомендованный Фейсбуком 1200×630 пикселей.

Где проверить разметку Open Graph?

Тут всё просто. Идем на страницу «Отладки репостов» в Facebook и на страницу Card validator в Twitter. Вставляете вашу ссылку и проверяете.

Да прибудет с вами лайк, шер да репост!

Микроразметка контактных данных, карточек товаров и другая

Опубликовано: 18.03.2017. Обновлено: 07.04.2021 320 0

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

Яндекс, раздел помощи для вебмастеров

Документация от поисковиков

https://developers.google.com/search/docs/guides/search-gallery

https://yandex.ru/support/webmaster/schema-org/what-is-schema-org.html

Чтобы получить расширенные сниппеты и в Яндексе, и в Google, следует использовать разметку schema.org в формате микродата. Разметка JSON-LD проходит валидацию, но не отображается в поиске Яндекса. 

Примеры разметки

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

Проверяем наличие и, если отсутствует, делаем микроразметку schema.org для страницы с контактными данными.

Описание и пример https://yandex.ru/support/webmaster/schema-org/what-is-schema-org.html

Официальная страница: https://schema.org/Organization

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

Официальная страница: https://schema.org/Product

Пример микроразметки карточки товара магазина МВидео: schema.txt

Внедрять разметку можно и для страниц с услугами, пример в формате json. Реализация выводит дополнительную инфу в сниппете: 

 

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

Официальная страница: https://schema.org/VideoObject

Пример микроразметки видео с youtube: schema-video.txt

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

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

Официальная страница: https://schema.org/Question

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

О пользе разметки https://developers.google.com/search/docs/data-types/local-business

Официальная страница https://schema.org/LocalBusiness

Разметку размещаем только на главной  странице сайта. Пример в формате JSON-LD: mainpage.txt

Удобный инструмент для создания разметки: https://technicalseo.com/tools/schema-markup-generator/

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

Официальная страница: https://schema.org/WebPage

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

Проверка корректности внедрения микроразметки

Текущую микроразметку или результаты внедрения новой необходимо проверять в валидаторе микроразметки Яндекса https://webmaster.yandex.ru/tools/microtest/ и Гугла https://search.google.com/structured-data/testing-tool/u/0/?hl=ru

Расширение HTML5 — Микроданные | HTML5 Doctor

Для тех, кто любит (спорить) о семантике, HTML 5 — это фантастика. Старые презентационные элементы теперь имеют новое семантическое значение, есть множество новых семантических элементов, о которых мы можем поспорить, и мы даже в дней бунтуют. Но это не все! Также в HTML 5 включены микроданные, новый облегченный семантический мета-синтаксис. Используя атрибуты, мы можем определять вложенные группы пар данных «имя-значение», называемые микроданными , которые обычно основаны на содержимом страницы.Это дает нам совершенно новый способ добавлять дополнительную семантическую информацию и расширять HTML 5 .

Давайте рассмотрим эти новые атрибуты и посмотрим, как использовать их на практике с всеми любимым примером группы, Salter Cane.

Синтаксис микроданных #

itemscope и itemprop #
  

Я собираюсь на Salter Cane на следующей неделе. В восторге!

Наличие itemscope в элементе

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

itemprop имен могут быть словами или URL строками. Использование URL s делает имя глобально уникальным . Если вы используете слова, лучше всего использовать словарь и имена, определенные в словаре, что также делает имена уникальными.Мы рассмотрим это в разделе Типизированные элементы и глобально уникальные имена.

itemprop значение из атрибута #

Для некоторых элементов значение itemprop происходит из атрибута элемента, а не из текста элемента. Это применимо к значениям из атрибутов, содержащих URL s, datetime атрибут и content attribute.

  

Я перехожу на концерт . В восторге!

Определяет элемент со свойствами url и date , содержащий значения http://www.saltercane.com/ и 2010-07-18 соответственно.

Обратите внимание, что значение ссылки itemprop = "url" равно http://www.saltercane.com/ , а не текстовое содержание «Salter Cane» элемента.В микроданных следующие элементы передают свои URL-адреса в качестве значений: