Хочете дізнатися, як жителям різних регіонів знаходити в пошуку версії сторінок сайту, що призначені спеціально для них?
Бізнес Майстерня розповість про важливі для розмітки сайту теги - alternate, hreflang, media, - та як їх грамотно використовувати під час просування вашого сайту.
Навіщо взагалі потрібні ці теги
Щоб допомогти пошуковим роботам зрозуміти, на які мови переведені сторінки сайту, для яких регіонів призначені його розділи, у скількох сторінок вашого сайту є мобільна версія.
Всі теги впроваджуються в код сайту, в контейнер < head> < / head>. Правда, є нюанси. Про них трохи згодом.
Навіщо потрібен тег alternate
Завдяки одиночному тегу < link rel = "alternate" />, пошукові роботи можуть визначити мовні варіанти і мобільну версію однієї і тієї ж сторінки сайту - і показати потрібному користувачеві потрібний альтернативний варіант поточної сторінки.
приклади:
- визначення мовної версії сайту: < link rel = "alternate" hreflang = "kz" href = "http://kz.example.com/" />
- визначення мобільної версії сайту: < link rel = "alternate" media = "only screen and (max-width: 640px)" href = "http://m.example.com/">
Як використовувати атрибут type
Тег rel = "alternate" в комбінації з атрибутом type і значенням, відмінним від "text/html", вказує пошуковим роботам на альтернативну версію сторінки в іншому форматі. Найбільш поширені значення:
- application/rss + xml - для RSS формату
- application/atom + xml - для формату Atom
- application/activitystream + json - для Activity Streams JSON формату
наприклад:
<link rel="alternate" type="application/rss+xml" href=".rss" title="RSS feed for this page"/> <link rel="alternate" type="application/atom+xml" href=".atom" title="Atom feed for this page"/> <link rel="alternate" type="application/activitystream+json" href=".as" title="Activity Streams JSON feed for this page"/>
Навіщо потрібен тег hreflang
Тег вказує пошуковикам на присутність на сайті двох ідентичних сторінок, але різними мовами або для різних регіонів. Hreflang запобігає склейці сторінок в процесі індексування і найчастіше використовується, коли:
- Контент на регіональних сайтах/каталогах/піддоменів частково або повністю ідентичний. Наприклад, сайти орієнтуються на різні регіони, але мова у них одна (Великобританія, США, Австралія).
- Фахівці перевели тільки шаблон сайту, при цьому контент в основному генерується користувачами. Варто уникати появи контенту на кількох мовах на одному і тому ж URL.
- Контент на різних мовних версіях сайту повністю переведений на іншу мову, наприклад, присутні варіанти сторінки, як англійською, так і іспанською.
- Веб-сайт перекладений частково і показувати його потрібно тільки для користувачів, які розмовляють певною мовою і/або з певного регіону.
Однак тег hreflang не дає 100% гарантію, що пошукові сайти не порахують сторінки з контентом на одній мові дублями. Тому наполегливо рекомендуємо наповнювати сторінки унікальним контентом, якщо ви розбиваєте сторінки на одній мові для різних регіонів.
У тегу можна одночасно вказувати мовну та регіональну версії сайту. Для цього необхідно використовувати такий формат:
<link rel=”alternate” hreflang="xx-YY" href="URL" />
- xx - мова (обов'язково) згідно ISO 639-1
- YY - регіон (не обов'язково) згідно ISO 3166-1 Alpha 2
- URL - абсолютний URL альтернативної сторінки
Як правильно впровадити тег hreflang
1. Важливо пам'ятати про необхідність перелінковки сторінок, яку можна аналізувати за цим гайдом. Якщо для англійської версії вказана альтернативна - українська, то і на українській версії має бути присутня вказівка англійської версії, інакше розмітка не буде дійсною. Посилання на версію кожної сторінки також потрібно вказувати.
Наприклад, для сторінки http://domain.com/page1:
<link rel="alternate" hreflang="en-GB" href="http://domain.co.uk/page1" /> <link rel="alternate" hreflang="es" href="http://domain.es/page1" /> <link rel="alternate" hreflang="x-default" href="http://domain.net/page1" /> <link rel="alternate" hreflang="en" href="http://domain.com/page1" />
2. Перелінковка повинна вказувати на аналогічну сторінку альтернативної версії сайту. Часто вказують головну в якості альтернативи внутрішньої сторінки, наприклад, статті, каталогу, картки товару. Це помилка.
3. Регістр символів, під час вказівки регіону, не важливий (принаймні для Google), але краще слідувати стандартам: вказувати мову в нижньому регістрі, а регіон - у верхньому.
4. Атрибути HTML hreflang можуть бути використані в будь-якій структурі сайту (різні домени, піддомени або директорії).
5. Hreflang повинен бути використаний незалежно від налаштувань в Google Search Console.
Існує три способи впровадження тега hreflang: за допомогою HTML-тегів, ХML-карти і HTTP-заголовків.
Припустимо, у нас є сайти:
- http://domain.com/ - для англомовних користувачів в будь-яких регіонах
- http://domain.co.uk/ - для англомовних користувачів з Британії
- http://domain.es/ - для іспаномовних користувачів
- http://domain.net/ - для всіх інших користувачів
Впроваджуємо hreflang за допомогою HTML-тегів
На сторінках, що мають альтернативну версію на іншій мові і/або для іншого регіону, необхідно розмістити посилання на альтернативні версії.
Для головних сторінок сайтів необхідно розмістити коди в контейнері < head> < / head >.
Для http://domain.com/:
<link rel="alternate" hreflang="en-GB" href="http://domain.co.uk/" /> <link rel="alternate" hreflang="es" href="http://domain.es/" /> <link rel="alternate" hreflang="x-default" href="http://domain.net/" /> <link rel="alternate" hreflang="en" href="http://domain.com/" />
Для http://domain.co.uk/:
<link rel="alternate" hreflang="en" href="http://domain.com/" /> <link rel="alternate" hreflang="es" href="http://domain.es/" /> <link rel="alternate" hreflang="x-default" href="http://domain.net/" /> <link rel="alternate" hreflang="en-GB" href="http://domain.co.uk/" />
Для http://domain.es/:
<link rel="alternate" hreflang="en" href="http://domain.com/" /> <link rel="alternate" hreflang="en-GB" href="http://domain.co.uk/" /> <link rel="alternate" hreflang="x-default" href="http://domain.net/" /> <link rel="alternate" hreflang="es" href="http://domain.es/" />
Для http://domain.net/:
<link rel="alternate" hreflang="en" href="http://domain.com/" /> <link rel="alternate" hreflang="en-GB" href="http://domain.co.uk/" /> <link rel="alternate" hreflang="es" href="http://domain.es/" /> <link rel="alternate" hreflang="x-default" href="http://domain.net/" />
Порядок розміщення тегів всередині контейнера не важливий.
Впроваджуємо hreflang за допомогою XML-карти
Це пріоритетний спосіб, особливо за наявності великої кількості варіантів альтернативних сторінок.
В карту потрібно додати xhtml: link-element для кожної зі сторінок з альтернативним варіантом. Ці теги повинні вказувати на альтернативні адреси, включаючи поточний. Усередині елемента < url > слід вказати xhtml: link-element з посиланнями на альтернативні версії сторінок.
Для http://domain.com/:
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <url> <loc>http://domain.com/</loc> <xhtml:link rel="alternate" hreflang="en-GB" href="http://domain.co.uk/" /> <xhtml:link rel="alternate" hreflang="es" href="http://domain.es/" /> <xhtml:link rel="alternate" hreflang="x-default" href="http://domain.net/" /> <xhtml:link rel="alternate" hreflang="en" href="http://domain.com/" /> </url> ... </urlset>
Для http://domain.co.uk/:
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <url> <loc>http://domain.co.uk/</loc> <xhtml:link rel="alternate" hreflang="en" href="http://domain.com/" /> <xhtml:link rel="alternate" hreflang="es" href="http://domain.es/" /> <xhtml:link rel="alternate" hreflang="x-default" href="http://domain.net/" /> <xhtml:link rel="alternate" hreflang="en-GB" href="http://domain.co.uk/" /> </url> ... </urlset>
Для http://domain.es/:
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <url> <loc>http://domain.es/</loc> <xhtml:link rel="alternate" hreflang="en" href="http://domain.com/" /> <xhtml:link rel="alternate" hreflang="en-GB" href="http://domain.co.uk/" /> <xhtml:link rel="alternate" hreflang="x-default" href="http://domain.net/" /> <xhtml:link rel="alternate" hreflang="es" href="http://domain.es/" /> </url> ... </urlset>
Для http://domain.net/:
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <url> <loc>http://domain.net/</loc> <xhtml:link rel="alternate" hreflang="en" href="http://domain.com/" /> <xhtml:link rel="alternate" hreflang="en-GB" href="http://domain.co.uk/" /> <xhtml:link rel="alternate" hreflang="es" href="http://domain.es/" /> <xhtml:link rel="alternate" hreflang="x-default" href="http://domain.net/" /> </url> ... </urlset>
Впроваджуємо hreflang за допомогою HTTP-заголовків
Цей спосіб можна використовувати для сторінок, які не є HTML-документами, а, наприклад, PDF-файлами:
Link: <http://domain.com/document.pdf/>; rel="alternate"; hreflang="en" Link: <http://domain.co.uk/document.pdf/>; rel="alternate"; hreflang="en-GB" Link: <http://domain.es/document.pdf/>; rel="alternate"; hreflang="es" Link: <http://domain.net/document.pdf/>; rel="alternate"; hreflang="x-default"
Як використовувати тег media
Під час оптимізації сторінок для мобільних телефонів і планшетів найчастіше використовується:
- створення адаптивної версії сайту
- динамічний показ
- створення мобільної версії сайту
Використовуючи перші два методи, URL залишається ідентичним для десктопної і мобільної версії сторінки. Використовуючи мобільної версії сайту створюються різні сторінки для різних версій екранів, що тягне за собою дублювання інформації за різними URL.
Щоб уникнути виключення таких сторінок-дублів з пошукової видачі, необхідно використовувати атрибут HTML media. Як і у випадку з hreflang, використання атрибута є рекомендацією пошукових сайтів і не дає гарантії присутності у видачі двох версій однієї і тієї ж сторінки.
Як правильно впровадити тег media
Припустимо, що десктопна версія сторінки сайту доступна за посиланням http://domain.com/page, а мобільна - http://m.domain.com/page.
В такому випадку на http://domain.com/page необхідно розмістити покажчик на мобільну версію сайту:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.domain.com/page">
На мобільній версії сторінки, тобто на http://m.domain.com/page, слід розмістити код:
<link rel="canonical" href="http://domain.com/page">
Висновки
Одиночний тег < link rel = "alternate" /> потрібен для визначення мовних варіантів і мобільної версії однієї і тієї ж сторінки сайту.
Використовуючи в комбінації з атрибутом type і значенням, відмінним від "text/html", rel = "alternate", вказує на альтернативну версію сторінки в іншому форматі.
Тег hreflang вказує на присутність двох ідентичних сторінок, але на різних мовах або для різних регіонів. Hreflang запобігає склейці сторінок між собою і найчастіше використовується в тілі сторінок. Існує три способи впровадження тега: за допомогою HTML-тегів, ХML-карти і HTTP-заголовків.
Щоб уникнути виключення сторінок дублів з пошукової видачі, необхідно впровадити тег media. Як і у випадку з hreflang, використання тега є рекомендацією пошукових систем і не дає 100% гарантії появи сторінок-дублів у видачі.
Обробка: Vinci