Микроразметка сайта. Что это и зачем она нужна?

SEO продвижение 
Время чтения: 13 мин, 50 сек
Микроразметка сайта. Что это и зачем она нужна?

Содержание:

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

Что такое микроразметка сайта? Зачем она поисковым системам и пользователям? 

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

Перед внедрением семантической разметки нужно четко понять, какой тип контента размещен на каждой из страниц. Для примера возьмем URL товара в магазине. Здесь нужно отметить: 

  • информацию о стоимости товара;
  • полное наименование каждого товара;
  • детализированное описание;
  • фото товара;
  • отзывы и рейтинг в сравнении с другими товарами. 

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

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

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

Schema.org – самый распространенный стандарт разметки

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

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

В этом словаре есть три основных атрибута: 

  • itemscope – указывает название объекта, на странице, который мы размечаем;
  • itemtype – идет за предыдущим атрибутом и указывает на тип товара или другого объекта расположенного на URL, который мы будем размечать (например, модель телефона, модель авто);
  • itemprop – важные для пользователя свойства объекта (например, цена, объем памяти, размеры).

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

Опенграф – разработка специалистов Facebook 

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

Отладчик разметки – https://developers.facebook.com/tools/debug/?q=

Также OpenGraph работает в мессенджерах (Telegram, Skype и пр). Посмотрим на основные атрибуты этого словаря: 

«og:title» – описывает тег title;

«og:locale» – задает язык или локализацию вашего сайта;

«og:type» – тип основного контента, размещенный на размечаемой странице;

«og:site_name» – имя вашего сайта.

По тому же принципу описывается URL, description, задается картинка для ссылки.

<meta property="og:type" content="website"/>
<meta property="og:title" content="Разработка и создание сайтов, Интернет маркетинг, SMM, Дизайн, SEO - Outsourcing team"/>
<meta property="og:description" content="Разработка и продвижение сайтов от студии Outsourcing Team – эффективные и современные решения для продвижения вашего бизнеса онлайн."/>
<meta property="og:url" content="https://outsourcing.team/"/>
<meta property="og:site_name" content="Outsourcing Team"/>
<meta property="og:image" content="https://outsourcing.team/wp-content/uploads/2019/02/og.jpg"/>

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

Чтобы правильно структурировать данные на странице, нужно знать синтаксисы микроразметки. Синтаксис – это набор правил, по которым используется словарь для микроразметки. 

В данный момент используют три синтаксиса, которые мы разберем в деталях: RDFa, JSON-LD и Microdata. 

Посмотрим на особенности каждого из них. 

Особенности и правила синтаксиса Microdata 

Появился в HTML5. Упростил интерпретацию контента для поисковых роботов. С его появлением выдача поисковых систем стала более логичной и релевантной. Данные размещаются непосредственно в коде страницы. 

С помощью синтаксиса Microdata можно размечать товары, информационные статьи и другие виды контента. 

<div itemscope itemtype="http://schema.org/ItemList">
    <link itemprop="url" href="http://example.com/"><span itemprop="numberOfItems">315</span>
    <div itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
        <img alt="Photo of product" itemprop="image" src="http://example.com/1.jpeg"> <a itemprop="url" href="http://exanple.com/brand/"><span itemprop="name">BRAND</span></a>
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <span itemprop="price">1 грн.</span>
        </div>...
    </div>
    <div itemprop="itemListElement" itemtype="http://schema.org/Product">
        ...
    </div>
</div>

Синтаксис RDFa и его применение

Разработка специалистов из W3C (World Wide Web Consortium), чтобы структурировать данные на веб сайтах. Данные также размечаются внутри HTML кода. Сейчас этот синтаксис используют все меньше из-за сложности реализации. Google отдает предпочтение синтаксису Microdata и словарю Schema.org. Чаще всего RDFa применяют в словаре Open Graph, который оптимизирован для соцсетей. 

<div vocab="http://schema.org/" typeof="ItemList">
    <link property="url" href="http://example.com/"><span property="numberOfItems">315</span>
    <div property="itemListElement" typeof="Product">
        <img property="image" alt="Photo of product" src="http://example.com/1.jpeg"> <a property="url" href="http://example.com/brand/"><span property="name">BRAND</span></a>
        <div property="offers" typeof="Offer">
            <meta property="schema:priceCurrency" content="RUB">руб
            <meta property="schema:price" content="1.00">1,00
            <link property="schema:itemCondition" href="http://schema.org/NewCondition">
        </div>...
    </div>
    <div property="itemListElement" typeof="Product">
        ...
    </div>
