// logo.png

← Повернутись до блогу

Мікророзмітка для сайту

July 2018 6 хвилин на читання 204 перегляди

Мікророзмітка для сайту — дуже важливе та досить просте завдання, з яким впорається будь-яка людина, яка знає 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.

Його інтерфейс досить простий, можна перевірити як розмітку для веб-сторінки, так і вставити свій фрагмент коду.

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

Додати мікророзмітку на хлібні крихти

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

Код без мікророзмітки:

<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) Google винагороджує нас таким сніпетом:

Товар, у розумінні 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.

На нові сайти мікродані можуть бути додані протягом півроку.

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

2018–2025 (c) Списуй але не один в один