Як додати розмітку в WordPress для кращого SEO, все про WordPress

Щоб залучити максимальну кількість відвідувачів на свій WordPress-сайт, необхідно переконатися, що контент сайту доступний для пошукових роботів. Проте складніше завдання – зробити те щоб пошукові системи могли зрозуміти релевантність цього контенту у тих.

Із цим нам допоможе семантична розмітка.

Що таке семантична розмітка?

Семантична розмітка – це спосіб явно повідомити пошукові системи та інші програми про об'єкти, зв'язки між цими об'єктами, а також дії. Ця термінологія може здатися дивною, тому я дещо уточню: під об'єктами ми маємо на увазі людей, місця чи речі. Зв'язки між двома об'єктами – це, наприклад, бізнес чи місцезнаходження бізнесу. Приклад дії – це, коли користувач (об'єкт) шукає щось.

Ми будемо використовувати у цьому посібнику розмітку Schema.org, яка є спільним проектом, націленим на просування семантичної розмітки для структурованих даних у мережі, в електронній пошті та на веб-сторінках. Ви можете дізнатися більше про цей проект, відвідавши сайт Schema.org чи репозиторій GitHub.

Чому семантична розмітка така важлива?

Як ми вже говорили раніше, семантична розмітка дозволяє пошуковим системам краще розуміти об'єкти, зв'язки між ними та дії. Schema.org спонсорується провідними пошуковими системами, такими як Google, Microsoft, Yahoo та Yandex. Якщо ви вже маєте сайт і зацікавлені у покращенні ефективності ваших пошукових запитів, семантична розмітка має бути одним із ваших інтересів.

Як семантична розмітка допомагає із SEO?

На даний момент семантична розмітка не впливає на показники ранжирування.органічної видачі. Ви можете запитати: «Тоді який сенс у ній?» Ви, ймовірно, бачили рейтинги оглядів, поради чи заходи у видачі Google, які містять додаткову інформацію у пошуковій видачі. Вони називаються rich snippets («розширені сніпети»), і вони ґрунтуються на семантичній розмітці.

Згідно Google, експерименти, які вони провели, показали, що розширені сніпети насправді збільшують показник кліків. Це означає, що залишаючись на тих же пошукових позиціях у видачі Google, ви можете залучити більше трафіку до свого сайту. Семантична розмітка безпосередньо не покращує ваші пошукові показники, проте вона, як і раніше, може бути корисною для SEO.

Google запропонували деякі рекомендації, які дозволяють переконатися, що розмітка застосована правильно:

• розмітка має бути включена на вашому офіційному сайті;
• повинні використовуватися найвідповідніші типи та імена об'єктів;
• JSON-LD, RDFa або формати мікроданих можуть використовуватись для семантичної розмітки;
• всі релевантні сторінки повинні бути розмічені, у тому числі еквівалентні сторінки, такі як HTML або AMP-версії, а також канонічні сторінки;
• сторінки з семантичною розміткою не повинні бути заблоковані для робота Google через robots.txt;

Незважаючи на те, що Google відзначили, що семантична розмітка в даний момент не впливає на пошукове ранжування, Джон Мюллер заявив під час Google Hangout, що «з часом, я думаю, вона (структурована розмітка) теж враховуватиметься».

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

Які існують типи семантичної розмітки?

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

Google Search Console також повідомляє про будь-які знайдені структуровані дані, а також про будь-які помилки. Це зручно, якщо у вас є великий сайт – перевіряти кожну сторінку на такому сайті буде надто непрактично. Над вашим сайтом також може працювати кілька людей, і Search Console буде повідомляти вас про будь-які проблеми, що стосуються структурованих даних, якщо хтось із вашої команди випадково припустився помилки.

Яку семантичну розмітку зараз підтримує WordPress?

Якщо ви подивитеся на будь-яку з офіційних тем WordPress, ви побачите HTML-клас hentry. Він є мікроформатом hAtom, який використовується для розмітки дат або тимчасового веб-контенту, такого як записи блогу. Ви можете бачити це в дії, якщо подивіться вихідний код будь-якої офіційної теми WordPress – наприклад, теми Twenty Sixteen. Ви помітите, що кожен пост у блозі має клас hentry, а також класи, пов'язані з іншими властивостями hentry.

Давайте розглянемо цю схему з мікроформатами з прикладу теми Twenty Sixteen. Ми будемо використовувати інструмент Structured Data Testing Tool від Google.

Ми бачимо, що Google розпізнає формат hAtom, а також hentry та його різні властивості. Ми не будемо зосереджуватися на hentry у цій статті.

Які семантичні схеми можуть бути використані за допомогою плагінів?

Перш ніж ми перейдемо до створення довільної схеми для WordPress-сайту, відразу зазначимо, що є величезна кількість плагінів, які дозволяють застосовувати деякі доступні розмітки без роботи з кодом.

All In One Schema.org Rich Snippets

Перший плагін - All In One Schema.org Rich Snippets. Він дозволяє застосувати такі схеми:

Плагін дуже корисний, якщо вам потрібна проста реалізація семантичної розмітки; однак, ви можете задавати тільки один тип схеми на сторінку. Також плагін не підтримує зараз схему для локального бізнесу, що є дуже важливим для багатьох веб-сайтів.

Якщо подивитися в офіційному каталозі WordPress, можна знайти досить багато плагінів на запит «schema». Плагіни дозволяють уникнути занурення в код.

Як додати довільну схему до WordPress-сайтів та/або записів?

Що робити, якщо ми хочемо додати більше довільних реалізацій семантичної розмітки до свого WordPress-сайту, а плагіни не дозволяють це зробити? Допустимо, ви хочете, щоб на сторінці або в записі було використано кілька типів схем. Наприклад, ви хочете додати схему для заходу, а також для персони, яка відповідає за цей захід. Або, наприклад, у вас на сторінці наведені численні відгуки. Перераховані вище плагіни не дозволять вам впоратися з цим.

Нам потрібно буде створити довільну реалізацію схеми. У цій статті ми розглянемо два способи застосування схеми – за допомогою мікроданих та за допомогою JSON-LD.

Що таке мікродані?

Мікродані – це специфікація для машиночитаних даних, що вбудовується у існуючий контент HTML-документів. Нижче наведено приклад того, як додавання мікроданих може змінити HTML-код:

HTML зі схемою мікроданих:

Як ви можете бачити, у коді з'явилися додаткові атрибути, а також деякі додаткові елементи span.

Що таке JSON-LD?

JSON-LD – це формат зв'язаних даних, реалізований за допомогою JSON, який дозволяє створювати машиночитані дані, схожі на мікродані. Google рекомендує формат JSON-LD для семантичної розмітки. Цей формат найпростіше реалізувати практично.

Давайте розглянемо ще раз приклад із мікроданими та спробуємо його трансформувати в JSON-LD. Вихідний HTML буде наступним:

Еквівалентна схема JSON-LD:

На мою думку, JSON-LD набагато простіше у плані читання та налагодження. Крім того, він не поєднується з видимим для користувача текстом сторінки, а тому з його допомогою зручніше передати свої дані. Зауважте, що Google підтримує JSON-LD для всіх типів даних. У документації говориться, що Google не підтримує JSON-LD для схеми із хлібними крихтами; Однак Джон Мюллер з Google підтвердив, що вони вже підтримують цю схему, просто ще не встигли оновити документацію.

Реалізація схеми з мікроданими

Щоб застосувати схему з мікроданими, потрібно буде взяти існуючий HTML-код і додати до нього різні атрибути і можливі елементи. Вам потрібно буде відредагувати вашу тему для наступних прикладів. Якщо ви використовуєте тему, створену кимось, то в такому випадку вносите всі зміни до дочірньої теми, інакше вони будуть переписані при оновленні вихідної теми.

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

Якщо ви додали дані бізнесубезпосередньо в footer.php, то у такому разі відкрийте цей файл. Нижче наведений HTML-код для контактних даних компанії:

Якщо ви додали дані про компанію в текстовий віджет, після чого помістили його в область віджетів у футері, то в такому випадку вам просто потрібно внести HTML-код і мікродані у текстовий віджет, замінивши те, що було в ньому раніше.

Реалізація семантичної розмітки за допомогою JSON-LD

Використання JSON-LD – мій метод реалізації семантичної розмітки. Саме його рекомендує використовувати Google. Мені він подобається тому, що з його допомогою можна легко додавати або видаляти схеми, використовуючи окреме довільне поле та JSON-LD; не потрібно проводити тривалу розмітку шаблонів за допомогою атрибутів мікроданих.

Я використовуватиму ту саму схему для локального бізнесу, що й у прикладі з мікроданими, щоб показати, як реалізувати розмітку за допомогою JSON-LD. Для початку давайте перейдемо до будь-якого запису або сторінки на панелі адміністратора WordPress, до якої ви хочете додати схему. Переконайтеся, що у розділі Screen Options вибрано довільні поля.

Гортаємо сторінку вниз, щоб побачити довільні поля. Додаємо нове довільне поле з назвою schema та наступним значенням:

Клацаємо по кнопці Add Custom Field, прокручуємо вгору і тиснемо Update.

Тепер відчиняємо header.php. Тут ми будемо використовувати функцію get_post_meta(), щоб отримати значення нашого довільного поля та застосувати його у темі. Вставте наступний сніпет перед закриваючим тегом head у файлі header.php:

Що ми тут зробили? Ми внесли значення get_post_meta() в змінну $schema. Функція get_post_meta() отримує три аргументи – ID запису чи сторінки (мивикористовуємо тут get_the_ID() для отримання поточного ID), назву довільного поля, яке ми створили в панелі адміністратора, а також булеве значення, що вказує на те, що буде повертатися - окремий пункт або масив. Потім ми перевіряємо, чи є хоча б одна схема, і якщо так, то виводимо її в розділі head документа.

Якщо ви збережете header.php і перезавантажте сторінку, ви повинні побачити JSON-LD зі схемою одразу перед закриваючим тегом head. Якщо ви протестуєте розмітку у Structured Data Testing Tool, ви побачите свій об'єкт – локальний бізнес. Жодних помилок бути не повинно.

Як і у випадку з мікроданими, якщо інформація була додана вами у віджет, ви повинні також вставити сніппет JSON-LD у той же самий текстовий віджет.

Давайте розглянемо інший приклад із розміткою.

Я розгляну ще один приклад, щоб стало зрозуміло, чого можна досягти за допомогою цього методу.

Застосування схеми продуктів за допомогою JSON-LD

Код об'ємніший, ніж у попередніх прикладах, оскільки тут є багато різних властивостей. Наприклад, 'Thing', 'AggregateRating', 'Offer', 'Organization'. Однак звідси все одно можна легко зрозуміти, як кожна з властивостей пов'язана з іншим.

Застосування кількох об'єктів на одній сторінці або в одному записі

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

---