Http href: Атрибут href | htmlbook.ru

— HTML | MDN

HTML-элемент <a> определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете. Также он может быть использован (в устаревшем варианте) для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.

<a href="https://developer.mozilla.org">MDN</a>

Этот элемент включает в себя общие атрибуты.

download HTML5

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

 

Примечание:

• Атрибут может быть использован вместе с blob: URLs и data: URLs, чтобы пользователи могли проще скачать контент, который сгенерирован с помощью  JavaScript (например, картинка, созданная с помощью онлайн-сайта для рисования).
• Если представлен HTTP-заголовок Content-Disposition:, и он содержит иное название, у HTTP-заголовка есть преимущество над атрибутом.
• Если этот атрибут установлен и Content-Disposition: установлен на inline, Firefox отдаёт преимущество Content-Disposition, но в тоже время Chrome отдаёт преимущество атрибуту download.
• Этот атрибут соблюдается только на ресурсах с тем же  доменом.

href

Единственный обязательный атрибут для определения ссылки в HTML4, но больше необязательный в HTML5. Упущение этого атрибута создаёт ссылку-заполнитель. Атрибут href указывает ссылку: либо URL, либо якорь. Якорь — это название после символа #, который указывает на элемент (ID (en-US)) на текущей странице. URL не ограничены только ссылками на HTTP, они могут использовать любой протокол, поддерживающийся браузером. Например, file, ftp и mailto работают в большинстве браузеров.

hreflang

Этот атрибут сообщает язык документа по ссылке. Это чисто контрольная информация. Разрешённые значения определены в BCP47 для HTML5 и RFC1766 для HTML4. Используйте этот атрибут, только если задан href.

ping HTML5

Этот атрибут уведомляет указанные в нём URL, что пользователь перешёл по ссылке.

referrerpolicy

Этот атрибут сообщает, какую информацию передавать ресурсу по ссылке:

• "no-referrer" не отправляет заголовок Referer.
• "no-referrer-when-downgrade" не отправляет заголовок Referer ресурсу без TLS (HTTPS). Это стандартное поведение браузера, если не указана иная политика.
• "origin" отправляет такую информацию о текущей странице, как адрес, протокол, хост и порт.
• "origin-when-cross-origin" отправляет другим ресурсам только протокол, хост и порт, а внутри ресурса также отправляет путь. 
• "unsafe-url" отправляет только ресурс и адрес (но не пароли или никнеймы). Это значение небезопасно, так как могут утечь ресурс и адрес с TLS-защищённых ресурсов на небезопасные.

rel

Для ссылок, которые содержат атрибут href, этот атрибут устанавливает отношения между ссылками. Значением является список значений, разделённый пробелами. Значения и их семантика будут зарегистрированы другими сайтами, которые могут иметь произвольное значение к документу автора. Значением по умолчанию является void, если не задано иное. Используйте этот тег, только если задан атрибут href.

target

Этот атрибут определяет, где показать содержимое по ссылке. В HTML4, это название и ключевое слово фрейма. В HTML5, это название или ключевое слово в браузере (например, вкладка, окно или iframe). У следующих ключевых слов специальные значения:

• _self загружает документ в текущем фрейме в HTML4 (или текущей вкладке в HTML5) как текущий. Это значение по умолчанию, если не указано иное значение.
• _blank загружает документ в новой окне в HTML4 или вкладке в HTML5.
• _parent загружает документ в родительском фрейме в HTML4 или в родительской вкладке в HTML5. Если нет родителя, параметр будет вести себя как _self: Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
• _top в HTML4 загружает документ в новом окне, игнорируя другие фреймы. В HTML5 загружает в окне высшего уровня. Если родителя нет, опция ведёт себя как _self.

Используйте этот атрибут только если указан href.

Примечание: Используя target, вы должны добавлять rel="noopener noreferrer", чтобы избежать эксплуатацию API window.opener.

type

Этот атрибут определяет MIME-тип для документа по ссылке. Обычно это используется как контрольная информация, но в будущем браузеры могут добавлять маленькую иконку для медиафайлов. Например, браузер может добавить маленькую иконку мегафона, если тип файла установлен как audio/wav.

Используйте этот атрибут только если указан href.

Устаревшие 

charset Вышла из употребления с версии HTML5

Этот атрибут определяет кодировку документа по ссылке. Значением является разделённый пробелами или запятыми список кодировок. Значением по умолчанию является ISO-8859-1.

Предупреждение: Этот атрибут является устарелым в HTML5 и не должен использоваться. Чтобы достичь такого же эффекта, используйте HTTP-заголовок Content-Type на ссылающемся ресурсе.

coords HTML 4Вышла из употребления с версии HTML5

Для использования с формой объекта, этот атрибут использует разделённый запятыми список чисел для определения координат объекта на странице.

