Микроразметка для сайта

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

  1. Что такое микроразметка, зачем она нужна;
  2. Как её добавить на свой сайт;
  3. Сложности при разметке своего сайта;

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

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

Микроразметка — универсальная разметка данных, которая позволяет поисковому боту более точно распознавать контент на сайте при индексации. Слово «универсальная» означает то, что каждый поисковик, будь то Яндекс или Google будут понимать разметку, если она валидная (не содержит ошибок). Основное, что следует знать о микроразметке для нас: поисковые системы по разному вознаграждают авторов, которые её внедряют на свой сайт.

Микроразметка, а точнее словарь микроданных schema.org был создан в 2011 году, благодаря усилиям поисковых гигантов (Google, Yahoo, Microsoft).

Существует несколько типов микроразметки:

  • Микроданные (schema.org, использовать которую рекомендуют ПС)
  • RDFa
  • Open Graph

Терминология:

Внедрить микроразметку — разметить свой HTML код с помошью микроданных / RDFa / Open Graph

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

Валидатор — инструмент проверки правильности микроразметки. Есть у Яндекса и у Google. Лично я использую последний. Вы можете использовать тот, который больше нравится лично вам.

Сниппет — Виджет сайта в результатах поиска. Именно расширенным снипеттом поисковые системы награждают те веб сайты, которые добавили микроразметку на свой сайт.

ПС — Поисковая Система (Google, Yandex, Bing и тд)

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

Синтаксис в нашем случае — правила написания тегов. Мы будем прописывать атрибуты к уже существующим тегам на странице согласно таким правилам:

  • itemscope говорит о том, что тег содержит микроданные. (просто маркер для ПС о том, что этот конкретный блок кода содержит данные)
  • itemtype указывает ссылку на тип объекта (о них поговорим ниже);
  • itemprop определяет свойства объекта. (цена товара / рейтинг / валюта)

Бывает так, что данных, которые есть в коде (имеется ввиду html) не достаточно, для того, чтобы описать данные. В таком случае мы можем использовать тег «meta» с атрибутом itemprop, который будет проиндексирован ПС.

Если на данном этапе ничего не понятно — не огорчайтесь. Понимание прийдет сразу после первого примера!

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

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

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

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

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

Лично я, при внедрении микроразметки использовал инструмент проверки от Google.

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

После перехода по ссылке — нажимайте на кнопку «создать тест», и выбирайте вариант, который Вам необходим.

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

Добавить микроразметку на хлебные крошки

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

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

<ol>
    <li>
        <a href="https://example.com/">Главная</a>
    </li>
    <li>
        <a href="https://example.com/pomazki-aksessuary/">Помазки и аксессуары</a>
    </li>
    <li>
        <a href="https://example.com/pomazki-aksessuary/pomazki/">Помазки</a>
    </li>
    <li>
        <a href="https://example.com/pomazki-aksessuary/naturalnie/">Помазки натуральные</a>
    </li>
</ol>

Код с микроразметкой:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/">
            <span itemprop="name">Главная</span>
        </a>
        <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/pomazki-aksessuary/">
            <span itemprop="name">Помазки и аксессуары</span>
        </a>
        <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/pomazki-aksessuary/pomazki/">
            <span itemprop="name">Помазки</span>
        </a>
        <meta itemprop="position" content="3" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/pomazki-aksessuary/naturalnie/">
            <span itemprop="name">Помазки натуральные</span>
        </a>
        <meta itemprop="position" content="4" />
    </li>
</ol>

Все еще не понятно? Объясню.

<ol itemscope itemtype="http://schema.org/BreadcrumbList">

Здесь itemscope — просто маркер о том что тег ol — содержит данные того формата, который указан в itemtype. Для каждого формата есть свой набор свойств. Ознакомиться с ним можно перейдя по ссылке на сайт schema.org.

Внутри itemscope может находится любой тип данных, который валиден для текущего типа. В данном случае BreadcrumbList содержит внутри себя тип ListItem, внутри которого прописаны различные свойства: name — имя категории. Такой принцип одинаков для всех типов.

<span itemprop="name">Помазки и аксессуары</span>

Обратите внимание что внедрение микроразметки практически изменило структуру нашего html кода. Мы просто дописали несколько атрибутов к существующей разметке. Самое крупное изменение — прописать <span> внутри тега <a>. Это понадобилось для того, разметить название категории.

Перейдя по ссылке http://schema.org/BreadcrumbList, можно ознакомиться с полным списком свойств и типов, которые можно указать внутри типа BreadcrumList, который используется для внедрения микроразметки для хлебных крошек.

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

