РУССКИЙ ВОЕННЫЙ КОРАБЛЬ, ИДИ НА ХУЙМИ ПРАЦЮЄМО ДЛЯ УКРАЇНИ

Мікророзмітка сайту. Що це і навіщо вона потрібна?

SEO просування 
Час читання: 13 хв, 47 сек
Мікророзмітка сайту. Що це і навіщо вона потрібна?

Содержание:

Основне завдання веб-сайтів – привертати увагу відвідувачів, потенційних клієнтів, презентувати товари та послуги, генерувати ліди. Все починається із привернення уваги. Правильно виконана семантична мікророзмітка для сайту – це один із способів підняти 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

коментарів

Залишити коментар

Отримуй новини першим