name HTML 4 Вышла из употребления с версии HTML5

Этот атрибут обязателен в определении якоря на странице. Значение имени схоже со значением id и должен быть уникальным идентификатором и состоять из букв и цифр. Согласно спецификации HTML 4.01, и id, и name могут быть использованы с элементом <a>, пока у них идентичные значения.

rev HTML 4 Вышла из употребления с версии HTML5

Этот атрибут определяет обратную ссылку, обратные отношения атрибута rel. Это полезно, чтобы отобразить, откуда пришёл объект как автор или документ.

shape HTML 4 Вышла из употребления с версии HTML5

Этот атрибут используется, чтобы определить выбранный регион для ссылок на источник гипертекста, которые соединены с фигурой для создания изображения-карты. Значения для атрибута — circle, default, polygon и rect. Формат координат зависит от выбранной формы. Для circle — x, y, r, где x и y — пиксельные координаты центра круга и r — радиус в пикселях. Для rect — x, y, w, h, где x и y — координаты верхнего левого угла прямоугольника, а w и h — ширина и высота соответственно. Значениями polygon для координатор формы являются x1, y1, x2, y2… Каждая пара x, y определяет точку в полигоне, с последующей точкой становится прямой линией, и последняя точка объединяется с первой. Значение default для форм требует, чтобы полностью закрытая территория, например, изображение, было использовано.

Примечание: Желательно использовать атрибут usemap для элемента <img> и связанного элемента <map>, чтобы определить горячие точки вместо атрибутов формы.

Нестандартные

datafld 

Этот атрибут определяет название столбца из объекта исходных данных, который принимает связанные данные.

Предупреждение: Этот атрибут нестандартный и не должен использоваться. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как XMLHttpRequest, чтобы динамично заполнять страницу.

datasrc 

Этот атрибут сообщает ID объекта исходных данных, который принимает связанные данные с этим элементом.

Предупреждение: Этот атрибут нестандартный и не должен использоваться. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как XMLHttpRequest, чтобы динамично заполнять страницу.

methods 

Значение этого атрибута предоставляет информацию о функциях, которые могут быть выполнены на объекте. Обычно значения даны HTTP-протоколом, когда он использован, но может (для похожих целей, как для атрибута title) быть полезным для включения контрольной информации в ссылке. Например, браузер может выбрать другой тип рендеринга для ссылки как функцию определённых методов; что-то, что может быть найдено, может иметь другую иконку, или внешняя ссылка может получить индикатор перехода с текущего сайта. Этот элемент не понимается или не поддерживается полностью даже браузером Internet Explorer 4, который определил этот атрибут. Значения methods (MSDN).

urn 

Этот атрибут, предложенный Micosoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё ещё не определено полностью, поэтому этот атрибут не имеет значения. Значения urn (MSDN).

Ссылка на внешний сайт

Создание кликабельной картинки

<a href="https://developer.mozilla.org/ru/" target="_blank">
  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo">
</a>

Результат:

Создания ссылки для написания письма

Создание ссылки с номером телефона

С телефонами, способными выходить в Интернет и ноутбуками, которые привязаны к телефонам, ссылки с номером телефона становятся всё больше и больше полезными.

<a href="tel:+491570156">+49 157 0156</a>

Для дополнительных деталей о протоколе tel, смотрите RFC 2806 и RFC 2396.

Использование

download для сохранения canvas как PNG

Если вы хотите позволить пользователю скачивать HTML canvas как картинку, вы можете создать ссылку с атрибутом download и данные canvas как data: URL:

var link = document.createElement("a");
link.innerHTML = 'download image';

link.addEventListener("click", function(ev) {
  link.href = canvas.toDataURL();
  link.download = "mypainting.png";
}, false);

document.body.appendChild(link);

Вы можете посмотреть на это в действии: jsfiddle.net/codepo8/V6ufG/2/.

BCD tables only load in the browser

Нажатие на <a> приводит (по умолчанию) к фокусировке элемента, но оно может быть разным в зависимости от браузера и ОС.

HTML 3.2 включает в себя только name, href, rel, rev и title.

Атрибут target не работает в браузерах, не поддерживающих фреймы, таких как Netscape 1 generation. Кроме того, target не допускается в «строгих» вариантах XHTML, но разрешён в формах frameset или «переходных» формах.

Рекомендации по JavaScript

Часто якорь используется с событием onclick. Для избежания обновления страницы, href часто устанавливается на #, либо на javascript:void(0). Оба этих значения могут привести к некоторым неожиданным ошибкам во время копирования ссылки или открытия ссылки в новой вкладке или окне. Помните об этом, чтобы сделать юзабилити удобнее, когда пользователи используют якори и вы не допускаете стандартного поведения.

