Додаємо Microdata в модуль хлібних крихт (mod_breadcrumbs). «Хлібні крихти»: мікророзмітка та її вплив на сніпети сторінок Мікророзмітка хлібних крихт schema org
Вітаю, друзі. Сьогодні на моєму блозі ювілейний, 400-й пост. Дуже хотілося мені з нагоди такої дати дати якийсь реально корисний контент, щоб він був цікавий, корисний і актуальний. І тема для такої статті дозріла на рівному місці – я хотів розібратися з формуванням гарних сніпетів у пошуку, а закопався при цьому ще у дві теми:
- встановлення хлібних крихт на свій WordPress блог (хотів без плагіна, щоб не навантажувати сайт),
- та налаштування мікророзмітки (без неї користі від хлібних крихт небагато).
Я вже давно чув і читав про хлібні крихти, тільки так і не міг зрозуміти, яка від них користь для звичайного блогу з простою і зрозумілою структурою. Самі поміркуйте, у мене є головна сторінка, всі пости розподілені по рубриках і все. Тобто максимальний шлях від домашньої сторінки до кінцевої статті – це 2 кліки. У кожній статті є посилання на рубрику, до якої вона відноситься, тому відвідувачу заблукати просто ніде.
Інша річ, якщо сайт складний і структура у нього така, що можна ходити півгодини колами і не знайти те, що шукав. Якщо у вас якийсь інтернет магазин з десятками категорій, кожна з яких розбита на дочірні рубрики, ті, у свою чергу, ще й ще, а далі кожен товар на кольори поділений – тут я розумію важливість хлібних крихт – вони потрібні користувачеві як елемент навігації та .
До речі, назва "хлібні крихти" від цього і пішла, спочатку це була лише навігація сайтом. Пам'ятайте казку "Гензель і Греттель", де діти кидали на своєму шляху шматочки хліба, щоб потім знайти шлях назад. У казці цей спосіб їм не дуже допоміг, а для сайтів у нагоді.
Зовнішній вигляд СНІПЕТ у пошуковій видачіОтже, я не бачив сенсу в такій примочці для свого блогу, доки не зіткнувся з другим значенням крихт – виявляється, їх бачать не лише люди, а й пошукові системи. І пошукові системи їх бачать не лише як внутрішні посилання, що впливають на перелінкування та розподіл ваги сторінок, а й як важливий елемент навігації. Яндекс і Google використовують цей елемент для формування сніпету. Як це виглядає, довго розповідати не хочеться, краще один раз побачити на власні очі:
Сніппет – відображення сайту в результатах пошукової видачі.
Чим привабливіший сніпет, тим вища його клікабельність, це дає відразу подвійний ефект:
- Більше клацають, відповідно, вище трафік на сайт,
- Клікабельність сніпету відноситься до поведінкових факторів і чим вона вища, тим простіше ресурсу дертися в ТОП за потрібними запитами.
Єдиний момент, який був мені незрозумілий – це те, що ці посилання є саме хлібними крихтами, а не чимось іншим. Погодьтеся, сторінка з будь-якої статті блогу містить інші посилання на рубрику і на головну (верхнє меню, рубрики в сайдбарі, посилання на рубрику в блоці з метаданими статті).
Не людина, вона не може заглянути на сторінку і зрозуміти – це посилання з меню, це з тексту статті, а ця хлібна крихта.
Довелося гортати форуми та читати багато блогів. У більшості випадків пишуть тільки про те, що крихти потрібні і вони покращують юзабіліті та сніппет, а далі розписують інструкцію з налаштування плагіна Breadcrumb NavXT (Breadcrumb – це з англійської крихти) або наводять код реалізації без плагіна – і все. У мене склалося враження, що більшість вебмайстрів уявлення не мають про те, як правильно працювати з цим елементом і сприймають його лише як елемент внутрішньої перелінкування сторінок.
У видачі Google видно, що не більше 10% сайтів має у своєму арсеналі правильні хлібні крихти, решта працюють по-старому, висвічуючи в сніпеті URL сторінки.
Мікророзмітка хлібних крихтЯ не полінувався, заліз у пошук, проаналізував, як на різних сайтах зроблено Breadcrumb і як ці сайти виглядають у пошуку. Моя теорія виявилася вірною:
- Є крихти на сайті - немає мікророзмітки - звичайний сніпет з URL.
- Є крихти – є мікророзмітка – покращений сніпет.
Я розкопав все, що потрібно і сьогодні вам розповім про хлібні крихти від А до Я. Поставити їх технічно на сайт - це навіть не пів справи - це 10%. Головна фішка, яка принесе реальну користь – мікророзмітка.
Головна користь не в хлібних крихтах, а в їхній правильній мікророзмітці для сніпету.
Я з мікророзміткою, як із поняттям, познайомився лише кілька місяців тому. Мало чого зрозумів тоді, але спробував налаштувати основні елементи для статей та коментарів. Деякі блогери писали, що це чи не чарівна кнопка, що штовхає сайти в ТОП (в основному учні школи блогерів Олександра Борисова) – не знаю з чого вони так вирішили. Мені це сумнівним здалося відразу, тепер можу сказати точно – за 2 місяці наявності мікророзмітки на моєму сайті ніяких відчутних рухів у видачі за запитами, що просуваються, я не помітив.
У випадку з розміткою хлібних крихт ситуація має бути іншою, ми не чекатимемо якихось рухів в органічній видачі, а розраховуватимемо на те, що я говорив вище – на покращення клікабельності сніппетів та відповідні цьому плюшки (зростання за рахунок поведінкових факторів).
Хлібні крихти на WordPress без плагінаОсь ми і перейшли від розмов «чому й навіщо» до розмов «як зробити». Плагін Breadcrumb NavXT я відразу відкинув, так що потім "вимагає доопрацювання напилком" сенсу не бачу, а мікророзмітку він сам робити не вміє. Є ще варіант – SEO плагін WordPress SEO by Yoast, він теж вміє робити хлібні крихти, але я й міняти його бажання не маю. Залишився один варіант – використовувати скрипт чи функцію.
Якщо ви вирішили встановити хлібні крихти на WordPress, то робіть без плагінів - менше навантажуватиметься сайт і більше можливостей адаптації коду.
Крок 1. Функція wp_zhilin_krohiТак як я тільки почав осягати основи PHP, мені стало цікаво самому зробити функцію, яка виводила б на моєму блозі хлібні крихти. Інтуїтивно я бачив, що проблем бути не повинно, тому що всі елементи крихт вже виводяться в шаблоні, треба тільки взяти їх і скомпонувати потрібні посилання, як належить.
Забігаючи наперед скажу, що мені вдалося зробити саму компактну (читай легку і швидку) функцію з усіх, що мені довелося знайти на інших сайтах.
Перша версія коду вийшла швидко, тільки я не врахував одного моменту – код повинен не тільки виводити посилання на сайт, але ще й містити мікророзмітку, а з нею виявилася засідка – мій код повторив помилки багатьох вебмайстрів – за рахунок стандартної реалізації виводу, розкласти посилання на елементи застосування розмітки не виходило.
Довелося починати заново, покладаючись на більш прості php функції вордпресса (зате дізнався дещо нове). У результаті вийшла функція wp_zhilin_krohi (вперше своїм ім'ям назвав функцію – приємно), яка виводить хлібні крихти на сторінках зі статтями та на сторінках категорій. Автоматом враховуються всі батьківські рубрики (хоч би скільки їх було) і кожен елемент обернуть у мікророзмітку.
Для статей крихти мають вигляд:
Головна > Батьківська рубрика (якщо є) > Рубрика > Стаття
Головна > Батьківська рубрика (якщо є) > Рубрика >
У мене є побоювання щодо того, що назва статті в хлібних крихтах призводитиме до переспаму сторінки ключовими словами. Я зробив з цього приводу запит на техпідтримку Яндекса, у відповідь вони написали, що якщо це не спрямовано на обман пошукових систем, то санкцій бути не повинно, але вони враховуються. Ось відповідь:
Так що, якщо думаєте, що зайве повторення заголовка статті заважатиме вам – видаліть із 17 по 20 рядки.
Ось сама функція, її потрібно додати у файл functions.php вашої теми перед закриваючим?> (робиться прямо через адмінку, навіть FTP клієнт не знадобиться):
/*** Крихти з мікророзміткою ***/ function wp_zhilin_krohi() ( if (!is_home()) ( echo " Головна » "; ) if (is_category() || is_single()) ( $cats = get_the_category(); foreach ($cats as $cat) ( echo " term_id)."" >" .$cat->name." » "; ) ) if(is_single()) ( the_title(); ) );
Мікророзмітка відразу зашита в код функції та автоматично виводиться разом із кожним посиланням.
Крок 2. Виведення функції на сторінкахДля того, щоб на сторінках з'явився створений нами ланцюжок посилань, потрібно відкрити файл вашої WordPress теми, який відповідає за відповідний тип сторінок, і вставити в нього код, що викликає функцію:
Як мінімум, потрібен файл single.php (виводить пости) – майже завжди називається однаково, а далі залежить від шаблону, десь сторінки категорій виводяться через archive.php, десь через index.php – знайдете у себе потрібний.
У цьому файлі необхідно знайти місце, де ви хотіли б бачити крихти. Зазвичай їх ставлять у верхній частині сайту (перед назвою посту) як елемент навігації. Ось такий шматочок коду шукайте – php the_title, і перед ним вставляйте висновок функції (там уже по дизайну дивіться, куди підходить).
Не завжди Breadcrumb ставлять угорі сторінки, бувають і винятки. Допустимо, вам вони потрібні тільки для виведення сніпету, тоді можна їх і в підвалі розмістити - мікророзмітку пошуковики там побачать. Такий варіант реалізований на блозі Сергія Сосновського – у нього окремий блок вгорі для користувачів, але він без мікророзмітки, а хлібні крихти з мікророзміткою виведені у футері (я, правда, не дуже зрозумів навіщо):
Зовнішній вигляд будь-якого елемента сторінки повинен гармоніювати з дизайном вашого сайту, тому якогось єдиного рішення для кожного блогу не існує.
На своїх ресурсах я налаштував однаково – зменшив шрифт хлібних крихт у порівнянні з основним контентом. Для цього навіть не створював окремих стилів у файлі style.css, а уклав функцію в контейнер div і в ньому прописав один єдиний параметр - розмір шрифту (ви могли звернути увагу на скрині вище):
Всі інші характеристики хлібні крихти успадковують із стилів теми. Для внесення невеликих додатків (шрифт поміняти, колір тексту і т.д.), у цьому контейнері вкажіть потрібні властивості.
Якщо ж ви захочете кардинально змінити дизайн ланцюжка посилань (якісь картинки або кнопки зробити), то привласніть їм спеціальний клас, наприклад, так – , далі для цього класу створіть у style.css окремий блок і вкажіть всі необхідні параметри.
Тут вам знадобляться знання в каскадних таблицях стилів CSS і дизайнерське чуття (якщо робитимете оформлення самі).
Перевірка мікророзмітки хлібних крихтПісля того, як ви все зробите – обов'язково перевірте правильну роботу мікророзмітки у спеціальних валідаторах Яндекса та Google, чи мало, спливуть якісь косяки:
webmaster.yandex.ru/microtest.xml developers.google.com/structured-data/testing-tool/ (45 голосів, в середньому: 4.7 із 5)Всім привіт, сьогодні ми визначимо мінімальний набір та приклади впровадження мікророзмітки хлібних крихт, статей та товарів для комерційних та інформаційних сайтів. Сама технологія вже не нова, але різноманітність її атрибутів може ввести в ступор, а тому в цій статті я постараюся виділити кілька типових і перевірених рішень, які можна сміливо впроваджувати.
Всю тему мікроформатів в одній статті не охопити, а тому, в міру її розгляду в інших матеріалах, я посилатимуся на них. Крім того, завжди можна і самостійно покопатися в конструктори мікророзмітки Google.
Мікророзмітка хлібних крихтНу, це класика жанру, яка обов'язково має бути присутня на кожному сайті. Наприклад, для сторінки вона має такий вигляд:
//1 рівень: головна сторінка
SEO блог Пінго
//2 рівень: категорія
Новачкам
//3 рівень: кінцевий матеріал
Типи пошукових запитів
Отже, що ми тут бачимо? По-перше, кожен рівень хлібних крихт є відокремленим елементом, рівнем, а тут грає лише їх порядок. По-друге, кожен елемент (за винятком останнього) має потрійну вкладеність:
В останнього елемента також може бути атрибут url, але на мій погляд він не потрібен - навіщо сторінці вказувати на саму себе в ланцюжку навігації?
Атрибути можуть використовуватися у зв'язці з будь-якими тегами – важливий лише порядок та рівень вкладеності. Наприклад:
Новачкам
Впровадження на сайт мікророзмітних хлібних крихт допомагає пошуковим системам у виведенні «читальних» навігаційних ланцюжків у сніпеті (що непогано), а також просто краще зрозуміти структуру сайту.
Мікророзмітка статтіДаний тип мікророзмітки призначений для статей та будь-яких інших інформаційних матеріалів, як на комерційних, так і на звичайних сайтах. Наприклад, для сторінки, яку ви читаєте, справедлива така структура:
//Оголошуємо назву елемента
//Визначення атрибуту "Дата публікації"
Конкурентність пошукових запитів
//Визначення атрибуту "Ім'я публікації"
Зміст статті. //Визначення атрибуту «Вміст статті»
Середня арифметична оцінка
Максимальне значення оцінки
Мінімальне значення оцінки
Кількість оцінок
Тут все те саме, що і для хлібних крихт, крім наступного:
- Атрибут «Дата публікації» має бути зазначений у форматі ISO-8601 виду YYYY-MM-DDTHH:MM, де T – просто символ, YYYY – рік, MM – місяць, DD – дата, HH – година, а MM – хвилина.
- При визначенні атрибуту «Категорія публікації» та «Ім'я публікації» зовсім не страшно, що в область значення потрапляє також і посилання – робот витягне лише дані, що очікують для атрибута значення.
Впровадження мікророзмітки статей допомагає пошуковій роботі краще зрозуміти і класифікувати вміст інформаційного матеріалу. Крім того, якщо інформація унікальна, то вона буде згодом може бути додана до бази даних Google.
Мікророзмітка товару (продукту чи послуги)Даний тип мікроформату незамінний для сторінок з описом товарів та послуг:
//Оголошуємо елемент
Рожевий слон // Визначаємо найменування товару чи послуги
Гарний слон. //Визначаємо опис товару чи послуги
//Оголошуємо підтип «Пропозиція»
//Визначаємо вартість товару чи послуги
//Вказуємо валюту ціни товару чи послуги
Середня арифметична оцінка
Максимальне значення оцінки
Мінімальне значення оцінки
Кількість оцінок
Те саме - пошуковий робот відразу бачить, що і де розташовується на сторінці і для чого вона взагалі потрібна. Візуальним результатом може стати зростання привабливості сніпету в SERP.
Breadcrumbs (хлібні крихти або навігаційний ланцюжок) - елемент інтерфейсу сайту, основне призначення якого - шлях від головної сторінки, туди, де знаходиться на даний момент користувач. Зрозуміло, робиться це насамперед для зручності перебування користувача на сайті, полегшуючи цим розуміння віртуальної структури. Турбота про комфорт користувачів одна з потаємних місій, заповнюючи сотні умів-юзабілістів: усі хочуть зробити інтерфейс зручнішим, і пошукові системи не стали винятком. Поговоримо про мікророзмітку навігаційного ланцюжка для візуалізації посилання в пошуковій видачі Google.
Для наочності наведемо візуальні приклади видачі пошукових результатів без мікророзмітки, і з нею:
1. У першому записі посилання під назвою відображається звичайним чином, і, як правило, не зовсім читальна для ока рядового користувача.
2. У другому записі все інакше, там не видно посилання, але є ті хлібні крихти, які відображають логічну структуру розташування знайденого елемента. Другий варіант виглядає конструктивніше, давайте подивимося, як цю справу запиляти у себе на сайті.
Досягається це диво за допомогою використання мікро-даних у навігаційному ланцюжку. Давайте уявимо, у нас є така структура на сайті:
Головна – Операційні системи – FreeBSD
Кожен пункт має свій шлях, і в навігаційному ланцюжку є як посилання. Також посилання полягає в будь-який тег, наприклад - div, тегу задається атрибути:
Itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
Вийде блок для пункту:
...
Цей блок містить посилання та назву елемента. Для посилання задається атрибут itemprop="url", назва так само полягає в окремий тег span, і задається атрибут itemprop="title". У результаті окремий елемент у ланцюжку буде випрасувати таким чином:
