Target="_blank" — очевидная польза и неочевидный вред

Атрибут target тега <a> известен каждому оптимизатору, т. к. существует с первых версий HTML. Он предназначен для указания, как открывать ссылку: в текущей вкладке/фрейме или в новой. То есть, он позволяет изменить стандартное поведение ссылок — открытие в той же вкладке.

Казалось бы, раз все знают, какой смысл писать об этом? Но на практике мы столкнулись с тем, что многие оптимизаторы:

  1. Не уделяют внимание данному атрибуту. Об этом говорит наша статистика по проектам, в которых не указан target="_blank" для внешних ссылок.
  2. Не знают об одной важной особенности данного атрибута.

О том, что нужно знать про target="_blank", мы расскажем в этой статье.

Польза target="_blank"

Сохраняем пользователей

По умолчанию все ссылки сайта открываются в текущей вкладке браузера. Это касается и ссылок на другие сайты. Здесь появляется риск потери пользователей, которые навсегда уходят с вашего на внешний сайт. Например, уходят с карточки товара на сайт производителя и там "залипают".

target="_blank" полезно использовать для всех внешних ссылок

Как это происходит?

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

Здесь как раз на помощь приходит атрибут target. Он позволяет принудительно открывать ссылки в новых вкладках браузера. Посмотрите, как это работает (нажимать левой кнопкой мыши):

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

<a href="site.ru" target="_blank">Внешняя ссылка</a>

Удерживаем внимание

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

target="_blank" полезно использовать и для некоторых внутренних ссылок

Вопрос-ответ по target="_blank"

Чем отличается target="blank" и target="_blank"?

target="_blank" — открывает все ссылки в разных вкладках, target="blank" — все в одной новой вкладке.

Если у ссылок указан атрибут target="_blank" (с подчёркиванием), то все они будут открываться в разных вкладках. Если на странице несколько ссылок с атрибутом target="blank" (без подчёркивания), то все они будут открываться в одной отдельной вкладке. Первый вариант в большинстве случаев удобнее для пользователей, второй — применяется на ваше усмотрение.

Есть ли альтернативы?

Да.

Некоторые сайты используют JavaScript для открытия ссылок в новых вкладках. Например, такой вариант (вместо https://saitreport.ru подставить своё значение):
<a href="https://saitreport.ru" onclick="var otherWindow = window.open(); otherWindow.opener = null; otherWindow.location = this.href; return false;">внешняя ссылка</a>

Данный скрипт можно оформить в виде отдельной функции, которая срабатывает на всех внешних ссылках.

Валидно ли использовать?

Да, кроме XHTML.

Атрибут target был исключён из XHTML. С тех пор атрибут считается невалидным. Но в HTML 5, атрибут был снова реабилитирован, поэтому его использование не противоречит современным стандартам.

Не страдает ли юзабилити?

Скорее нет, чем да.

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

Как найти все внешние ссылки без target="_blank" на сайте?

Для этой цели мы сделали в Сайтрепорте новый отчёт Внешние без target="_blank"Отчёт доступен как в интерфейсе, так и в виде CSV выгрузки. 

Отчёт Внешние ссылки без target="_blank" в Сайтрепорте

Стоит отметить, что ссылки на поддомены Сайтрепорт считает внешними. Здесь вам стоит решить самим, ставить для них target="_blank" или нет.

Помимо этого, вы сможете найти все внешние ссылки, циклические, ссылки-картинки и множество других срезов в отчётах Сайтрепорта.

Проверить сайт на ошибки

Target="_blank" + rel="noopener" = Безопасность

В использовании target="_blank" есть одна особенность. Страницы, открытые через ссылки с этим атрибутом, выполняются в одном процессе браузера вместе с родительской страницей. Это плохо по двум причинам:

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

Подробнее с данной проблемой можно ознакомиться по ссылкам:

Чтобы избежать таких нежелательных последствий для всех внешних ссылок с атрибутом target="_blank", необходимо использовать атрибут rel="noopener". Данный атрибут разрывает связь родительской и дочерней страницы, и они начинают выполняться в разных процессах браузера.

Атрибут noopener можно использовать с атрибутом nofollow, если вы не хотите передавать вес стороннему сайту:
<a href="site.ru" target="_blank" rel="nofollow noopener">Внешняя ссылка</a>

Как найти все внешние ссылки с атрибутом target="_blank", но без rel="noopener" на сайте?

Об этом мы уже позаботились и сделали в Сайтрепорте отчёт Внешние ссылки с target="_blank" без rel="noopener". Отчёт доступен как в интерфейсе, так и в виде CSV выгрузки.

Отчёт Внешние ссылки с target="_blank" без rel="noopener" в Сайтрепорте

Также в отчёте по ссылкам вы можете просмотреть содержимое атрибутов rel и target всех ссылок сайта — как внутренних, так и внешних.

Как исправить найденные ошибки?

Для популярных CMS есть плагины, позволяющие управлять поведением ссылок на сторонние сайты. Например, для WordPress это WP External Links. Если ваша CMS не имеет такой встроенной функции или плагина, то можно написать собственный скрипт или расставить атрибуты вручную, если на сайте немного страниц.

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

Проверить сайт на ошибки

3 комментария

  1. Константин 27.12.2018 Ответить
    • Команда СайтрепортАвтор 27.12.2018 Ответить
    • Константин 29.03.2023 Ответить

Оставить комментарий

Ваш адрес email не будет опубликован.