Что такое hreflang и как добавить атрибуты lang в код страницы
26456 1
| How-to | – Читать 8 минут |
Прочитать позже
АУДИТ САЙТА — АТРИБУТЫ HREFLANG
Инструкцию одобрил
Руководитель SEO отдела в Mnogoland
Юрий Горбатый
Атрибуты hreflang и lang нужны, чтобы указать ссылки на страницы сайта, созданные на различных языках. Они помогают поисковым системам отображать в выдаче результаты, оптимизированные под определенный регион, язык либо диалект.
Что такое hreflang и lang
Если компания работает в различных странах и ресурс мультиязычный, стоит указывать при помощи специальных атрибутов — для какого региона и языка предназначена та или иная страница. Это позволит поисковым системам идентифицировать различные версии сайта и показывать пользователю подходящий вариант.
Также данные атрибуты позволят избежать проблем, связанных с дублированием контента, которые могут возникнуть при индексации страниц со сходным содержимым, предназначенным для различных регионов.
Например, в международном интернет-магазине могут совпадать описания товаров, однако отличаться валюта для показа в Великобритании и США. Если не прописать различный регион для каждой из версий страниц, поисковики могут посчитать их дублями.
Google рекомендует прописывать языковые и региональные версии для мультиязычных сайтов в следующих случаях:
Переведены только пункты меню и сведения в подвале страницы, а основная информация оставлена на основном языке. Этот вариант чаще всего используется для разделов с пользовательским контентом — на форумах или страницах с отзывами.
На сайте используется один язык с некоторыми региональными различиями. Например, содержимое на английском немного различается для жителей США, Новой Зеландии и Австралии.
Все страницы проекта существуют на различных языках. К примеру, ресурс на итальянском перевели на французский и испанский языки.
Обозначить альтернативные версии страниц на различных языках и для конкретных географических территорий можно такими методами:
- посредством атрибута hreflang HTML-тега <link>:
- добавив версии в заголовках HTTP:
- в карте ресурса sitemap.
xml:
xml:- в теге <html>, добавив атрибут <lang>:
Правила указания языков и регионов страниц
<link rel="alternate" href="https://site.com/" hreflang="x-default" />
Данный параметр добавляется в следующих случаях:
- при наличии на проекте IP-зависимых страниц, с которых пользователи перенаправляются на подходящую языковую версию сайта;
- для страниц, на которых реализована возможность динамического выбора контента на каком-либо языке;
- на страницы, где осуществляется выбор региона и языка.
Как использовать hreflang в теге <link>
Атрибут hreflang добавляется в раздел заголовка <head> и имеет такой синтаксис:
<link rel="alternate" hreflang="код языка" href="URL-адрес" >
Например, синтаксис, определяющий три альтернативные версии страницы на английском, украинском и русском языках, будет таким:
<link rel="alternate" hreflang="en" href="https://serpstat.
com/" />
<link rel="alternate" hreflang="uk" href="https://serpstat.com/uk/" />
<link rel="alternate" hreflang="ru" href="https://serpstat.com/ru/" />В заголовок добавляются ссылки на все версии, в том числе — на исходную страницу.
Google не распознает подходящий язык для посетителя исходя из URL-адреса, важно указывать его код явно. В этом случае пользователи из России, Украины и Англии либо посетители, разговаривающие на одном из трех указанных языков, попадут на необходимые целевые страницы с результатов поиска. Информация о регионе и языке пользователя определяется по настройкам браузера.
Данный вариант может быть достаточно громоздким для тех сайтов, которые переведены на множество языков. Добавление длинного кода со всеми ссылками отрицательно влияет на производительность проекта. Поэтому для таких крупных проектов целесообразнее использовать другие методы указания языковых версий.
Использование hreflang в заголовках HTTP
Сообщить поисковым системам о версиях страницы на различных языках и оптимизированных под определенные регионы можно с помощью заголовков HTTP.
Информация в заголовках прописывается так:
Link: <полный URL-адрес файла на первом языке>; rel="alternate"; hreflang="двухбуквенный код первого языка", <полный URL-адрес файла на втором языке>; rel="alternate"; hreflang="двухбуквенный код второго языка"
Добавление hreflang в Sitemap
Можно также использовать для указания языковых и региональных версий страниц Sitemap. В данный файл добавляется список необходимых ссылок таким образом:
Сначала корректно прописывается пространство имен.
Затем добавляется тег <URL>.
После него следует тег <loc>, в котором указан URL-адрес страницы.
Затем прописываются все версии вместе с исходной страницей в теге <xhtml:link>, где указываются коды языков и регионов.
Размещается закрывающий тег </URL>.
После этого повторяются пункты 2-5 для всех URL-адресов с существующими языковыми версиями.
Использование атрибута lang в теге <html>
Альтернативный способ указать поисковым системам язык страницы — добавление lang в тег <html>. Этот атрибут указывает язык для всей страницы, в том числе ее заголовка. Если на странице размещены отдельные фрагменты текста на других языках, то для них можно прописать необходимое значение, отличное от заданного в теге <html>.
Пример синтаксиса для установки английского языка:
<html lang="en">
Для установки определенных диалектов языка предназначены коды спецификации BCP 47. Например, код es-419 обозначает испанский язык, используемый в Латинской Америке и Карибском регионе. Для подбора необходимых кодов можно воспользоваться утилитой Language Subtag Lookup, в которой доступен список всех кодов языков, отфильтрованных по определенным параметрам:
Валидация мультиязычных версий проекта
Проверить корректность введенных языковых и региональных данных на сайте можно с помощью валидатора Flang, указав URL проекта и нажав «Validate now!»:
Также есть другой валидатор — hreflang.
ninja, работающий аналогичным образом:
Заключение
Установка языка и региона на страницах мультиязычных сайтов и проектов, работающих в различных странах, поможет посетителям получать в поисковой выдаче подходящие страницы.
Благодаря использованию атрибутов lang и hreflang не только улучшается пользовательский опыт, но и исключается проблема дублирования контента, что важно для SEO. Поисковые системы распознают даже сходные по содержимому страницы как адаптированные для различных регионов.
Использование x-default позволяет предусмотреть универсальную версию страницы. На нее будут перенаправляться пользователи, проживающие в тех странах и разговаривающие на тех языках, которые не определены на сайте с помощью hreflang.
При указании языковых, региональных и диалектных кодов важно проверять их соответствие спецификациям. Проверить это можно с помощью валидаторов.
Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации.
Любая периодичность проверки и автоматическая рассылка отчетов на почту.
Запустить аудит сайта
Serpstat — набор инструментов для поискового маркетинга!
Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.
Набор инструментов для экономии времени на выполнение SEO-задач.
Получить бесплатный доступ на 7 дней
Оцените статью по 5-бальной шкале
4 из 5 на основе 15 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.
Рекомендуемые статьи
How-to
Denys Kondak
Как настроить 301 редирект с http на https-версию сайта
How-to
Denys Kondak
Что должно присутствовать в теге Body
How-to
Denys Kondak
Как модерировать комментарии на сайте, чтобы избежать фильтров поисковиков
Кейсы, лайфхаки, исследования и полезные статьи
Не успеваешь следить за новостями? Не беда! Наш любимый редактор подберет материалы, которые точно помогут в работе.
Только полезные статьи, реальные кейсы и новости Serpstat раз в неделю. Присоединяйся к уютному комьюнити 🙂
Нажимая кнопку, ты соглашаешься с нашей политикой конфиденциальности.
Поделитесь статьей с вашими друзьями
Вы уверены?
Спасибо, мы сохранили ваши новые настройки рассылок.
Сообщить об ошибке
Отменить
Универсальный атрибут | HTML 5 справочник
Текст документа может быть набран как на одном языке, так и содержать вставки на других языках, которые могут различаться по своим правилам оформления текста. Например, для русского, немецкого и английского языка характерны разные кавычки, в которые берется цитата.
Чтобы указать язык, на котором написан текст внутри текущего элемента и применяется атрибут lang. Браузер использует его значение для правильного отображения некоторых символов.
| IExplorer | Chrome | Opera | Safari | Firefox | Android | iOS |
6. 0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
lang="код языка"
Смотреть коды языков
Нет
<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo> <bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Атрибут lang</title>
<style>
p {
font-size: 130%; /* Размер текста */
}
q:lang(de) {
quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */
}
q:lang(en) {
quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */
}
q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языка */
quotes: "\00AB" "\00BB";
}
</style>
</head>
<body>
<p>Цитата на французском языке: <q lang="fr">Ce que femme veut, Dieu le veut</q>. </p>
<p>Цитата на немецком: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p>
<p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>
</body>
</html>
Для отображения типовых кавычек в примере используется стилевое свойство quotes, а само переключение языка и соответствующего вида кавычек происходит через атрибут lang, добавляемый к тегу <q>.
Атрибут HTML Lang: что это такое? Почему это важно?
12 июль
12 июль
СодержаниеЧто такое атрибут HTML lang?
Почему атрибут HTML lang важен и полезен?
Влияет ли атрибут языка HTML на SEO?
Как внедрить атрибут lang на свой сайт
Как выбрать коды языков
Распространенные ошибки при внедрении языковых тегов HTML
Заключение
Атрибут языка HTML указывает язык текстового содержимого, используемого на веб-странице.
Обычно он используется, чтобы четко обозначить язык страницы, чтобы избежать путаницы.
Поисковые системы используют атрибут lang, чтобы возвращать поисковику результаты, относящиеся к определенному языку, а также сигнализирует механизму произношения программы чтения с экрана переключиться на другой язык.
Эта статья поможет вам понять тег lang в HTML и его важность, что он делает, как внедрить его на свой сайт и влияет ли он на SEO?
Готовы? Давай начнем.
Что такое атрибут HTML Lang?
Атрибут языка HTML используется для определения языка текста, используемого на любой веб-странице. Основная цель этого атрибута — указать язык основного документа.
Он также используется онлайн-ридерами, которые меняют язык для отображения правильного произношения и акцента содержимого веб-страницы.
Тег HTML lang поддерживается широко используемыми веб-браузерами, такими как Chrome, Internet Explorer, Firefox, Safari и Opera.
Вот синтаксис атрибута HTML LANG:
В вышеуказанном синтаксисе, язык_коде. .
Например, если языком содержимого является английский, код языка должен быть «en»:
< html lang = "en">
Аналогичным образом, если контент на французском языке, код языка должен быть следующим:
В HTML 5 атрибут lang можно использовать с любым элементом HTML, например и.
Например, если у вас есть веб-страница, содержимое которой написано на 4 разных языках — английском, французском, русском и испанском, то правильные коды языков можно указать следующим образом:
Этот абзац на английском языке. ce parae est en français этот абзац на французском este párrafo está en francés ...
В приведенном выше коде поисковые системы могут четко понимать язык четырех разных абзацев и отображать их в поисковой выдаче, когда это необходимо.
Кроме того, программы чтения с экрана могут выбирать правильный язык и произношение для лучшей доступности для слабовидящих пользователей.
Почему атрибут HTML Lang важен и полезен?
Атрибут lang в HTML имеет решающее значение, поскольку он помогает поисковым системам, таким как Google, Bing, Yandex и другим, возвращать в поисковой выдаче результаты, зависящие от языка.
Источник изображения: Reliablesoft
Если у вас есть несколько версий веб-страницы для разных регионов или языков, вы должны сообщить об этих версиях поисковым системам. Это поможет поисковым системам отображать лучшую версию вашего сайта в зависимости от их языка или местоположения.
Вот несколько основных причин, по которым HTML-тег lang полезен:
- Он помогает поисковым системам понять правильный язык веб-страницы. Это повышает качество результатов поиска, поскольку поисковые системы могут возвращать результаты на основе языковых предпочтений искателя.
- Расширения браузера и другое программное обеспечение, такое как средства перевода, могут использовать тег lang для отображения информации на правильном языке. Теги
- Lang также позволяют изменять стиль содержимого в зависимости от языка. Например, вы можете установить определенный шрифт для определенного языка. Кроме того, пользовательские агенты могут автоматически выбирать шрифты в зависимости от языка документа.
- Средства чтения с экрана, синтезаторы речи и переводчики Брайля используют атрибут lang для вывода текста. В таких странах, как Великобритания, правительство обеспечивает использование правильных языковых тегов в соответствии с рекомендациями W3C по обеспечению доступности веб-сайтов.
Влияет ли атрибут HTML Lang на SEO?
Этот атрибут HTML lang не влияет на поисковую оптимизацию, поскольку основные поисковые системы, такие как Google и Bing, не используют этот тег для фильтрации результатов поиска по языку или местоположению.
Google использует тег hreflang для определения местоположения и языка вашего контента.
Вот синтаксис тега hreflang:
Или
>
Где en относится к английскому языку, а gb относится к Соединенному Королевству. Это означает, что страница предназначена для англоязычных пользователей из Великобритании.
Аналогичным образом Bing использует метатег content-language для понимания языка документа.
Вот синтаксис «контент-языковой» Meta Tag:
Где en относится к английскому языку, а us относится к США.
Это означает, что страница предназначена для англоязычных пользователей в США.
Таким образом, атрибут HTML lang не влияет на поисковую оптимизацию. Тем не менее, вы всегда должны использовать тег lang, потому что он влияет на взаимодействие с пользователем и помогает сделать ваш веб-сайт дружественным W3C.
При работе с многоязычными веб-сайтами следует использовать теги hreflang и content-language для Google и Bing соответственно в зависимости от целевых местоположений и поисковых систем.
Как реализовать атрибут языка на вашем веб-сайте
Вы можете добавить языковой тег на веб-страницу, отредактировав исходный код.
Вы всегда должны использовать элемент HTML в качестве объявления для определения языка, поскольку HTML наследует все остальные элементы на странице.
Например, если вы хотите установить французский язык в качестве языка всей веб-страницы, используйте этот тег:
Это веб-страница на английском языке. >
Тег заголовка h2