Підтримайте Виведення вашого веб-сайту в топ результати Google — одне з найскладніших завдань, з яким боряться багато сайтів, особливо в сфері електронної комерції. Більше того, SEO — це складне поняття, яке постійно змінюється та розвивається. Тож може бути важко встигати за всіма оновленнями та алгоритмами.
Однак є кілька важливих факторів, на які ви, як власник магазину, повинні звертати увагу: швидкість веб-сайту, оптимізація зображень, контент. Цей список можна продовжувати далі.
Поняття, з яким ми хочемо ознайомити вас сьогодні — це hreflang теги, hreflang атрибути або альтернативні hreflang теги. Ви дізнаєтесь, що таке hreflang теги, навіщо вони вам потрібні, як вони впливають на ваш веб-сайт і, головне, як додати їх у Magento 2, щоб ваші сторінки потрапляли в топ Google.
Давайте почнемо.
Зміст [приховати]
Що таке hreflang теги?
Hreflang теги, які також називають rel = "alternate" hreflang = "x",— це фрагменти HTML-коду, додані на сторінки вашого веб-сайту, щоб Google та інші пошукові системи знали, що у вас є різні варіанти однієї сторінки.
Альтернативні hreflang атрибути використовуються, якщо у вас є декілька представлень магазину на вашому веб-сайті, і ви надаєте контент різними мовами. Крім того, якщо у вас є контент однією мовою для різних регіонів, напр. англійська в США, англійська в Великій Британії та англійська в Австралії.
Заплутались?
Так само як і Google, коли бачить, що у вас багато дубльованого контенту (duplicate content). Отже, якщо ви не використовуєте hreflang теги для поєднання сторінок, пошукові системи намагаються вибрати, яку ж сторінку виводити у результатах пошуку. Врешті-решт вони виводять лише одну сторінку, а інші залишають внизу.
Ось чому вам потрібно використовувати hreflang теги, щоб усі сторінки мали однаковий рейтинг.
Однак це не так просто.
Як виглядають hreflang теги?
Тепер, коли ви вже знаєте, що таке hreflang тег, давайте детальніше розглянемо цей елемент атрибуту посилання (link attribute element). Отже, альтернативне посилання виглядає наступним чином:
<link rel="alternate" hreflang="x" href="https://www.mywebsite.com">
Як бачите, тут є три HTML атрибути:
- link rel="alternate" - говорить пошуковим системам, що ця сторінка має альтернативні сторінки
- hreflang="x" - вказує на мову(и) альтернативних сторінок (інколи також і регіон)
- href="https://www.mywebsite.com" - визначає посилання на альтернативну сторінку
Однак існують також різні значення hreflang, які ви повинні використовувати, залежно від мови та регіону, на який сторінки націлені.
Код мови
Якщо ви не хочете націлювати сторінку на якусь конкретну країну, альтернативні теги для ваших сторінок повинні виглядати так:
У цьому прикладі ми задали hreflang теги для сторінок веб-сайтів англійською, українською, французькою та іспанською мовами.
Досить легко, чи не так?
Це у випадку, якщо ви не вказали країну, на яку хочете націлитись. Однак, коли ви продаєте по всьому світу, ви повинні створити більш персоналізований досвід.
Код мови та країни
Деякі країни використовують лише одну мову, а деякі — кілька мов. У цьому випадку вам потрібно додати код країни до hreflang тегів, щоб вони працювали краще.
Ми розглянемо два різні приклади того, як застосовуються коди країн.
Приклад #1 Базуючись на місці розташування
Скажімо, у вашому магазині ви хочете орієнтуватись лише на англомовних людей, які живуть у Великобританії, США та Австралії. Товар буде однаковим, але ціни та контент можуть бути різними.
Усі сторінки будуть англійською мовою, тому вам доведеться уникати проблем з дублюваним контентом, застосовуючи альтернативні hreflang теги. Вони будуть виглядати так:
Приклад #2 Базуючись на мові
У цьому випадку ваш магазин працює в межах однієї країни, але все одно націлений на різні мови. Наприклад, ви продаєте в Канаді, але хочете надавати контент для англомовних, французькомовних та іспаномовних людей.
У цьому випадку зверніть увагу на модель мови та країни:
Важливо зазначити, що мовний код завжди стоїть на першому місці, а за ним код країни.
Крім того, кожна альтернативна сторінка повинна містити однаковий набір альтернативних тегів.
напр. якщо у вас є 3 альтернативні варіанти домашньої сторінки англійською, іспанською та французькою мовами, усі 3 повинні містити однакові 3 альтернативні теги.
Майте це на увазі, якщо хочете уникнути hreflang тегів із помилками на вашому веб-сайті.
X‑default Hreflang
Іноді, коли Google аналізує ваш веб-сайт, він не знаходить відповідної сторінки для виведення в SERP. Тим не менше, він повинен щось вивести. У цьому випадку він покладається на атрибут x-default.
Отже, теги x-default використовуються, щоб задати сторінку, на яку повинні повернутися пошукові системи, якщо вони не знайдуть іншої сторінки (за кодом країни чи мови). Як правило, вони не є обов’язковими для використання, проте Google рекомендує додавати їх.
Чому - ви дізнаєтесь далі в цій статті.
Сторінка hreflang = "x-default" може бути однією з альтернативних сторінок, які вважаються сторінками за замовчуванням, як тут:
І ось як це виглядає в коді:
Як працюють hreflang теги?
Google аналізує багато речей, перш ніж відображати сторінку вашого веб-сайту в результаті на запити користувачів. Коли на вашому веб-сайті немає hreflang тегів, як ми вже говорили раніше, Google сам визначає яку сторінку показувати.
Не дуже надійно, чи не так?
Однак, коли ви додаєте hreflang теги на сторінки своїх магазинів Magento, Google шукає найбільш підходящий варіант, аналізуючи сигнали країни та мови.
Наприклад, у Швейцарії є франкомовний користувач, який шукає якісь товари в Інтернеті. Отже, ось кроки, які зробить Google:
Крок 1: проаналізує співпадіння мови та країни (fr-ca)
Крок 2: проаналізує чи відповідає мова запиту (fr-be)
Крок 3: перейде до сторінки "x ‑ default", якщо він не може знайти жодного збігу
Чи потрібні вам hreflang теги у Magento 2?
В електронній комерції та Magento зокрема існують різні сценарії, коли вам потрібно використовувати hreflang теги, якщо ви продаєте по усьому світу. Іноді вам хочеться всіма способами покращити рейтинг свого веб-сайту та знайти найкращі методи досягнути цього.
Ми це вже частково розглянули, але перелічимо ще раз найпоширеніші випадки, коли вам потрібно ними скористатися:
- У вас є магазин для однієї країни з місцевими мовами
напр. веб-сайт у США з представленнями магазину англійською та іспанською мовами, або веб-сайт у Канаді з представленнями магазину англійською та французькою мовами
- Якщо ви продаєте по всьому світу і маєте один веб-сайт із декількома представленнями магазину для різних країн
напр. магазин з іспанським, німецьким, французьким, українським, італійським представленнями магазину та англійським за замовчуванням
- Якщо у вас є магазин однією мовою, яка має різні варіанти
напр. англомовний веб-сайт для США, Великобританії та Австралії або німецькомовний магазин для Німеччини, Австрії та Швейцарії
У всіх 3 випадках посилання hreflang будуть різними, залежно від архітектури вашого веб-сайту. Однак вам доведеться задати hreflang теги у будь-якому з них, щоб ваші багатомовні сторінки були видимими для пошукових систем.
Причини використовувати hreflang теги у Magento 2
Якщо ви раніше не були впевнені, що вам потрібно використовувати hreflang теги, ви будете у цьому переконані, коли почуєте про переваги. Є кілька найважливіших переваг, які можуть значно покращити ваш магазин Magento 2.
1. SEO перевага hreflang тегів
Як ми вже згадували, щоб набрати рейтинг у Google, потрібно докласти багато зусиль та оптимізувати багато речей. Hreflang теги безпосередньо пов’язані з SEO, оскільки вони допомагають додати сторінки вашого багатомовного веб-сайту у рейтинг.
Якщо у вас є альтернативні сторінки на 3 різних мовах на вашому веб-сайті, але ви не використовуєте альтернативні hreflang теги, пошукові системи нададуть пріоритет лише одній сторінці та розмістять її у SEPR — сторінці результатів пошуку. Вони не будуть приділяти особливої уваги іншим двом.
Тож не дивуйтеся, якщо інші дві сторінкам не отримуватимусь той трафік, який ви очікували.
З атрибутами hreflang, навпаки, ви зможете додати всі 3 сторінки у результати пошуку. Однак зауважте, що теги hreflang — це лише сигнал, а не директива.
Якщо ви не бачите своїх сторінок на першій сторінці Google SERP після впровадження hreflang тегів, можливо, є щось інше, на що потрібно звернути увагу.
2. Покращений досвід користувачів
Ми отримуємо тисячі результатів на ваші запити у Google. Уявіть, що ви шукаєте щось і отримуєте багато результатів англійською мовою, хоча вашою рідною мовою є німецька.
Ви натискаєте на результат англійською мовою, оскільки у вас практично немає вибору. Потрапивши на сторінку, ви бачите, що можете перейти на німецьку, оскільки там є німецьке представлення магазину, але не дуже радієте цьому.
Чому?
Оскільки вашим клієнтам доводиться зробити багато зайвих дій, щоб отримати інформацію, яка їх цікавить. Чи не було б краще, якби ця сторінка на німецькій мові відображалася одразу в результатах Google?
Це саме те, що забезпечують hreflang теги. Вони дозволяють вам надавати персоналізовані та локалізовані результати для своїх клієнтів тим самим покращуючи їх досвід.
3. Зменшення показника відмов та покращення конверсій
Чим кращий ваш рейтинг у Google, тим більше людей приходить на ваш веб-сайт. І якщо ви швидко надаєте їм інформацію їхньою місцевою мовою, ви побачите покращення.
Менше людей покидатимуть ваш веб-сайт, навіть не переглянувши сторінки. Вони довше залишатимуться на сайті і витрачатимуть більше часу на вивчення ваших товарів.
4. Покращений перемикач магазину
Якщо у вас є багатомовний веб-сайт Magento 2 і ви продаєте по всьому світу, ви можете зіткнутися з проблемами переключення магазинів. Навіть якщо ви налаштовуєте коди магазинів і створите представлення магазину для різних мов, ваші клієнти можуть мати проблеми з їх перемиканням.
напр. користувачі потрапляють на англійське представлення магазину за замовчуванням, але їх рідною мовою є німецька, і вони хочуть перейти на німецьке представлення магазину. Однак, коли вони використовують перемикач магазину, система перенаправляє їх на домашню сторінку або на 404 сторінки.
Це трапляється через відсутність hreflang тегів, які б вказували, що англійська сторінка має німецьку альтернативу.
Як додати hreflang теги у Magento 2?
Ми обговорили всі переваги та випадки, коли вам потрібно використовувати hreflang теги, і тепер настав час навчитися додавати їх на свій веб-сайт Magento. Є кілька можливих способів це зробити. Однак вони залежать від кількості зусиль та навичок, які ви хочете цьому присвятити.
Додавайте hreflang теги вручну
Згідно з підтримкою Google, ви можете додавати hreflang атрибути трьома різними способами. Уявімо, що у вас є англомовний веб-сайт для трьох країн та розглянемо, як працюють hreflang теги у кожному випадку.
HTML теги
Цей метод є одним з найпростіших способів додавання hreflang тегів. Вам потрібно розмістити їх у тезі <head> сторінки вашого веб-сайту. Однак потрібно пам’ятати, що теги <head> та <header> не однакові. Вміст усередині <head> не видно на сторінці, на відміну від <header>.
Отже, в основному hreflang атрибути повинні виглядати так у тегу <head>:
Примітка: хоч це і простий, але це найбільш трудомісткий спосіб, оскільки всі альтернативні сторінки повинні мати однаковий набір hreflang тегів. І уявіть, якщо у вас на вашому веб-сайті Magento вже є 2 сторінки представлень магазину, пов’язані посиланнями hreflang, і ви вирішите додати ще 2.
Вам потрібно буде перейти на кожну зі сторінок, на яких уже є альтернативні теги, щоб додати ще 2.
Шалено довгий процес, чи не так?
HTTP Headers
Цей метод не є загальним, оскільки він використовується лише на випадок, якщо на вашому веб-сайті є контент, який не є HTML. Це можуть бути файли PDF для різних мов, на які ви хочете націлитись. Ось приклад того, як це повинно виглядати:
Sitemap
Нарешті, ви можете додати hreflang теги у sitemap.xml. свого веб-сайту. Він включає створення окремих <url> елементів для кожної з ваших альтернативних сторінок та інші важливі кроки. Якщо ви не є технічно-обізнаною людиною, додавання hreflang тегів таким способом може виявитись доволі складною задачею для вас.
Прикладом альтернативних тегів у мапі сайту є:
Проте, ми рекомендуємо слідувати детальним інструкціям від Google, щоб правильно їх задати.
Розширення Hreflang Tags для Magento 2
Теги hreflang може бути важко задати, особливо якщо у вас немає технічного досвіду або ви просто не хочете витрачати на це купу часу. Однак якщо вам цікаво, чи є простіший спосіб задати їх, ми маємо для вас рішення.
Хоча за замовчуванням Magento не дозволяє додавати hreflang теги з адмін панелі, розширення Magento Hreflang Tags робить це. Все, що вам потрібно зробити, це задати альтернативні сторінки в адмін панелі, і розширення генерує альтернативні hreflang посилання у коді.
Візьмемо для прикладу домашню сторінку Magento 2 і спробуємо задати для неї hreflang теги.
Розширення Magento Hreflang Tags додає розділ Alternative Store View Localizations на кожну сторінку, в якому ви можете знайти доступні мови в списку. Отже, коли ми перебуваємо на англійській версії домашньої сторінки, ми просто починаємо вводити назву сторінки альтернативною мовою (в даному випадку українською).
Обидві версії сторінки повинні мати однакові hreflang теги. Однак вам не потрібно переходити на українську версію домашньої сторінки, щоб також задати там hreflang атрибути. Розширення робить це автоматично.
На українській версії сторінки ми бачимо, що hreflang теги вже задані для англійської версії.
Отже, процес в 2 рази простіший.
І ось що ми отримуємо в результаті:
Більше того, розширення працює для всього веб-сайту: CMS-сторінок, публікацій та категорій блогу, а також для домашньої сторінки, яку ми щойно описали.
А як щодо сторінок товарів і категорій? - ви запитаєте.
Розширення автоматично генерує для них hreflang теги, якщо сторінки продуктів для декількох представлень магазину мають однаковий ідентифікатор (ID). Якщо ні, ви можете задати альтернативний продукт або сторінку категорії так само, як інші.
Ви можете додати hreflang теги на сторінки свого веб-сайту Magento 2 без особливих зусиль, лише у кілька кліків. І це не вимагає ніяких технічних знань, оскільки вам не потрібно працювати з кодом сторінки.
Крім того, він пропонує вам цілий ряд інших корисних функцій.
Якщо у вас є кілька представлень магазину на одній мові, ви можете просто ввімкнути параметр Locale Depends on Region. І якщо ви не можете знайти мову, яку ви хочете використовувати у налаштуваннях Magento за замовчуванням, ви можете задати свій кастомний код мови (Custom Locale Code).
Якщо у вас є кілька веб-сайтів Magento, кожен з яких має різні представлення магазину, ви можете просто обмежити теги hreflang одним веб-сайтом, задавши Locale Group. І розширення також бере до уваги x-default теги.
Розширення Magento 2 Hreflang Tags — це ідеальний варіант для менеджерів магазинів та адміністраторів, оскільки він дозволяє їм швидше та набагато простіше додавати hreflang теги. Перевірте це на нашому демо, щоб переконатися!
Hreflang теги. Так чи Ні?
Ого ... Це була ще та пригода. Тепер ви знаєте набагато більше про альтернативні теги загалом та Magento 2 зокрема. В електронній комерції вам доведеться звертати додаткову увагу на такі дрібниці, як альтернативні атрибути, особливо на багатомовних веб-сайтах.
Чому дрібниці?
Альтернативні hreflang теги не є обов’язковими. Google може аналізувати та виводити ваші сторінки в пошуку і без них. Однак краще, якщо ви чітко зазначите, які сторінки призначені для яких мов чи регіонів, щоб уникнути помилок з hreflang тегами.
Це не тільки забезпечує кращу взаємодію з користувачем, але й покращує SEO, збільшує кількість конверсій і зменшує показники відмов. В той час коли існує безліч магазинів з однаковими товарами, ви будете вирізнятись тим, що надаватиме більш персоналізований досвід.
Отже, hreflang теги. Так чи ні?