• Другие элементы: <abbr>, <em>, <strong>, <small> (en-US), <cite>, <q> (en-US), <dfn>, <time>, <code>, <var> (en-US), <samp> (en-US), <kbd>, <sub> (en-US), <sup> (en-US), <b>, <i> (en-US), <mark>, <ruby>, <rp> (en-US), <rt> (en-US), <bdo>, <span>, <br>, <wbr>.

Ссылки «href=http://localhost/~~~» в коде HTML на сервере не могут быть получены от клиента

Я новичок в этом мире.

Я создал веб -страницу « example.html»на сервере,
которая содержит следующие ссылки тега .

...
<nav>
    <ol>
        <li><a href="http://localhost/link1.html">link1</a></li>
        <li><a href="http://localhost/link2.html">link2</a></li>
        <li><a href="http://localhost/link3.html">link3</a></li>
    </ol>
</nav>
...

Если я открою эту страницу "http://localhost/example.html" в веб-браузере сервера и нажму на links(link1~link3),, они будут работать.

Проблема в том, что они не WORK в веб-браузере клиента.

Я переадресовал свой серверный компьютер через порт и открыл "example.html" с клиента
через "http://myaddress.com:1234/example.html"

Временно я решил эту проблему, изменив
каждую ссылку в коде сервера, "http://localhost/~~~.html"

до "http://myaddress.com:1234/~~~.html" .

Однако я хочу, чтобы клиент мог получить доступ к каждой ссылке в коде сервера, написанном как "http://localhost/~~~.html"

Это проблема переадресации портов? или что-то еще?

Огромное спасибо.

html

localhost

href

Поделиться

Источник

bk jung    

16 июля 2017 в 12:40

2 ответа

5

Это должно решить проблему, вам не нужно localhost в ваших href. Удалите их из ваших меток привязки.

<nav>
    <ol>
        <li><a href="/link1.html">link1</a></li>
        <li><a href="/link2.html">link2</a></li>
        <li><a href="/link3.html">link3</a></li>
    </ol>
</nav>

OR

Попробуйте подключить порт к localhost href? Клиент должен запускать его локально, чтобы это работало.

<nav>
    <ol>
        <li><a href="http://localhost:1234/link1.html">link1</a></li>
        <li><a href="http://localhost:1234/link2.html">link2</a></li>
        <li><a href="http://localhost:1234/link3.html">link3</a></li>
    </ol>
</nav>

Поделиться

Win    

16 июля 2017 в 12:43

1

Всегда используйте относительные пути, а не абсолютные:

<nav>
    <ol>
        <li><a href="link1.html">link1</a></li>
        <li><a href="link2.html">link2</a></li>
        <li><a href="link3.html">link3</a></li>
    </ol>
</nav>

Как следует из названия, localhost указывает на локальную машину. Поэтому, когда вы включаете его в абсолютный URL, он всегда ищет эти файлы на локальном компьютере. Поскольку эти файлы существуют на сервере, они работают из браузера сервера, но когда вы запускаете его на любом другом компьютере, они терпят неудачу, потому что файлы не существуют на этом другом компьютере.

Поделиться

Racil Hilan    

16 июля 2017 в 12:43

Похожие вопросы:

Все ссылки localhost http перенаправляются на https

Я застрял со странной проблемой. Я новичок php, все мои ссылки на файлы php, Источник изображения, таблица стилей указывают на Https, хотя в коде это http. Моя Веб-страница отлично работает в…

Как превратить текстовые ссылки в HTML ссылок на стороне клиента с помощью javascript

В моей БД я сохранил все ссылки в форме: www.example.com or http://www.example.com Есть ли способ превратить эти текстовые ссылки в HTML ссылок на стороне клиента (например, javascript ) с таким…

Доступ к ‘localhost’ клиента из JavaScript онлайн

именно это я и пытаюсь сделать. Я сделал несколько страниц .html с кодом JavaScript и разместил их на сервере Yahoo. Теперь, когда клиент с определенным браузером просматривает эти веб-страницы, код…

AJAX загрузка внешнего контента HTML отлично работает на localhost, но не на сервере

Я пытаюсь визуализировать контент, сгенерированный файлом php в [jQuery Colorbox][1] через AJAX на моем сайте WordPress. PHP находится на том же сервере в том же домене. Он отлично работает, когда я…

Объект не найден! Запрошенный URL не был найден на этом сервере. localhost

У меня есть типичная настройка A,M,P, и я просто провожу некоторое тестирование на своем сервере localhost для настройки веб-страницы. Я немного новичок в php и динамических сайтах, поэтому я…

html <base> не работает с href по localhost

Мои ссылки выглядят так <link rel=stylesheet href=/utils/style.css /> У меня был свой сайт в main dir, так что это не было проблемой, но когда я переместил все свои файлы в /dir/, я установил…

Ссылки href в моем коде html не будут работать.