</div>

JSON-LD – инновационный формат разметки страниц 

Самый новый и востребованный формат. Первые элементы этого синтаксиса появились еще в 2010 году. Основное отличие в том, что разметка внедряется в тег script, а не в основной HTML код. 

Эта разметка состоит из наборов пар “ключ – значение”. Синтаксис легко читается не только ботами. Он понятен для человека. Примеры ключей: @context, @type, author, interactionStatistic, interactionService, name, url и пр. 

С 2014 года этот синтаксис рекомендует Google, также его поддерживает Schema.org. 

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "ItemList",
    "url": "http://example.com",
    "numberOfItems": "315",
    "itemListElement": [
        {
            "@type": "Product",
            "image": "http://example.com/1.jpeg",
            "url": "http://example.com/brand/",
            "name": "Brand",
            "offers": {
                "@type": "Offer",
                "price": "1 грн."
            }
        },
        {
            "@type": "Product",
            "name": "..."
        }
    ]
}
</script>

Как все это реализовать на сайте и получить profit? 

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

Микроразметка в разделах интернет-магазинов 

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

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "Название категории",
    "offers": {
    "@type": "AggregateOffer",
    "lowPrice": "минимальная цена",
    "highPrice": "максимальная цена",
    "priceCurrency": "UAH",
    "offerCount": "",
    "image": "http://example.com/1.jpg"
    },
    "aggregateRating":{
     "@type": "aggregateRating",
     "ratingValue": "среднее значение рейтинга",
     "reviewCount": "количество отзывов",
     "bestRating": "5",
     "image": "http://example.com/1.jpg"
      }
}
</script>

Разметка стандартной страницы с товаром 

В рамках Schema.org для структурирования информации оптимальны схемы Product, Offer. Информацию можно представить в поисковом объявлении (сниппете) с названием товара, ценой и основными характеристиками. 

Для этого в коде должны присутствовать поля name (название товара), price, pricecurrency (валюта цены). 

<script type="application/ld+json">
    {
        "@context": "http://schema.org/",
        "@type": "Product",
        "name": "Название товара",
        "image": [
                        "http://example.com/1.jpg"
                        "http://example.com/2.jpg"
                        "http://example.com/3.jpg"
        ],
        "description": "Описание товара",
        "mpn": "Код товара",
        "brand": {
            "@type": "Thing",
            "name": "Brand"
        },
        "offers": {
            "@type": "Offer",
            "url": "http://example.com/product1",
            "priceCurrency": "UAH",
            "price": "999.00",
            "availability": "http://schema.org/InStock",
            "seller": {
                "@type": "Organization",
                "name": "Название магазина"
            }
        }
    }
</script>

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

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

<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "Organization",
        "name": "Название сайта",
        "url": "http://example.com/",
        "logo": "http://example.com/logo.svg",
        "email": "example@gmail.com",
        "description": "Описание сайта",
        "sameAs": [
            "https://www.instagram.com/example/",
            "https://www.youtube.com/channel/example"
        ],
        "address": {
            "@type": "PostalAddress",
            "streetAddress": "ул. Пример, 19",
            "addressLocality": "Киев",
            "addressCountry": "Украина"
        },
        "contactPoint": [{
            "@type": "ContactPoint",
            "telephone": "+380 (11) 111-11-11",
            "contactType": "Тип номера"
        },{
            "@type": "ContactPoint",
            "telephone": "+380 (11) 111-11-11",
            "contactType": "Тип номера"
        }]
    }
</script>

URL с отзывами

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

Картинки и их разметка 

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

Правильная разметка на сайтах новостей, тематических порталах 

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

На новостных сайтах присутствует мультимедийный контент (видео, фото, аудиозаписи). Здесь применяют разметку Schema.org/Article. Этот шаблон включает атрибуты, которые описывают: 

  • общий контент;
  • заголовок;
  • основной текст;
  • автора публикации;
  • дату публикации. 