Добавить микроразметку страницу товара

За внедрение микроразметки на страницу товара (тип данных — Product) Гугл вознаграждает нас таким сниппетом:

Товар, в понимании schema.org — любая сущность, которая может быть опубликована на сайте и продаваться:

  • Физический товар (мыло, телефон, чайник и т.д.)
  • Электронный товар (электронный билет, лицензия на ПО, номер в отеле)

Сниппет микроразметки категорий и товара

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

  • Рейтинг (по сути — отдельный тип, его можно внедрить на каждую страницу)
  • Количество отзывов (также отдельный тип, и может быть на любой странице)
  • Ценовой диапазон или цена
  • Наличие товаров

Код с микроразметкой:

<div itemscope itemtype="http://schema.org/Product">
    <span itemprop="name">Название товара</span>
    <span itemprop="image" img src="url-адрес изображения товара" />
     
    <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
        Рейтинг <span itemprop="ratingValue">4</span>/5
        основан на <span itemprop="reviewCount">11</span> оценках
    </div>
     
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <span itemprop="priceCurrency" content="UAH">грн.</span> // Указание валюты
        <span itemprop="price" content="599">599</span> // Цена товара
        <link itemprop="availability" href="http://schema.org/InStock" />В наличии
    </div>
     
    <span itemprop="description">Краткое описание товара</span>
     
    <div itemprop="review" itemscope itemtype="http://schema.org/Review">
        <span itemprop="name">Заголовок отзыва</span>
        от <span itemprop="author">Имя пользователя</span>,
        <meta itemprop="datePublished" content="2016-12-01">Декабрь 12, 2016
            
        <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
            <meta itemprop="worstRating" content = "1"> // Минимальная оценка
            <span itemprop="ratingValue">4</span>/ // Оценка пользователя
            <span itemprop="bestRating">5</span>звезд.  // Максимальная оценка оценка
        </div>
        <span itemprop="description">Текст отзыва</span>
    </div>
</div>

Как видно из кода — вверху иерархии установлен тип Product, который содержит в себе:

  • AggregateRating — Рейтинг товара
  • Offer — Информация о ценах (в данном случае — цена одна)
  • Review — Блок с отзывами.

Не старайтесь просто скопировать и вставить этот блок кода (как это сделал я с другого блога 🙂 ).

Постарайтесь внедрить микроразметку для продудта на свой сайт, под свой html код. Пользуйтесь документацией для типа product (https://schema.org/Product) для выполнения этой задачи. Код выше — только пример.

Добавить микроразметку страницу категории

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

Код с микроразметкой:

<div itemscope itemtype="http://schema.org/Product">
    <p itemprop="Name">Название категории</p>
    <div itemtype="http://schema.org/AggregateOffer" itemscope="" itemprop="offers">
        <meta content="35" itemprop="offerCount"> // Количество товаров
        <meta content="1316" itemprop="highPrice"> // Наивысшая цена за товар
        <meta content="160" itemprop="lowPrice"> // Низшая цена за товар
        <meta content="RUB" itemprop="priceCurrency"> // Валюта
    </div>
</div>

Еще, в коде мы используем Тег <meta>, который не выводит никакого визуального содержимого, а лишь описывает некоторые свойства.

 

Микроразметка для статьи

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

Микроразметка для статьи

Код с микроразметкой:

<div itemscope itemtype="http://schema.org/Article">
    <header>
        <h1 itemprop="headline name">Пример микроразметки статьи</h1>
    </header>
    <span itemprop="datePublished" content="ГОД-МЕСЯЦ-ДЕНЬ">Дата размещения</span> 
    <span itemprop="author">Солтык Алексей</span>
    <div itemprop="description"> 
        <p>Текст краткого описания</p> 
        <p>...</p>
    </div>
    <h2 itemprop="alternativeHeadline">Подзаголовок статьи</h2>
    <div itemprop="articleBody">
        <article> 
            <img itemprop="image" src="URL адрес изображения" title="Какое-то изображение в статье" alt="Альтернативное название"> 
            <p>Размечаем содержимое статьи!</p> 
            <p>...</p>
        </article>
    </div>
</div>

Все свойства, которые можно указать в статье — можно найти на странице http://schema.org/Article.

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

 

Примечание и сложности в реализации микроразметки на сайт

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

На новые сайты микронные могут быть добавлены в течении полугода.

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

 

Anatolii Koziura

Антураж-куражмонтаж в мире web разработки.

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

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