Страница с версией для печати — «Нубекс»

Всё про атрибут hreflang: как указать языковые версии страниц

Если на вашем сайте есть контент на нескольких языках, вам нужно использовать атрибут hreflang, чтобы поисковик выдавал пользователю нужную языковую версию.

В статье рассмотрим, что такое hreflang, зачем он нужен и как настроить его на сайте.

Что такое hreflang и зачем он нужен

Hreflang — это атрибут HTML, которым маркируют страницы сайта с одинаковым контентом, но на разных языках. Атрибут hreflang помогает поисковикам выдавать пользователю версию страницы на понятном ему языке, соответствующую его геоположению. Поисковик анализирует сигналы каждого пользователя — страну и языковые настройки — и возвращает ему версию контента, которую считает наиболее подходящей.

Атрибут hreflang поддерживают Google и Яндекс. Но поисковики не рассматривают его как директиву, это только сигнал, к которому они могут прислушаться, а могут и проигнорировать.

Кому стоит указывать hreflang

Будет не лишним использовать атрибут hreflang, если на сайте есть страницы с одинаковым контентом, но на разных языках. Например, все украинские сайты по умолчанию должны быть на украинском языке. Но русскоязычные жители там тоже есть, так что обычно делают дополнительную версию на русском.

Еще вариант — язык один, но страницы для разных регионов различаются. Тогда тег hreflang может помочь избежать дублирования контента.

Допустим, вы работаете в буржунете и вам нужны разные страницы для пользователей из США и Великобритании. Они будут почти идентичны, поэтому Google может посчитать их дублями и выбрать только одну для индексации.

Нужно указать hreflang, чтобы помочь Google понять связь между ними, и локализовать содержимое: указать цены в нужной валюте, употребить названия и термины, которые приняты в этих регионах.

На страницах под США вы укажете цены в долларах и используете слова из американского английского, а на страницах для Великобритании будут фунты стерлингов и британский английский.

Если версии страницы отличаются только языком шаблона, тоже можно добавить hreflang. Например, если в блоге есть пользовательский контент, который не переводится, а шапка, подвал, кнопки и другая навигация показываются на разных языках.

Если язык страницы меняется в зависимости от IP-пользователя или на странице можно выбрать язык, тоже используют тег hreflang, но со значением “x-default”. Настройку разберем ниже.

Особенности тегов hreflang

Странице нужно добавить указание на себя

Строчка с hreflang не может быть одна. В Справке Яндекса указано, что в hreflang должны быть перечислены все версии страницы, включая текущую.

Если страница на русском продублирована на английском и украинском, на каждой из этих страниц должно быть три соответствующих элемента link с атрибутами локализации. То есть ссылка на себя и на две языковые альтернативы:

Что означает каждая часть кода:

• «alternate» — у этой страницы есть альтернативная версия;
• hreflang = «ua» — альтернативная версия написана на украинском;
• «https://ua.site.com/» — украинскую версию можно найти по этому URL.

Языковые коды указаны в стандарте ISO 639–1: ru — русский, de — немецкий, ua — украинский и так далее. Есть дополнительный список формата ISO 3166–1 alpha-2, когда нужно уточнить регион или страну: en-gb — английский контент для Великобритании, en-us — американский английский для США, de-es — контент на немецком для пользователей из Испании.

Регион уточняйте только после кода языка, а то может возникнуть путаница:

В Google Search Central также написано:

Но Джон Мюллер в Твиттере сказал, что это хорошая практика, но не обязательная.

Как нужно сделать в этом примере:

Просто не указывать hreflang для неканонических страниц с параметрами. Для URL https://example.com/au/publications?count=50&page=4 достаточно указать только каноническую ссылку:

А для URL https://example.com/au/publications нужно указать каноникал:

И hreflang с каждой существующей языковой версией, а их две — для Австралии и США:

Теперь Google видит, что страница с параметрами https://example.com/au/publications?count=50&page=4 — это дубликат страницы https://example.com/au/publications, так что он не будет ее индексировать.

И еще видит, что https://example.com/au/publications ориентирована на англоязычных пользователей из Австралии и имеет альтернативную версию для пользователей из США, доступную по адресу https://example.com/us/publications.

Структура сайта не важна

Структура сайта не влияет на обработку поисковиками атрибута hreflang. Версии страницы могут быть расположены в разных каталогах:

Также версии страницы могут быть расположены на разных поддоменах и доменах:

Для страниц с автоматическим определением языка есть свой hreflang

Если на странице есть селектор для выбора языка или язык меняется в зависимости от IP-пользователя, нужен hreflang со значением «x-default». Он указывает, какую страницу показывать по умолчанию или какую отображать, когда другой вариант языка не подходит пользователю.

К примеру, на главной сайта site.com язык меняется в зависимости от IP-адреса пользователя. Тогда ссылку на главную нужно отметить с «x-default», а также нужно указать на версии страниц на других языках:

Как указать атрибут hreflang на сайте

Есть три способа реализовать атрибут hreflang:

А для CMS есть плагины и модули, например:

Как указать hreflang в HTML