<div itemscope itemtype="https://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="http://example.com/" />
    <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>

Структура разметки на страницах видеохостинга 

На вашем сайте много видеоконтента? Значит вам необходимо внедрять разметку типа VideoObject от Schema.org. Как альтернативу можно использовать расширение от Open Graph. После разметки в поисковой выдаче будут доступны: 

  • заставка видео;
  • заголовок ролика, размещенного на странице;
  • короткое текстовое описание;
  • продолжительность видео на странице;
  • авторские права и др. 
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Название видео",
  "description": "Описание видео",
  "thumbnailUrl": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
   ],
  "uploadDate": "2016-03-31T08:00:00+08:00",
  "duration": "PT1M54S",
  "contentUrl": "https://www.example.com/video/123/file.mp4",
  "embedUrl": "https://www.example.com/embed/123",
  "interactionStatistic": {
    "@type": "InteractionCounter",
    "interactionType": { "@type": "http://schema.org/WatchAction" },
    "userInteractionCount": 5647018
  }
}
</script>

Поскольку пользователи не обязательно будут искать фильм по названию. Поэтому в сниппет также добавляют актеров, режиссера, жанр фильма. Для этого лучше использовать шаблон Movie от Schema.org. 

Разметка на корпоративных сайтах 

У этого типа сайтов есть еще одна специфическая категория страниц – Вопросы и ответы (FAQ). Это поможет привлечь больше трафика по низкочастотным запросам. Для этого оптимально подходят атрибуты Question и Answer от Schema.org. 

Микроразметка блока FAQ (частые вопросы) в разных разделах

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

Обратите внимание! Такие страницы нельзя использовать в рекламных целях. Контент в разметке должен совпадать с контентом на странице. 

Еще один важный факт — внедрение микроразметки FAQ может снизить CTR. Почему это происходит? Если пользователь видит ответ на свой вопрос в выдаче, ему незачем заходить на сайт. Поэтому, обдумайте, насколько важна для вас разметка раздела с вопросами и ответами. 

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "Вопрос 1",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Ответ 1"
    }
  },{
    "@type": "Question",
    "name": "Вопрос 2",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Ответ 2"
    }
  },{
    "@type": "Question",
    "name": "Вопрос 3",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Ответ 3"
    }
  },{
    "@type": "Question",
    "name": "Вопрос 4",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Ответ 4"
    }
  }]
}
</script>

Разметка страниц с инструкциями и советами (How to) 

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

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

Разметка HowTo оптимизирует сайт для голосового поиска. С большей вероятностью поисковая система покажет именно контент с разметкой. 

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

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

Когда вы выбрали словарь, синтаксис и шаблон разметки каждой страницы необходимо добавить все это в код сайта. Как это сделать правильно и какие инструменты использовать, если вы – не веб-разработчик и даже не SEO специалист? Разберем три основных варианта. 

Маркер данных от Google Search Console 

Для примера представим, что вы размечаете сайт-афишу. Важно, чтобы он был подключен к Google Search Console, инструменту для управления сайтом и аналитики. Это упрощает аналитику и оптимизацию сайта. Разберем добавление разметки на примере страниц с событиями. Инструмент маркер данных найдет их на сайте за несколько минут. 

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

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

Это – еще один инструмент от поискового гиганта Google. Сервис генерирует код разметки, который нужно вручную перенести на сайт. Чтобы начать разметку, выберите сайт, укажите тип нужной страницы и ее URL. Начните выделять информацию на странице. Инструмент подскажет атрибуты, которые можно использовать. Когда работа с первым URL будет закончена, нажмите кнопку Создать HTML и выберите один из двух форматов данных. 

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

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

Третий способ добавить структурированные данные – сделать это с помощью плагинов. Для каждой CMS они свои, поэтому рассмотрим на примере WordPress и компонента YoastSEO. Установив плагин, обязательно заполните информацию о сайте. На основе этих данных компонент формирует базовую разметку.

Для разметки OpenGraph под социальные сети в меню плагина есть специальный раздел. 

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

Валидация результатов 

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

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

Итоги, рекомендации для вашего

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

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

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

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

0

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

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

Получай новости первым

Спасибо! Ваше сообщение отправлено.