Теги alternate, hreflang, media, type — зачем и как их использовать
Хотите узнать, как жителям разных регионов находить в поиске версии страниц сайта, предназначенные специально для них?
В этом выпуске «азбуки SEO» я расскажу о важных для разметки сайта тегах — alternate, hreflang, media, — и как их грамотно использовать при продвижении. Кстати, остальные выпуски этой рубрики собраны здесь.
Зачем вообще нужны эти теги?
Чтобы помочь поисковым роботам понять, на какие языки переведены страницы сайта, для каких регионов предназначены его разделы, у каких страниц есть мобильная версия.
Все теги внедряются в код сайта, в контейнер . Правда, есть нюансы. О них чуть дальше.
Зачем нужен тег alternate?
Благодаря одиночному тегу поисковые роботы могут определить языковые варианты и мобильную версию одной и той же страницы сайта — и показать нужному пользователю нужный альтернативный вариант текущей страницы.
О том, как мы использовали атрибут alternate при продвижении проекта, читайте в кейсе .
Как использовать атрибут type?
Тег rel=»alternate» в комбинации с атрибутом type и значением, отличным от “text/html”, указывает поисковым роботам на альтернативную версию страницы в другом формате. Наиболее распространенные значения:
- application/rss+xml — для RSS формата;
- application/atom+xml — для формата Atom;
- application/activitystream+json — для Activity Streams JSON формата.
Зачем нужен тег hreflang?
Тег указывает поисковикам на присутствие на сайте двух идентичных страниц, но на разных языках или для разных регионов. Hreflang предотвращает склейку страниц в процессе индексирования и чаще всего используется, когда:
- Контент на региональных сайтах/каталогах/поддоменах частично или полностью идентичен. Например, сайты ориентируются на разные регионы, но язык у них один и тот же (Великобритания, США, Австралия).
- Специалисты перевели только шаблон сайта, при этом контент в основном генерируется пользователями. Стоит избегать появления контента на нескольких языках на одном и том же URL.
- Контент на различных языковых версиях сайта полностью переведен на другой язык, например, присутствуют варианты страницы, как на английском, так и на испанском.
- Сайт переведен частично и показывать его нужно только для пользователей, разговаривающих на определенном языке и/или из определенного региона.
Однако тег hreflang не дает 100% гарантию, что поисковые системы не посчитают страницы с контентом на одном языке дублями. Поэтому настоятельно рекомендую наполнять страницы уникальным контентом, если вы разбиваете страницы на одном языке для разных регионов.
В теге можно одновременно указывать языковую и региональную версии сайта. Для этого необходимо использовать такой формат:
- xx — язык (обязательно) согласно ISO 639-1;
- YY — регион (не обязательно) согласно ISO 3166-1 Alpha 2;
- URL — абсолютный URL альтернативной страницы.
Как правильно внедрить тег hreflang?
1. Важно помнить о необходимости перелинковки страниц. Если для русской версии указана альтернативная — украинская, то и на украинской версии должно присутствовать указание русской версии, иначе разметка не будет действительна. Ссылку на версию каждой страницы также нужно указывать.
Например, для страницы https://domain.com/page1:
2. Перелинковка должна указывать на аналогичную страницу альтернативной версии сайта. Часто указывают главную в качестве альтернативы внутренней страницы, например, статьи, каталога, карточки товара. Это ошибка.
3. Регистр символов при указании региона не важен (по крайней мере для Google), но лучше следовать стандартам: указывать язык в нижнем регистре, а регион — в верхнем.
4. Атрибуты hreflang могут быть использованы в любой структуре сайта (разные домены, поддомены или директории).
5. Hreflang должен быть использован независимо от настроек в Google Search Console.
Читайте также, как использовать тег hreflang для правильного переноса сайта на https .
Существует три способа внедрения тега hreflang: с помощью HTML-тегов, ХML-карты и HTTP-заголовков.
Допустим, у нас есть сайты:
- https://domain.com/ — для англоязычных пользователей в любых регионах.
- https://domain.co.uk/ — для англоязычных пользователей из Британии.
- https://domain.es/ — для испаноязычных пользователей.
- https://domain.net/ — для всех остальных пользователей.
Внедряем hreflang с помощью HTML-тегов
На страницах, имеющих альтернативную версию на другом языке и/или для другого региона, необходимо разместить ссылки на альтернативные версии.
Для главных страниц сайтов необходимо разместить коды в контейнере .
Порядок размещения тегов внутри контейнера не важен.
Внедряем hreflang с помощью XML-карты
Это приоритетный способ, особенно при наличии большого количества вариантов альтернативных страниц.
В карту нужно добавить xhtml:link-element для каждой из страниц с альтернативным вариантом. Эти теги должны указывать на альтернативные адреса, включая текущий. Внутри элемента следует указать xhtml:link-element c ссылками на альтернативные версии страниц.
https://domain.com/ .
https://domain.co.uk/ .
https://domain.es/ .
https://domain.net/ .
Внедряем hreflang с помощью HTTP-заголовков
Этот способ можно использовать для страниц, которые не являются HTML-документами, а, например, PDF-файлами:
Link: ; rel="alternate"; hreflang="en"Link: ; rel="alternate"; hreflang="en-GB"Link: ; rel="alternate"; hreflang="es"Link: ; rel="alternate"; hreflang="x-default"
Читайте также рекомендации Google по использованию атрибута hreflang.
Как использовать тег media?
При оптимизации страниц для мобильных телефонов и планшетов чаще всего используется:
- создание адаптивной версии сайта;
- динамический показ;
- создание мобильной версии сайта.
При использовании первых двух методов URL остается идентичным для десктопной и мобильной версии страницы. При использовании мобильной версии сайта создаются разные страницы для разных версий экранов, что влечет за собой дублирование информации по разным URL.
Чтобы избежать исключения таких страниц-дублей из поисковой выдачи необходимо использовать атрибут media. Как и в случае с hreflang, использование атрибута — рекомендация поисковых систем и не дает гарантии присутствия в выдаче двух версий одной и той же страницы.
Как правильно внедрить тег media?
Предположим, что десктопная версия страницы сайта доступна по ссылке https://domain.com/page, а мобильная — https://m.domain.com/page.
В таком случае на https://domain.com/page необходимо разместить указатель на мобильную версию сайта:
На мобильной версии страницы, то есть на https://m.domain.com/page, следует разместить код:
Читайте также дополнительные рекомендации Google (здесь еще) по внедрению атрибута media.
Выводы
- Одиночный тег нужен для определения языковых вариантов и мобильной версии одной и той же страницы сайта.
- При использовании в комбинации с атрибутом type и значением, отличным от “text/html”, rel=»alternate», указывает на альтернативную версию страницы в другом формате.
- Тег hreflang указывает на присутствие двух идентичных страниц, но на разных языках или для разных регионов. Hreflang предотвращает склейку страниц между собой и чаще всего используется в теле страниц. Существует три способа внедрения тега hreflang: с помощью HTML-тегов, ХML-карты и HTTP-заголовков.
- Чтобы избежать исключения страниц дублей из поисковой выдачи, необходимо внедрить тег media. Как и в случае с hreflang, использование тега — это рекомендация поисковых систем и не дает 100% гарантии появления страниц-дублей в выдаче.
В Netpeak с 2014 года.
Сертифицированный специалист Google Analytics, Google Adwords, Bing.
На данный момент является Middle SEO специалистом.
Основное направление работы — проекты для англоязычных рынков.
Узнайте больше
50
Як налаштувати атрибут alternate hreflang
Що таке атрибут alternate hreflang і для чого він потрібен?
Атрибут rel=”alternate” hreflang=”x” допомагає пошуковій системі зрозуміти геоприналежність сторінки, щоб надати користувачеві потрібну мовну версію в результатах пошуку. З його допомогою ми показуємо пошуковим роботам, що на сайті один і той же контент доступний на різних мовах. Завдяки rel=”alternate” hreflang=”x”, пошуковики можуть автоматично показувати коректну мовну версію, на основі географічних і мовних даних.
Припустимо, перебуваючи в Україні, ми вводимо в Google запит “Офіційний сайт Samsung”. Бачимо наступний результат:
За реалізацію необхідної мовної версії відповідає атрибут hreflang.
Також атрибут hreflang не допускає склеювання двох сторінок з однаковим контентом. Він вказує роботам пошукових систем на те, що сторінки створені під різні регіони. В іншому випадку пошукова система може вважати сторінки ідентичними та склеїть їх, через що вони не потраплять в індекс і не ранжуватимуться.
Джон Мюллер (провідний аналітик в Google) стверджує, що атрибут hreflang – один з найскладніших аспектів SEO. Але не варто переживати, атрибут hreflang не так уже й складний, і про шляхи його реалізації розповімо нижче.
Коли використовувати атрибут rel=”alternate” hreflang?
Атрибут rel=”alternate” hreflang слід використовувати в наступних випадках:
- На вашому сайті переведені тільки деякі елементи сайту, наприклад, тільки шаблон сторінки (панель навігації або футер сайту). Такий варіант часто використовується на форумах, де багато UGC – User – Created Content. У таких випадках необхідно уникати поява полімовного контенту на одній URL-адресі.
- Контент розміщений на одному і тому ж мовою, але різниться деякими нюансами для жителів різних регіонів. Наприклад, контент іспанською мовою буде трохи відрізнятися для жителів Іспанії, Мексики та Аргентини.
- Ваш сайт повністю переведено на іншу мову. Наприклад, кожна сторінка існує російською та англійською мовами.
Наведемо приклад:
Є кілька варіантів того, як можна вказати пошуковій системі на багатомовність і мультирегіональність сайту. Наприклад на нашому сайті є російськомовна сторінка https://new-site.com.ua/ та її en-версія – https://de.new-site.com/. Завдяки одному з таких засобів, ми можемо повідомити пошуковій системі, що під іншими URL-адресами знаходиться англомовний аналог російської версії сайту.
Приклад реалізації для сайту www.mother-surrogate.com
Також розглянемо варіант, що у нас є інтернет-магазин, регіонами роботи якого є як США, так і Великобританія. В такому випадку жителі США вважають за краще бачити ціни в інтернет-магазині в доларах, а жителі Англії – у фунтах.
Щоб надати користувачам релевантну відповідь, потрібно створити дві мовні версії однієї та тієї ж сторінки. Одна з яких буде показувати ціну в доларах, інша – у фунтах. Весь інший контент на сторінках буде ідентичний, але ми будемо використовувати атрибут rel=”alternate” hreflang , щоб пояснити пошуковим системам, що це альтернативні версії.
Для глибшого розуміння варто також ознайомитися з порадами Google з використання hreflang.
⭐ Атрибути hreflang та rel=”alternate” | Атрибут hreflang та його призначення |
⚡ hreflang це: | html атрибут, який використовується для вказівки мови та географічного націлення веб-сторінки |
⚡ rel=”alternate” це: | визначення мовних варіантів та мобільної версії однієї і тієї ж сторінки сайту. |
⌛ hreflang=”x-default” це: | вказати мовну сторінку за замовчуванням відвідувачам, для яких не знайшлося альтернативних версій сторінок. |
⌛ Впровадити атрибут hreflang можна через: | HTML-теги, HTTP-заголовки, XML Sitemap. |
Атрибут alternate hreflang і SEO
Основна перевага атрибута alternate hreflang – це те, що тільки з його допомогою можна оптимізувати багатомовність сайту і вказати на неї пошуковим системам. Без впровадження атрибута пошукачі не зможуть розпізнати та коректно зображати потрібні мовні версії сайту у видачі.
Крім цього він має ще ряд переваг:
- Впровадження даного атрибута вирішує проблему дубльованого контенту. Наприклад, якщо на нашому сайті є сторінки англійською мовою для користувачів з Великобританії та США, але контент на цих сторінках ідентичний. Атрибут hrelfang покаже пошуковій системі, що сторінки створені під різні регіони.
- Впровадження даного атрибута допомагає розширити міжнародне охоплення цільової аудиторії та підвищити трафік. Якщо атрибут налаштований правильно, пошуковик зрозуміє, що сторінки оптимізовані під учасників з ваших регіонів, і буде перенаправляти їх на більш слушні мовні та регіональні версії сайту.
- Підвищення конверсії, зниження показника відмов і пессимізації. Наявність інформації на потрібній користувачеві мові, яка залежить від місця розташування, покращує користувальницький досвід і призводить до зниження показника відмов. Чим менше людей повертається до результатів пошуку, тим краще ранжуватиметься сайт.
Як правильно впровадити атрибут alternate hreflang на сайт?
Тепер поговоримо про те, як же правильно впроваджувати alternate hreflang на свій сайт. Впровадження атрибута hreflang можна реалізувати трьома способами:
- Впровадження атрибута hreflang за допомогою HTML тега.
- Впровадження атрибута hreflang за допомогою XML-карти сайту.
- Впровадження атрибута hreflang за допомогою HTTP-заголовків.
Тепер докладніше про кожен з них.
Впровадження атрибута hreflang за допомогою HTML тегів
Це найпопулярніший і найпростіший метод. Щоб його реалізувати, в html-код сторінок, які мають альтернативну версію іншою мовою (і / або для іншого регіону), необхідно розмістити посилання на ці версії.
Hreflang в мультиязычности
Одним из самых последних трендов сайтостроения в Украине является добавление на сайт мультиязычности, для реализации которой требуется наличие hreflang на технической стороне сайта.
Владелец сайта порой может и не знать об этой директиве, пока не переведет сайт на несколько языков и ему не прийдет уведомление из Google Search Console. Постараемся разъяснить максимально коротко, что же такое hreflang и как его правильно использовать. Максимум полезной информации без лишних слов.
Hreflang — это специальный HTML-атрибут сайта, используемый для указания наличия языковых версий страниц.
Именно hreflang указывает роботу Google, что данная страница есть на таких-то языках, и какой URL ведет на страницу по-умолчанию, если перевода для данной страницы нет.
Hreflang в html
Hreflang имеет следующий вид в коде html:
Разберем по порядку что и зачем:
- rel=»alternate» — атрибут html тега link, который сообщает Google обо всех языковых версиях данной страницы;
- hreflang=»код языка и страны» — указание языка конкретной языковой версии и к какой стране он имеет отношение (язык прописывается в формате ISO 639-1 и страна в формате ISO 3166-1 Alpha 2). Для Украины hreflang будет следующим — hreflang=»uk-UA»;
* Атрибуты hreflang прописываются в раздел html страницы.
Hreflang и SEO
Выше мы уже обсудили, что с помощью атрибута hreflang мы указываем языковую версию сайта для Google. Чисто теоретически поисковая машина должна у себя в базе хранить эти данные, и когда запрос пользователя осуществляется на конкретном языке — поисковая машина должна отдавать ответы на этом же языке, если такой ответ в машине имеется. По нашим ручным тестам это работает.
Но, основная польза hreflang в seo не только эта, но и решение проблемы рисков дублированного контента (“дубли сайта”, если на языке сеошников).
Дубль контента — это ситуация, когда один и тот же контент представлен на нескольких страницах сайта.
Представим ситуацию, когда один сайт продает на нескольких рынках сбыта в разных валютах на одном языке. К примеру, это Великобритания и США. Получится несколько карточек товара, которые будут отличаться лишь условиями доставки и ценой. Для Google это будет интерпретироваться как дублированный контент, но если указать hreflang в конкретных языковых версиях, этот вопрос будет решен.
По сути, hreflang является обязательным атрибутом для технической seo оптимизации мультиязычного сайта. И без него никак.
Hreflang в WordPress, Joomla, Opencart и других
Из нашего опыта с сайтами над которыми мы работали, если сайт обладает инструментом мультиязычности, то hreflang автоматически внедрен. Не нужно нигде ничего допиливать. Это железное правило для WordPress, Joomla, Opencart.
О реализации hreflang стоит задуматься небольшим сайтам на html без CMS и большим проектам на Laravel (выше мы рассказали как внедрить hreflang в html).
Правила реализации hreflang, которые лучше не нарушать
Парность
Если Вы на странице с английским языком указываете 2 атрибута hreflang в которых есть ссылка на другой язык, то на странице с другим языком ссылки с атрибутами hreflang тоже обязательно должны быть.
Указание на себя
Ссылки с атрибутами hreflang должны указывать не только на другие языковые версии, но и указывать ссылку на саму себя.
Указание резервной страницы
С точки зрения html “x-default” — можно не указывать, но Google это рекомендует сделать.
Отсутствие битых страниц
Не должно быть в тегах ссылок на страницы, статус которых отдает 404.
Несовпадение языков
Язык мультиязычных страниц должен совпадать с кодами, которые указаны для языков в hreflang.
Альтернативные способы реализации hreflang
Если в html у Вас ничего не получается, хотя это самый рабочий способ, то есть еще 2 альтернативных:
- HTTP-заголовки. Актуальный способ для страниц без html, а именно ссылки на скачивание файлов либо инсталляционные пакеты.
- Файлы Sitemap. Прописывание осуществляется через тег “xhtml: link”. Совершенно аналогично, как и в способе html в директории прописываются ссылки на другие языковые версии сайтов с помощью “xhtml: link”. Пример прилагаем.
https://example.com/blog/test/
Hreflang Test (проверка на валидность)
В интернете есть несколько сайтов, которые предлагают услуги моментальной тест проверки hreflang. Но, все по порядку.
- Если у Вас будут ошибки, Вам об этом в первую очередь сообщит Google Search Console в отчете покрытие или уведомлением на e-mail.
- Если, Вы желаете проверить свою конкретную страницу — самый адекватный сайт-тест hreflang этот app.hreflang.org.
Запустив проверку, Вы должны получить положительный ответ:
Вы должны получить зеленый тест. Если же что-то не так, тогда проверяете html.
На этом все. Надеемся, для Вас этот материал был полезным, понятным и без лишней информации. Желаем Вам успехов в реализации hreflang и мультиязычности для Вашего сайта.
Как эффективно использовать атрибут hreflang
Каждый день миллионы пользователей из России посещают глобальные сайты, такие как alibaba.com. Несмотря на то, что на официальном сайте alibaba.com контент представлен на английском, пользователи все равно видят текст и описания товаров на русском языке. Дело в том, что у глобального сайта есть локализованная версия для России, и если вы хотите купить что-либо на данной платформе и ваш адрес доставки — Россия, сайт будет показывать контент на русском языке. Если на вашем сайте тоже есть страницы, локализованные на несколько языков, вы можете указать, на каком языке написана каждая страница, с помощью атрибута hreflang. Благодаря hreflang поисковые системы с легкостью идентифицируют контент вашего сайта на разных языках, а посетители попадут на страницу своего региона.
Что такое атрибут hreflang
Hreflang — это HTML-атрибут, который используют для сайтов с контентом на нескольких языках и для разных регионов. Иными словами, если у главной страницы вашего сайта, example.com, есть текст на русском и на английском языках, вы можете использовать этот атрибут для указания языка и географического региона страницы. Таким образом Google будет предлагать правильную версию страницы пользователям, исходя из их местонахождения.
Как сайты используют атрибут hreflang
Если вы введете в поиск «официальный сайт Samsung», находясь в России, Google выдаст такой результат: Кликнув по ссылке, вы попадете на https://www.samsung.com/ru/. Google сам догадался, откуда вы пришли, и вам не нужно вводить дополнительные ключевые слова, чтобы попасть на русскоязычную версию сайта.
Как выглядит hreflang
Рассмотрим пример использования атрибута на сайте SE Ranking:
- link rel=“alternate”: значение alternate указывает на альтернативную версию страницы, в данном случае русскую.
- hreflang=”ru”: данная альтернативная ссылка указывает на ru, то есть на русский язык.
- href=“https://seranking.com/ru/“: страницу на русском языке можно найти по заданному URL.
Нужны ли сайту языковые версии
Прежде чем мы начнем разбираться в тонкостях использования hreflang, давайте выясним, всем ли сайтам нужны языковые версии, на сколько языков нужно переводить страницы и как можно технически реализовать мультиязычность.
На первый взгляд может показаться, что создание локализованных страниц для всевозможных регионов — это лучшее решение для удобства пользователя. Просматривая страницы на родном языке, пользователь обычно проводит больше времени на сайте, что положительно влияет на поведенческие факторы.
Джон Мюллер в дискуссии на Reddit советует не рассеивать свое внимание на десятки разных языков просто потому, что вы можете это сделать. «Давайте переведем сайт на все языки мира! А что если пользователь из Японии захочет видеть контент на Суахили? Давайте создадим больше страниц!»
По словам Джона, все эти страницы скорее всего будут получать совсем мало трафика, они не добавят ценности вашему сайту и увеличат расход ваших ресурсов и ресурсов поисковиков. Поэтому принимайте решение взвешено: если у вас много пользователей из какого-либо региона, а страница содержит важную информацию, переводите ее. Если же языковая версия вам нужна «для галочки», не стоит тратить на нее ресурсы.
Мюллер советует сначала сфокусироваться на самых важных страницах и не стремиться локализовать все страницы сайта, даже не самые популярные.
Как обозначить разные языковые версии страниц
Существует несколько способов обозначить мультиязычность сайта с помощью атрибута hreflang.
Отдельные домены под разные языки
Самый очевидный, но и самый дорогостоящий вариант — создать отдельные сайты под разные локали. Выглядит этот способ так:
- https://example.ru/
- https://example.com/
В итоге вы имеете два отдельных домена, которые нужно не только продвигать как самостоятельные сайты, но и следить за тем, чтобы все изменения были реализованы на обоих проектах.
Поддомены
- https://ru.example.com/
- https://fr.example.com/
Как и в предыдущем случае, поисковики воспринимают поддомен как отдельный сайт, поэтому минусы этого способа такие же, как и в создании отдельных доменов.
Подпапки
Этот метод считается самым простым и бюджетным из всех описанных. Вы находитесь в пределах одного домена, а значит все правки можно вносить в одном месте.
- https://example.com/ — главная версия сайта на английском языке;
- https://example.com/es/ — версия на испанском языке.
Мы рекомендуем использовать третий вариант как самый простой с точки зрения SEO и разработки.
Когда указывать альтернативные страницы
Прежде чем использовать hreflang, давайте разберемся, в каких случаях он нужен:
- На веб-странице переведен только шаблон (например, колонтитул или навигационная панель), а основной контент остался на главном языке.
- На сайте есть разные тексты для разных регионов. Например, английский текст предназначается для пользователей из США, а французский — для пользователей из Канады.
- Сайт полностью локализован на несколько языков:
- португальский сайт в 2 разных версиях,
- для Португалии: “alternate“ href=“https://example.com/pt“ hreflang=“pt-PT“ />
- и для Бразилии: “alternate“ href=“https://example.com/br“ hreflang=“pt-BR“ />
- глобальный сайт с несколькими версиями для разных континентов на одном языке: для Австралии, США, и Канады
- сайт на разных языках: английском, итальянском и китайском
- сайт на английском и русском, но только для Великобритании
- португальский сайт в 2 разных версиях,
Если вы узнали свой сайт в одном из примеров, вам стоит использовать атрибут hreflang.
Когда не следует использовать атрибут hreflang
Давайте рассмотрим несколько ситуаций, когда не следует использовать hreflang или использовать его с осторожностью.
Для сайтов с похожим контентом на одном языке
Сайты с одинаковым или похожим контентом на одном языке, даже в разных регионах, в атрибуте hreflang не нуждаются.
Например, на сайте на английском языке указаны разные цены для США и Великобритании (в долларах и фунтах) и представлены разные способы оформления заказа — с учетом доставки и без.
Если вы все-таки указываете языковую разметку на таком сайте, рекомендуем дополнительно создать еще и общий URL-адрес без привязки к конкретному региону. Например, кроме вариантов для США (en-us) и Великобритании (en-gb), предложите общую версию страницы (en) для посетителей из других англоязычных стран.
Для неканонических страниц
Неправильное использование rel=canonical в связке с атрибутом hreflang может привести к конфликтам и сбить с толку поисковую систему.
Нельзя использовать hreflang, если страница является дублем, а тег каноничности указывает на другую страницу.
Дело в том, что rel=canonical на другую страницу посылает поисковикам такой сигнал: «На эту страницу обращать внимание не нужно, пожалуйста, индексируйте вот эту каноническую страницу».
Атрибуты hreflang на этой же странице посылают обратный сигнал: «Проиндексируйте, пожалуйста, эту страницу, здесь качественный контент. И про версии на других языках тоже не забудьте».
Чтобы не запутать поисковики, просто не используйте hreflang на неканонических страницах.
Как использовать атрибут hreflang
Теперь давайте рассмотрим, как правильно использовать атрибут hreflang, чтобы поисковые системы корректно индексировали языковые версии страницы и направляли пользователей на нужную версию.
С помощью тегов HTML
Ниже мы добавили фрагмент кода HTML на примере сайта SE Ranking. Тег нужно добавить в раздел страниц, чтобы перенаправить пользователей из разных стран на соответствующие страницы.
Каждый элемент должен иметь соответствующую структуру:
Элементы, которые выделены жирным, — это переменные, вместо которых вы добавляете нужный вам язык и ссылку, на которую должен попасть пользователь. Для пользователей из России укажите код языка и региона ru и добавьте соответствующую ссылку:
С помощью заголовка HTTP
Если вы используете формат, отличный от HTML, например PDF, вы можете сообщить поисковику о страницах на других языках с помощью заголовка HTTP.
HTTP-заголовок должен иметь определенную структуру (жирным шрифтом мы выделили переменные) :
Link: url1>; rel=“alternate“; hreflang=“lang_code_1“, url2>; rel=“alternate“; hreflang=“lang_code_2“, …
- url — полный URL-адрес языковой версии страницы
- lang_code — стандартный код языка и код региона
Представим, что вам нужно направить пользователей на две версии PDF-файла: на немецком для юзеров из Великобритании и на немецком для пользователей из других стран. В таком случае пример заголовка будет следующим:
Link: http://de-gb.example.com/file.pdf>; rel=“alternate“; hreflang=“de-gb“, >; rel=“alternate“; hreflang=“de“
С помощью файла Sitemap
Давайте рассмотрим на примере, как корректно указать на альтернативную страницу с помощью файла Sitemap:
У нас есть страница на испанском языке для посетителей из Аргентины и для посетителей из остальных стран. Следовательно, в файл Sitemap нам нужно включить два URL-а:
- www.example.com/es-ar/page.html — сайт на испанском для пользователей из Аргентины;
- www.example.com/es/page.html— сайт на испанском для пользователей из других стран.
Sitemap будет выглядеть следующим образом:
http://www.example.com/es/page.html http://www.example.com/es-ar/page.html
Языки и регионы
Возможно, вы заметили, что в некоторых примерах мы использовали один код (ru, en, es, de), а в других — связку из двух кодов (ru-en, es-ar, и т.д.). Дело в том, что первый код обозначает язык (в формате ISO 639-1), а второй — регион (в формате ISO 3166-1 Alpha 2).
Первый код всегда обозначает язык, а второй указывает на регион, при этом они не обязательно должны быть связаны, например:
- ru — страница на русском языке для пользователей со всего мира;
- ru-RU — страница на русском языке для пользователей из России;
- ru-PL — страница на русском языке для пользователей из Польши.
Также нужно учитывать, что в некоторых странах пользователи могут говорить на разных диалектах. Например, в Китае языки разбиты на 10 диалектных групп, и если вы работаете с юзерами из разных китайских регионов, выберите нужный код из списка ISO 15924.
Что такое значение x-default
В примере HTML-кода SE Ranking вы могли заметить строку со значением x-default.
Если ни один из указанных языков не соответствуют настройкам браузера ваших пользователей, значение x-default автоматически определит, на какую страницу их перенаправить. Чаще всего пользователей перенаправляют на главную версию страницы.
Распространенные ошибки с использованием атрибута hreflang
В случае если в атрибуте hreflang допустили техническую ошибку, поисковые боты просто-напросто не увидят его в структуре сайта. Это можно считать небольшой неудачей, так как hreflang никак не повлияет на ранжирование сайта.
С другой стороны, если вы все сделали правильно, но связали не те страницы между собой, вы можете сильно ухудшить пользовательский опыт.
На инфографике вы найдете самые распространенные ошибки в применении атрибута hreflang.
Расскажем об этих ошибках более подробно.
На страницах с атрибутом hreflang нет обратных ссылок
Если страница А ссылается на страницу Б, страница Б должна содержать обратную ссылку на страницу А. Иначе поисковики некорректно прочитают атрибут.
К примеру, если страница на украинском содержит метку hreflang, которая указывает на адрес страницы на русском, страница на русском тоже должна содержать этот тег.
Если у страницы есть украинская, русская и английская версии, код украинской версии должен выглядеть так:
Страница 1: www.example.com/uk
В свою очередь, русская версия страницы тоже должна указывать на все языковые версии. В примере ниже допущена ошибка.
Страница 2: https://www.example.com/ru
— нет обратной ссылки на украинскую версию
Страница с атрибутом hreflang не ссылается на саму себя
Каждая страница должна не только включать ссылку на другие языковые версии, но и ссылку на саму себя. В нашем примере украинская версия страницы содержит такую ссылку, а русская — нет.
Страница 1: www.example.com/uk
Страница 2: https://www.example.com/ru
— страница не ссылается на саму себя
Указан только код страны
Вы можете указывать только язык, либо язык и при необходимости регион, но нельзя указывать только регион (код страны), потому что поисковый робот не сможет определить язык только по коду региона, например:
- RU – ошибочно указывать только регион без языка;
- ru-RU – можно указывать на язык и регион;
- ru — можно указывать только на язык, если контент предназначен для пользователей со всех стран.
Страница с атрибутами hreflang неканоническая
Если вы используете rel=“canonical“ и hreflang одновременно, убедитесь, что тег каноничности указывает на текущую страницу. И наоборот, неканонические страницы не должны содержать hreflang.
В примере ниже rel=“canonical“ указывает на текущую версию страницы, на странице также добавлены атрибуты hreflang. Поисковики воспримут это как четкую инструкцию: сейчас вы на основной версии страницы, которую нужно проиндексировать; эта страница на русском, но есть еще страница на английском, которую тоже нужно проиндексировать.
В этом случае поисковики должны просканировать и проиндексировать обе страницы.
https://www.example.com/ru
✅ “canonical“ href=“https://www.example.com/ru“ /> — rel=“canonical“ указывает на текущую версию страницы. “alternate“ hreflang=“en“ href=“https://www.example.com/en“ /> “alternate“ hreflang=“ru“ href=“https://www.example.com/ru“ />
Рассмотрим другой пример, когда rel=“canonical“ указывает на другую страницу:
https://www.example.com/ru
❌ “canonical“ href=“https://www.example.com/1/ru“ /> — rel=“canonical“ ведет на другую страницу. “alternate“ hreflang=“en“ href=“https://www.example.com/en“ /> “alternate“ hreflang=“ru“ href=“https://www.example.com/1/ru“ />
Что в данном случае видит Google? Мы просим поисковик проиндексировать другую страницу, а текущую версию игнорировать. При этом мы указываем в атрибутах hreflang, что и текущую русскую, и английскую версию страниц нужно добавить в индекс. Такие противоречивые инструкции Google просто проигнорирует.
Указано несколько языковых кодов для одного URL-a
Если несколько языковых кодов указывают на один URL, поисковикам будет сложно понять, на какую языковую версию направить пользователей.
Например, если hreflang=“ru“ и hreflang=“en“ указывают на https://www.example.com/ru, это считается ошибкой.
Несколько страниц с одинаковым языковым кодом в атрибуте hreflang
Для разных версий страниц нужно указывать разные языковые коды. Например, ошибкой будет считаться, если для значения hreflang=“ru“ вы укажете две ссылки: https://www.example.com/ru и https://www.example.com/de.
В атрибуте нет значения x-default
Несмотря на то, что x-default не является обязательным, его использование — это хороший тон. Благодаря x-default поисковики будут знать, куда перенаправлять пользователя, если страница не переведена на нужный ему язык. Если у сайта нет французской версии, можно указать, чтобы всех пользователей из Франции направляли на основную версию страницы, которая не связана с конкретным регионом.
Как найти и устранить ошибки в атрибуте hreflang
Конечно, очень сложно вручную просмотреть все страницы, поэтому устранить неполадки можно с помощью отчета «Таргетинг по странам и языкам» в инструменте Google Search Console.
Вы также можете оптимизировать процесс устранения ошибки с помощью инструмента «Аудит сайта» от SE Ranking. Вы не только проверите правильность использования атрибута hreflang, но и поймете характер ошибки и получите рекомендации о том, как ее исправить.
С помощью инструмента вы сможете идентифицировать:
- некорректный код языка
- страницу с атрибутом hreflang, которая не ссылается на саму себя
- атрибут hreflang, который указывает на неканоническую страницу
- несовпадение атрибутов hreflang и HTML lang
- несколько языковых кодов для одного URL-a
- некорректный атрибут HTML lang
- отсутствие обратных ссылок на страницах с атрибутом hreflang
- отсутствие значения x-default
Чтобы найти ошибки, зайдите в свой аккаунт, выберите проект, перейдите в «Аудит сайта» → «Отчет об ошибках» → «Локализация»:
Заключение
Языковая разметка помогает поисковикам идентифицировать версию страницы, которая подходит языку и геолокации пользователя. Благодаря hreflang вы сможете положительно повлиять на индексацию страниц, подсказать поисковой системе, что похожие страницы — это не дубликаты, а разные языковые версии, и улучшить пользовательский опыт.
Не забывайте о том, что с использованием этого атрибута часто случаются ошибки, которые могут негативно сказаться на оптимизации вашего сайта. Поэтому очень важно регулярно проверять состояние страниц на сайте и исправлять некорректный код языка в атрибуте hreflang.