Самый популярный способ — добавить hreflang в HTML каждой страницы, которым нужно указать альтернативные версии. Тег нужно добавить в начало секции head после Title и Description.

Допустим, есть сайт условной компании Super-Company, она работает на Россию, Германию и Великобританию. На нем сделаны региональные страницы с некоторыми отличиями:

• https://ru.super-company.com/ — главная страница на русском языке с тарифами на доставку из России;
• https://en-gb.super-company.com/ — страница для клиентов из Великобритании с ценами в фунтах стерлингов;
• https://de.super-company.com/page.html — страница для клиентов из Германии с ценами в евро;
• https://en.super-company.com/page.html — главная страница на английском языке;
• https://www.super-company.com/ — страница по умолчанию, на которой пользователи могут выбрать нужный им язык и регион.

Такой код нужно поместить на каждую из этих страниц. Он будет отправлять пользователей из России, Германии, Великобритании, а также англоговорящих на нужные страницы, а пользователей из других стран на страницу по умолчанию, чтобы они сами выбрали язык.

Проблема этого способа в том, что если вы добавите еще одну версию страницы, придется редактировать код всех версий и добавлять ссылку на нее. А если у вас много версий на разных языках, работы неприятно прибавится.

Как указать hreflang в заголовках HTTP

Указать на версии страницы на других языках можно в заголовке HTTP в ответах на запрос GET страницы. Способ особенно выручает, если нельзя указать код в HTML, например, для файлов в формате PDF.

Для каждой версии страницы нужно указать набор значений < url >, rel = «alternate» и hreflang через запятую. Это касается и запрашиваемой страницы. Заголовок одинаковый для всех вариантов — Link:.

HTTP/1.1 200 OK Content-Type: application/pdf Link: ; rel="alternate"; hreflang="lang_code_1", ; rel="alternate"; hreflang="lang_code_2"

Допустим, на сайте есть три версии PDF-файла: для русскоязычных посетителей, отдельно для англоязычных пользователей из США и версия на английском для пользователей из других стран. Код будет выглядеть так:

HTTP/1.1 200 OK Content-Type: application/pdf Link: ; rel="alternate"; hreflang="ru", ; rel="alternate"; hreflang="en-us", ; rel="alternate"; hreflang="en"

Как указать hreflang в Карте сайта — sitemap.xml

Указать языковую принадлежность страниц можно в файле Sitemap. Нужно добавить в карту элемент с URL страницы, а в дочерних тегах указать ссылки на все ее языковые варианты, включая саму эту страницу.

Порядок перечисления языковых версий в дочерних элементах не имеет значения, но лучше придерживаться какой-то системы, чтобы не запутаться.

Пространство имен xhtml нужно указывать по образцу:

xmlns:xhtml="http://www.w3.org/1999/xhtml"

Получается, если у страницы три языковых варианта — русский, английский и украинский — в Sitemap будет три элемента с тремя дочерними тегами.

• https://site.com/ru/ — для аудитории, говорящей по-русски;
• https://site.com/en/ — для англоговорящей аудитории;
• https://site.com/ua/ ;— для тех, кто говорит на украинском языке.

Пример Sitemap для этих трех страниц:

   https://site.com/ru/    https://site.com/en/    https://site.com/ua/    

Легко запутаться, но зато не нужно редактировать несколько HTML-документов каждый раз, когда вы добавляете новую версию или удаляете страницу.

Как проверить правильность hreflang на странице

Подождите, пока Google просканирует страницы, загляните в отчет «Таргетинг по странам и языкам» в консоли Google и откройте вкладку «Язык» — там будут отображаться ошибки.

Делитесь материалом и оставляйте свои отзывы в комментариях, будем рады!

Источник

Как сделать версию для печати

Думаю, что некоторые из вас печатали веб-страницу на принтере. Зачастую, многие сайты не создают отдельную версию страниц для печати, и это приводит к тому, что вместе с нужным пользователю контентом распечатываются меню, рекламные баннеры, какие-то ненужные элементы.

Конечно, самый простой способ решения данной проблемы — отдельная версия для печати для сайта. В таком случае создается новая страница, с которой удаляются все ненужные для печати элементы и страница подгоняется под формат A4 (или несколько листов A4).

Другой способ — создание стилей сайта для печати. Для этого создается отдельный файл CSS версии для печати. Подключается он между тегами следующей строкой:

Этот вариант позволяет избежать дублей страниц на сайте. Здесь пользователю для отображения страницы в браузере отдается один CSS-файл, а на печать посылается другой. Причем этот файл со стилями страницы для печати должен быть убирать лишние элементы и делать страницу одинаковой для отображения во всех браузерах и при разных разрешениях (чтобы вид напечатанной страницы не зависел от браузера или разрешения экрана пользователя).

Чтобы скрыть определенные элементы со страницы при печати можно использовать следующий приём:

То есть элементам, которые необходимо скрыть при печати, присваивается класс noprint, который описан в файле nubexPrint.css (отображение запрещено).

В приведенном примере будет распечатана страница с логотипом сайта, основным контентом и блоком контактов в подвале. Меню сайта и рекламные блоки распечатаны не будут.

В конструкторе сайтов «Нубекс» есть версия страниц для печати.

Источник