Как атрибуты ссылок rel=»noopener» и «nofollow» влияют на SEO и безопасность

Представьте, что каждая ссылка на вашем сайте – это дверь. Обычная ссылка ведет посетителя в другую комнату в вашем же доме. А открывающаяся ссылка в новой вкладке (target="_blank") — это дверь, ведущая в совсем другое здание. Но что если бы, открывая дверь в другое здание, вы автоматически давали ее владельцу ключ от своей? Звучит опасно, не правда ли?

Приблизительно так работают ссылки без правильных атрибутов. Эти маленькие, часто незаметные дополнения к тегу <a> играют огромную роль в безопасности, производительности и SEO вашего сайта. В сегодняшней статье я расскажу, что означают noopener, noreferrer, nofollow и другие и как их правильное использование может защитить вас и улучшить ваши позиции в Google.

target="_blank": Удобство, скрывающее опасность

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

1. Проблема безопасности (Tab-nabbing): Открывшаяся страница получает частичный доступ к вашей странице через объект window.opener. Это позволяет злоумышленникам с помощью простого JavaScript перенаправить вашу вкладку на фишинговый сайт (например, поддельную страницу входа), пока пользователь отвлекся на новую вкладку.
2. Проблема производительности: Новая вкладка, даже если она с другого сайта, выполняется в том же процессе, что и ваша страница. Если на ней выполняется «тяжелый» скрипт, он может «подвесить» и ваш сайт, ухудшая пользовательский опыт.

Спасатели: rel="noopener" и rel="noreferrer"

Чтобы нейтрализовать риски, связанные с target="_blank", существуют специальные значения атрибута rel.

rel="noopener"

Это главный защитник от «tab-nabbing». Этот атрибут предписывает браузеру открыть ссылку без предоставления доступа к объекту window.opener. Простыми словами, он разрывает связь между вашей и новой вкладкой, делая невозможными любые манипуляции с вашей страницей. Это тоже решает проблему производительности.

rel="noreferrer"

Этот атрибут делает все то же, что и noopener, но с одним дополнением: он скрывает информацию о том, откуда пришел пользователь. Когда человек переходит по ссылке, браузер обычно отправляет HTTP-заголовок Referer, сообщающий новому сайту адрес страницы, с которой был осуществлен переход. Этот заголовок удаляет атрибут noreferrer.

Золотое правило №1: Если вы используете target="_blank", всегда добавляйте rel="noopener noreferrer". WordPress, например, делает это автоматически.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Пример ссылки</a>

Атрибуты для SEO: nofollow, sponsored, ugc

Если предыдущая пара атрибутов отвечала за безопасность, то эта группа – прямой инструмент для взаимодействия с поисковиками.

rel="nofollow"

Это инструкция для поисковых роботов (например, Googlebot), говорящая: «Не переходи по этой ссылке и не передавай ей вес (PageRank) моей страницы». По сути вы говорите, что не можете поручиться за контент, на который ссылаетесь.

Эволюция `nofollow`: sponsored и ugc

В 2019 году Google расширил атрибут nofollow, введя два новых значения, чтобы лучше понимать природу ссылок:

• rel="sponsored": Создан специально для рекламных, спонсорских или любых других платных ссылок. Его использование помогает Google идентифицировать коммерческие связи.
• rel="ugc" (User-Generated Content): Предназначен для контента, созданного пользователями. Это комментарии в блогах, сообщения на форумах и т.д. Этот атрибут помогает бороться со спамом.

Google рекомендует использовать именно эти новые атрибуты, когда это уместно. Однако nofollow остается действительным и может использоваться как общий вариант, когда вы не хотите передавать вес ссылке, но она не является ни спонсорской, ни пользовательской. Можно также комбинировать атрибуты, например: rel="nofollow sponsored".

Сравнительная таблица атрибутов

Вместо вывода: Маленькие атрибуты — большое влияние