Я написал простую веб-страницу в HTML году: <!DOCTYPE html> <html> <body> <img src=http://media.web.britannica.com/eb-media/59/89959-050-6CC4DDA1.jpg alt=WorldMap usemap=#Map…

дайте runtime href ссылки, которая не установлена в исходном коде

Как дать href ссылки, которая установлена во время выполнения, а не в исходном коде html: на веб-странице есть ссылка для скачивания: <a id=downloadLink href=>…</a> но во время…

Некоторые ссылки не могут быть загружены в теге <a href download>

Я могу скачать простые ссылки (например, ‘x.jpg’). Но некоторые ссылки не могут загрузить все, что я делаю. Подобный этому : <a…

Spring Cloud шлюз для изменения HREF статический HTML

У меня есть шлюз Spring и Служба Webflux за ним. Маршрут такой; server: port: 9999 spring: application: name: discovery-service cloud: gateway: routes: — id: route1 predicates: — Path=/1/** uri:…

Формат ссылки для телефонных звонков в мобильных браузераx (href=»tel:…»)

На сегодняшний день большинство мобильных устройств с браузером также являются телефонами! Так почему бы не создавать для телефонных номеров на вашей странице ссылки, кликая по которым вызывалось бы встроенное приложене для звонков. Если вы создаете сайт бизнес руководства, консалтингового агенства или просто продаете пирожки на своем сайте, большинство людей предпочтут позвонить вам в 1-2 тача вместо нудного заполнения формы (особенно на мобильном девайсе).

Мы уже писали об URI-схемах для отправки смс тут.

Первым стандартом, де-факто (скопированным с японских I-MODE стандартов) является использование tel: схемы. Он был предложен в качестве стандарта в RFC 5341, но будьте осторожны, потому что большинство предложенных там параметров не работают на всех устройствах.

Сегодня поддержка tel: URI-схемы есть почти в каждом мобильном устройстве, в том числе в Safari на IOS, Android Browser, WebOS Browser, Symbian браузер, Internet Explorer, Opera Mini и т.п.

Очень простой и лаконичный синтаксис:

html

<a href="tel:+1234567890"> Звоните нам бесплатно! </ a>

href=”tel:…”

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

На десктопе, с установленным Skype (или подобным софтом), система попросит вас подтвердить открытие внешнего приложения, при клике на такую ссылку.

Я рекомендую указывать телефонный номер в международном формате: знак плюс (+), код страны, код местной зоны и номер абонента. Мы ведь иногда действительно не знаем, где наши посетители физически расположены. Если они находятся в той же стране, или даже в том же районе, международный формат также будет работать.

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

html

<a href="callto:12345678">Работает на iPhone и Nokia</a>
<a href="wtai://wp/mc;12345678">Работает на Android</a>
<a href="wtai://wp/mc;+123456789">международный формат для Android</a>

В целом все, что хотелось сказать. Используйте tel: URI-схемы и будет вам счастье 😉

Интернет — хорошо, но личный контакт лучше В Кандалакше торжественно открыли операционный зал для приема налогоплательщиков | ФНС России

Атрибут hreflang для указания языка: полное руководство

Главная / SEO / Атрибут hreflang как его использовать для указания языка

Опубликовано 18 мая 2018

Изменен: 1 июня, 2018

Просмотров: 292

Атрибут hreflang (тег) — это техническое решение для сайтов, которые публикуют один и тот же контент на разных языках. Владельцы многоязычных сайтов хотят, чтобы поисковые машины предлагали людям контент на их родном языке. Допустим, ваш посетитель – голландец, страница ранжируется на английском языке, но есть и её голландская версия.

Вы хотите, чтобы Google показывал в выдаче страницу на голландском для пользователя-голландца. Это как раз та задача, для решения которой был разработан hreflang.

Краткое содержание статьи:

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

Для чего нужны теги hreflang?

Тэг hreflang – это способ повышения в выдаче страниц, которые имеют одну и ту же информацию, но предназначены для разных языков и/или регионов. Вот три самых популярных способа реализации его на практике:

• контент с региональными вариантами вроде en-us и en-gb;
• контент на разных языках, вроде en, de и fr;
• комбинация разных языков и региональных вариантов.

Тэги hreflang используют, как правило, для работы с разными рынками, использующими один и тот же язык. Например, чтобы разграничить регионы США и Великобритании или Германии и Австрии.

Преимущества использования hreflang для SEO

Почему мы вообще говорим про hreflang? Какие преимущества для SEO дает использование тэга? Есть две основные причины реализовать эту возможность, с точки зрения SEO.

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

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

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

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

Что такое hreflang?

Hreflang – это тэг, о котором можно сообщить поисковым машинам тремя разными способами, о чем мы подробнее поговорим позже. При помощи этого кода вы определяете все отличающиеся адреса на сайте, по которым расположен один и тот же контент.

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

Какие поисковые системы поддерживают hreflang?Тэг поддерживается Google и Yandex. Bing не имеет аналога, но поддерживает языковые метатэги.

Что дает атрибут hreflang?

При полноценном внедрении hreflang каждый адрес страницы определяет, какие еще варианты доступны.

Когда пользователь занимается поиском, Google проходит такие шаги:

1. определяет, что хочет ранжировать адресную ссылку;
2. проверяет, есть ли у этой адресной ссылки описание hreflang;
3. представляет пользователю результат с наиболее подходящим для него адресом.

Текущее местоположение пользователя и его языковые настройки определяют самую подходящую ссылку. У пользователя может быть указано несколько языков в настройках браузера (например, английский и русский).

Порядок, в котором эти языки стоят в настройках, определяет самый подходящий языковой вариант.

Следует ли использовать атрибут hreflang?

Разобравшись, что такое hreflang и как он работает, можно понять, нужно ли использовать этот тэг в вашем случае. Он нужен, если:

• у вас есть один и тот же контент на разных языках;
• у вас есть контент, предназначенный для разных географических регионов, разговаривающих на одном и том же языке.

Не имеет значения количество доменов, которые вы используете для размещения контента. Можно ссылаться на разные варианты контента на одном и том же домене, либо перелинковать разные домены.

Подсказка: сначала главная страница! Если вы не уверены, хотите ли распространять действие тэга hreflang на весь сайт, начните с главной страницы! Люди, которые ищут вашу компанию, попадут на правильный вариант контента. Такую реализацию осуществить гораздо проще, он «отловит» значительную часть вашего трафика.

Выбор архитектурного решения

При реализации тэга hreflang главное – не переусердствовать. Допустим, у вас есть три варианта страниц:

• немецкий;
• немецкий, предназначенный для Австрии;
• немецкий, предназначенный для Швейцарии.

Вы можете реализовать языковые версии, используя три атрибута hreflang так:

• de-de, для говорящих на немецком языке пользователей из Германии;
• de-at, для говорящих на немецком языке пользователей из Австрии;
• de-ch, для говорящих на немецком языке пользователей из Швейцарии.

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

Чтобы каждый пользователь, который говорит на немецком и не выбирает de-at или de-ch, гарантированно получил страницу для Германии, измените первый атрибут hreflang на de. Во многих случаях указание только языка без региона – лучшее, что можно сделать.

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

Техническая реализация – основы

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

1. Верные атрибуты hreflang

Атрибут hreflang должен содержать значение, которое состоит из языка в комбинации с регионом. Атрибут языка должен быть записан в формате ISO 639-1 (двухбуквенный код).

Регион указывается по желанию и должен записываться в формате ISO 3166-1 Alpha 2. Точнее говоря, это должен быть официально заданный элемент. Используйте список из Wikipedia, чтобы проверить правильность используемых обозначений языка и региона. Чаще всего на этом этапе ошибки возникают из-за неправильно указанного кода региона.

Неправильный код региона. Google может обрабатывать отдельные распространенные ошибки, связанные с региональными кодами (хотя не стоит на это рассчитывать). Например, поисковая машина может обработать en-uk так же, как и «правильный» en-gb. Но en-eu работать не будет, так как eu не означает страну.

2. Обратные ссылки

Второе правило — обратные ссылки. Вне зависимости от типа реализации, каждому адресу страницы нужны обратные ссылки на другие адреса, указывающие на канонические версии (подробности ниже).

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

3. Ссылка hreflang на себя

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

Выбор технической реализации

Есть три варианта реализации hreflang:

• использование ссылок в <head>;
• использование заголовков http;
• XML-карты сайта.

У каждого варианта есть свои условия использования. Обсудим, когда какой из вариантов использовать.

1. Ссылочные html-элементы для hreflang в <head>

Первый способ реализации hreflang – это ссылочные html-элементы в <head>. Вы добавляете код вроде такого в разделе <head> на каждой странице:

<link rel=»alternate» href=»http://example.com/» hreflang=»en» />
<link rel=»alternate» href=»http://example.com/en-gb/» hreflang=»en-gb» />
<link rel=»alternate» href=»http://example.com/en-au/» hreflang=»en-au» />

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

Это 1,5К обязательной загрузки дополнительного кода на каждой странице, который будет использовать далеко не каждый пользователь. Вдобавок, CSM должна будет сделать несколько вызовов из базы данных, чтобы сгенерировать все эти ссылки.

И все эти действия нужны только для того, чтобы сообщить поисковым системам о нескольких вариантах контента. Вот почему способ не рекомендуется для более-менее крупных сайтов.

2. http-заголовки hreflang

Второй способ реализации hreflang – с помощью http-заголовков. Их применяют для файлов в формате pdf и другого контента не в формате html, который нужно оптимизировать.

Ссылочные элементы отлично работают с html-документами, но не с другими типами контента, так как последние вы не можете включить в параметры этих элементов.

Тут и приходят на помощь http-заголовки. Они должны выглядеть приблизительно так:

Link: <http://es.example.com/document.pdf>;
rel=»alternate»; hreflang=»es»,
<http://en.example.com/document.pdf>;
rel=»alternate»; hreflang=»en»,
<http://de.example.com/document.pdf>;
rel=»alternate»; hreflang=»de»

Проблема с http-заголовками похожа на проблему со ссылочными элементами в <head>: их придется многократно добавлять для каждого запроса.

3. Реализация hreflang с помощью XML- файла Sitemap

Третий вариант реализации hreflang использует разметку XML-файл Sitemap с картой сайта. Речь идет об атрибуте xhtml:link в Sitemap, который добавляет примечание к каждой адресной ссылке. Во многом он работает аналогично <head> с элементами <link>.

Если вам показалось, что ссылочные элементы многословные, с реализацией через XML- файл Sitemap дела обстоят еще хуже. Его разметка требует всего один тэг <url> с двумя другими языками:

<url>
<loc>http://www.example.com/uk/</loc>
<xhtml:link rel=»alternate» hreflang=»en» href=»http://www.example.com/» />
<xhtml:link rel=»alternate» hreflang=»en-au» href=»http://www.example.com/au/» />
<xhtml:link rel=»alternate» hreflang=»en-gb» href=»http://www.example.com/uk/» />
</url>

Вы видите, что в нем есть третья адресная ссылка, в которой страница ссылается на себя, определяя конкретный адрес для варианта en-gb и ссылки для двух других вариантов языка. Две другие адресные ссылки должны быть указаны в Sitemap подобным образом:

<url>
<loc>http://www.example.com/</loc>
<xhtml:link rel=»alternate» hreflang=»en» href=»http://www.example.com/» />
<xhtml:link rel=»alternate» hreflang=»en-au» href=»http://www.example.com/au/» />
<xhtml:link rel=»alternate» hreflang=»en-gb» href=»http://www.example.com/uk/» />
</url>

<url>
<loc>http://www.example.com/au/</loc>
<xhtml:link rel=»alternate» hreflang=»en» href=»http://www.example.com/» />
<xhtml:link rel=»alternate» hreflang=»en-au» href=»http://www.example.com/au/» />
<xhtml:link rel=»alternate» hreflang=»en-gb» href=»http://www.example.com/uk/» />
</url>

Как видно, мы только меняем адресные ссылки в элементе <loc>, поскольку все остальное должно оставаться точно таким же. В этом методе каждая адресная ссылка имеет ссылающийся на себя атрибут hreflang и обратные ссылки, соответствующие другим адресам.

Разметка XML- файла Sitemap вроде этой очень многословная: вам нужно сделать много выводов для большого количества адресных ссылок. Преимущество подобной реализации простое: обычных пользователей эта разметка затрагивать не будет. Вам не придется раздувать размер каждой страницы, а при загрузке не будет идти множество обращений к базе данных для генерации разметки.

Еще одно преимущество добавления hreflang через Sitemap – простота изменения одного файла, по сравнению с изменением всех страниц на сайт. Вам не придется проходить долгую процедуру аутентификации; возможно, вы даже получите прямой доступ к файлу Sitemap.

Другие технические аспекты внедрения hreflang

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

1. hreflang x-default

x-default – это специальный атрибут hreflang, который определяет, куда нужно направить пользователя, если ни один из языков, определенных в других ссылках, не соответствует настройкам браузера.

В ссылочном элементе это выглядит как:

<link rel=»alternate» href=»http://example.com/» hreflang=»x-default» />

Когда атрибут вводился, его описали как предназначенный для «международных посадочных страниц», то есть страниц, на которые вы перенаправляете пользователей на основе их географического местонахождения.

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

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

Ссылка x-default по умолчанию указывала бы на тот же адрес, что и de. Не советуем удалять ссылку на страницу для de, даже если технически получается один и тот же результат. В конце концов, для определения языка на странице de (для Германии) лучше иметь оба варианта. К тому же это облегчает чтение кода.

2. hreflang and rel=canonical

Значения rel=”alternate” hreflang=”x” и rel= ”canonical” могут и должны использоваться вместе. Для каждого языка должна быть ссылка rel=”canonical”, указывающая на себя. Предположив, что мы находимся на главной странице example.com в первом примере, это должно выглядеть как:

<link rel=»canonical» href=»http://example.com/»>
<link rel=»alternate» href=»http://example.com/» hreflang=»en» />
<link rel=»alternate» href=»http://example.com/en-gb/» hreflang=»en-gb» />
<link rel=»alternate» href=»http://example.com/en-au/» hreflang=»en-au» />

Если бы мы были на странице en-gb, произошло бы только изменение для rel=”canonical”:

<link rel=»canonical» href=»http://example.com/en-gb/»>
<link rel=»alternate» href=»http://example.com/» hreflang=»en» />
<link rel=»alternate» href=»http://example.com/en-gb/» hreflang=»en-gb» />
<link rel=»alternate» href=»http://example.com/en-au/» hreflang=»en-au» />

Не делайте ошибку, устанавливая ссылку в тэге с rel=”canonical” на http://example.com/ для страницы en-gb, так как это нарушит правильность реализации атрибута. Очень важно, чтобы ссылки hreflang указывали на канонические версии страниц для каждой языковой версии, потому что эти системы должны работать рука об руку!

Полезные инструменты при реализации hreflang

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

Генератор тэга hreflang

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

Генератор hreflang для XML-файла Sitemap

Компания Media Flow создала генератор hreflang для XML-файла Sitemap. Просто «скормите» ему CSV-файл с адресными ссылками для каждого из языков, и генератор создаст XML-файл. Это первый серьезный шаг при создании карты сайта.

В подготовленном для ввода CSV-файле нужно выделить по колонке на каждый язык. Если вы хотите добавить адресную ссылку для x-default, просто создайте еще одну колонку и назовите её x-default.

Средство для валидации hreflang

Как только вы добавили разметку к своим страницам, стоит проверить их правильность. Если вы решили добавить ссылочные элементы в раздел <head>, вам повезло, так как есть несколько инструментов для валидации атрибута hreflang в этой реализации. Лучшим среди них является DejanSEO.(http://flang.dejanseo.com.au/)

Проверка работоспособности hreflang

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

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

Важно соблюдать два правила:

• когда страница удаляется, проверьте, обновлены ли её аналоги;
• когда страница перенаправляется, измените адресные ссылки на её аналоги.

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

Заключение

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

Постоянно появляются обновления спецификаций, поэтому перед очередным созданием реализации hreflang сверьтесь с документаций, например, в Справке Google.

Новый тег rel=canonical для удаления дубликатов страниц — Devaka SEO Блог

74.2К
просмотров

12 февраля Google анонсировал новый тег canonical, который поможет вам избавиться на сайте от дублированного контента, указывая предпочитаемую версию URL адреса для страницы. Также в этот день ввод нового тега анонсировали компании Yahoo и Microsoft.

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

Теперь вы можете добавить этот тег, для указания вашей версии адреса, внутри тега <head> на страницах с дублированным контентом:

<link rel=»canonical» href=»http://www.example.com/product.php?item=swedish-fish» />

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

Подобный тег будет полезным в основном при использовании различных движков (phpBB, IPB, WordPress, и т.д., напр. сайту ipbskins.ru – разработка дизайна сайта на IPB, приходится использовать длинный robots.txt в целях избежания дублированного контента), создающих множество похожих страниц, например, это могут быть страницы:

печатной версии статьи:
http://site.ru/article01.html?print=true
текстовой версии статей для моб. телефонов:
http://site.ru/lofiversion/article01.html
дублированные из-за недостатка движка:
http://site.ru/articles/?id=1&category=new
http://site.ru/articles/?id=1&tag=keyword
и ряд других…

Этот стандарт может быть адаптирован любой поисковой машиной при индексации сайта.

Для популярного блог-движка WordPress уже разработан плагин canonical, вставляющий тег на нужные страницы. Другие популярные движки для блогов, форумов, интернет-магазинов и т.д. также в ближайшем будущем расширят свою функциональность (следите за обновлениями).

Ответы на некоторые популярные вопросы по тегу:

Является ли rel=“canonical” подсказкой или директивой?
Это подсказка, которую мы берем во внимание и во взаимодействии с другими сигналами вычисляем наиболее релевантную страницу для отображения в поисковых результатах.

Могу ли я использовать относительный путь для указания canonical, например так: <link rel=“canonical” href=“product.php?item=swedish-fish” />?
Да, относительные пути распознаются также, как и в обычном теге <link>. Даже если вы введете тег <base> с ссылкой на документ, тогда относительные пути будут считаться в соответствии с базовым URL.

Это нормально, если канонические адреса содержат не полностью дублированный контент?
Мы позволяем небольшие различия, такие как порядок сортировки в таблице продуктов. Также мы понимаем, что канонические адреса могут парситься роботом в разное время, поэтому все это нормально.

Что если rel=“canonical” возвращает 404 ошибку?
Мы продолжим индексировать ваш контент и использовать эвристический подход, для определения канонического адреса, однако, мы рекомендуем, чтобы вы использовали существующие URL в качестве канонических.

Что если rel=“canonical” ещё не проиндексирован?
Мы стараемся достучаться до канонического URL быстро. Как только мы его проиндексируем, тогда сразу же перерассмотрим подсказку rel=“canonical”.

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

Что если я имею противоречивые сигналы для rel=“canonical”?
Наши алгоритмы мягкие: мы можем следовать по каноническим цепям, однако, мы настоятельно рекомендуем, чтобы вы на страницах указывали единственный канонический адрес, чтобы быть уверенным в оптимальном результате канонизации.

Может ли этот тег для ссылки предложить канонический адрес на совершенно другом домене?
Нет. Чтобы мигрировать на другой домен, 301 редирект более подходящ. В настоящее время Google поддерживает канонизацию внутри поддоменов или внутри одного домена. Таким образом, владельцы сайтов могут указать www.example.com вместо example.com или help.example.com, однако, не могут указать example.com вместо example-widgets.com.

Звучит интересно, но могу ли я увидеть пример?
Да, wikia.com помогла нам, как трастовый тестер. Например, вы замтетите, что исходный код по адресу http://starwars.wikia.com/wiki/Nelvana_Limited содержит rel=canonical http://starwars.wikia.com/wiki/Nelvana.

Два адреса почти идентичны, исключая то, что Nelvana_Limited, первый URL, содержит короткое сообщение возле заголовка. Это хороший пример использования тега в будущем. С rel=canonical, свойства двух адресов обьединяются и поисковые результаты отображают нужную версию.

Если у вас есть какие-либо вопросы по использованию нового тега, вы можете их задать в комментариях на официальном блоге Google для вебмастеров.

От автора блога: Теперь мы имеем ряд преимуществ, умея немного управлять индексацией сайта, а именно:

1. Помимо избавления от естественного дублированного контента (из-за недостатка движка), мы также избавляемся от дублированного контента искусственного, когда конкуренты нам пытаются насолить, добавляя в адурилку страницы с произвольными параметрами в URL.

2. Теперь нет надобности использовать robots.txt для запрета индексации таких страниц, как “печатная версия” и других дубликатов (напр. в WordPress нужно было закрывать путь /teg/) и угождать каждому поисковику отдельно (есть общие стандарты для robots.txt, но есть также и ряд особенностей работы каждого поисковика с этим файлом, поэтому мы раньше не могли предусмотреть запрет индексации некоторых страниц сразу для всех ботов).

3. Мы теперь имеем хороший инструмент для ускорения индексации сайта 🙂

: элемент привязки — HTML: язык разметки гипертекста

HTML-элемент (или элемент привязки ) с его атрибутом href создает гиперссылку на веб-страницы, файлы, адреса электронной почты, местоположения на той же странице или что-либо еще, что URL может адрес. Содержимое внутри каждого должно указывать на назначение ссылки . Если присутствует атрибут href , нажатие клавиши ввода при фокусировке на элементе активирует его.

Атрибуты этого элемента включают глобальные атрибуты.

загрузить

Предлагает пользователю сохранить связанный URL вместо перехода к нему. Может использоваться со значением или без значения:

• Без значения браузер предложит имя файла / расширение, сгенерированное из различных источников:
• Определение значения предлагает его в качестве имени файла. Символы / и \ преобразуются в символы подчеркивания ( _ ).Файловые системы могут запрещать использование других символов в именах файлов, поэтому браузеры при необходимости скорректируют предлагаемое имя.

Банкноты

• загрузка работает только для URL-адресов с одинаковым происхождением или схем blob: и data: .

• Если заголовок Content-Disposition содержит информацию, отличную от атрибута download , результирующее поведение может отличаться:

  • Если в заголовке указано имя файла , он имеет приоритет над именем файла, указанным в атрибуте download .

  • Если в заголовке указано расположение встроенных , Chrome и Firefox 82 и более поздних версий, установите приоритет атрибута и рассматривайте его как загрузку. Версии Firefox до 82 отдают приоритет заголовку и отображают содержимое в строке.

href

URL-адрес, на который указывает гиперссылка. Ссылки не ограничиваются URL-адресами на основе HTTP — они могут использовать любую схему URL-адресов, поддерживаемую браузерами:

• Разделы страницы с URL-адресами фрагментов
• Кусочки медиафайлов с медиафрагментами
• Телефонные номера с тел .: URL
• адресов электронной почты с mailto: URL
• Хотя веб-браузеры могут не поддерживать другие схемы URL-адресов, веб-сайты могут с registerProtocolHandler ()

hreflang

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

пинг

Список URL-адресов, разделенных пробелами. При переходе по ссылке браузер отправит на URL-адреса запросов POST с телом PING . Обычно для отслеживания.

refrerpolicy

Сколько реферера отправлять при переходе по ссылке. См. Referrer-Policy для получения информации о возможных значениях и их последствиях.

отн.

Отношение связанного URL как типов ссылок, разделенных пробелами.

цель

Где отображать связанный URL-адрес, как имя для контекста просмотра (вкладка, окно или