noopener, noreferrer и nofollow

Если вы занимаетесь веб-разработкой или поисковой оптимизацией (SEO), скорее всего, вы сталкивались с терминами noopener, noreferrer и nofollow. Что такое noopener noreferrer? Как насчет nofollow? В этом посте мы объясняем их все и их значение для SEO и веб-безопасности.

Вступление

Все три термина (noopener, noreferrer и nofollow) являются значениями атрибута rel тега ссылки в HTML. Возможно, nofollow является наиболее известным среди веб-разработчиков и SEO experts.

Тег <a> ссылки обычно используется в HTML для определения URL/ссылки. Например, рассмотрим следующую строку кода.

 

<a href="https://pavefilippov.ru">
Нажмите чтобы посетить сайт.
<a>

 

Вы можете видеть, что используется атрибут href (href из гипертекстовой ссылки), который используется, и что значением этого атрибута является веб-адрес домашней страницы Point Jupiter. Далее следует текст, который отображается вам как пользователю. В зависимости от вашего CSS и браузера этот текст может быть подчеркнут, окрашен по-разному или и то, и другое.

Тэг ссылки может иметь множество различных атрибутов, один из которых — rel (отн. rel из RELationship). Ключевой темой этого сообщения в блоге являются noopener, noreferrer и nofollow — все три из них являются значениями атрибута rel.

Снова рассмотрим следующую строку кода.

 

<a href="https://pavefilippov.ru"
rel="noopener noreferrer nofollow"
target="_blank">Нажмите чтобы посетить сайт.
</a>

 

Вы можете быстро заметить три значения rel атрибута. Но теперь вы также можете увидеть целевой атрибут с _blank значением. Эта часть кода указывает веб-браузеру открыть эту ссылку в новой вкладке.

И это основная причина, по которой используются значения типа noopener и noreferrer. Это также является основной причиной потенциальных проблем безопасности и фишинга.

Давайте обсудим их более подробно и их важность для SEO и безопасности, а также когда вы должны добавлять rel, добавлять nofollow и каково значение добавления rel noopener.

Что такое noopener?

Когда вы используете target=" _blank", происходит нечто интересное. Страница, на которую вы ссылаетесь, получает частичный доступ к странице ссылки. Он делает это через window.openerобъект.

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

Использование target _blank может привести к проблемам с безопасностью. Фото Маркуса Списке на Unsplash.

Это может быть использовано для фишинговых атак. Рассмотрим следующий сценарий.

Вы создаете вредоносный веб-сайт и размещаете на нем вирусный контент. Затем вы делитесь этим веб-сайтом в социальных сетях или других источниках, которые открывают внешние ссылки, используя расширение target="_blank". Facebook является ярким примером здесь.

Ничего не подозревающий пользователь нажимает на ссылку, и ваша веб-страница открывается в новой вкладке. В этот момент ваш вредоносный веб-сайт теперь контролирует предыдущую вкладку («Facebook»). С помощью window.opener.locationон переходит на новый сайт — скажем, на форму входа, имитирующую экран входа в Facebook с сообщением: «Ваш предыдущий сеанс Facebook истек. Пожалуйста, войдите в систему еще раз, чтобы продолжить использование Facebook».

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

Это всего лишь гипотетический случай, поскольку Facebook использует rel="noopener" в своих target=" _blank" ссылках. Но вы поняли.

Подробнее

Использование noopener эффективно говорит браузеру открыть ссылку в новой вкладке, не предоставляя контекстный доступ к веб-странице, которая открыла ссылку. Это достигается за счет того, что свойство window.opener не устанавливается, что возвращает нулевое значение.

Указывает браузеру открыть ссылку, не предоставляя новому контексту просмотра доступ к документу, который его открыл, — не устанавливая window.opener в открытом окне (он возвращает null).

Таким образом, rel="noopener" и его значение никак не влияют на поисковую оптимизацию (SEO). Это SEO-агностик. Но его стоит использовать в тех случаях, когда вы имеете дело со ссылками с целевым пробелом.

Что такое noreferrer?

Аналогично по своей функции noopener, noreferrerтакже предотвращает манипулирование window.openerобъектом вновь открытым сайтом. Но, кроме того, noreferrerне позволяет браузеру при переходе на другую страницу отправлять адрес ссылающейся веб-страницы.

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

Опять же, noreferrerэто также не влияет на SEO, но может исказить цифры в вашей аналитике и программном обеспечении для отслеживания, сообщая о большем прямом трафике.

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

Итак, когда вы должны использовать noreferrerи когда noopener? Я предлагаю вам рассмотреть возможность использования обоих. Большинство современных браузеров поддерживают noopener, но в некоторых случаях, если они noopenerне поддерживаются, вы можете использовать noreferrer.

Это означает, что с практической точки зрения имеет смысл использовать их оба для поддержки старых браузеров. Но лучшим подходом было бы вообще избегать использования target="_blank". Если только у вас нет веских причин для его использования.

Что такое nofollow?

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

В общем, когда одна страница ссылается на вашу — она передает свой ссылочный вес — это означает, что это повышает доверие к вашему сайту и сигнализирует поисковым системам, что они ценят ваш сайт. По сути, вы можете считать это одобрением. Если веб-страница с высоким авторитетом ссылается на вас — она поддерживает вас, и Google/Bing сочтет это фактором ранжирования. Google использует термин PageRank как меру количества и качества ссылок.

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

Введите rel="nofollow". Так же, как его кузены noopener noreferrer, nofollow является значением атрибута rel. Когда вы добавите это значение, оно будет сигнализировать поисковым системам о том, что вы не хотите передавать ваш ссылочный вес/PageRank странице, на которую вы ссылаетесь.

 

<a href="https://pavefilippov.ru" rel="noopener noreferrer nofollow"
target="_blank">Нажмите чтобы посетить сайт.
</a>

 

В приведенной выше строке кода мы помещаем все три значения — добавляя nofollow значение, мы сигнализируем Google, что PageRank/ссылочный вес не передается на веб-сайт pavelfilippov.ru .

Когда следует использовать nofollow?

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

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

Немного о терминологии — noopener noreferrer nofollow

Иногда вы заметите, что люди упоминают noopener тег или noreferrer тег. В других случаях вы можете определить rel noreferrer атрибут. Хотя они понятны большинству веб-разработчиков, стоит отметить следующее.

• noopener, noreferrer, и nofollow не являются тегами или атрибутами. Это значения атрибутов.
• rel это не тег. Это атрибут тега ссылки.
• <a> является тегом HTML. Как таковой он имеет атрибуты (т.е. rel), и эти атрибуты имеют значения ( noopener noreferrer nofollow)

Вывод

Есть три основных значения rel атрибута тега ссылки. Они noreferrer, noopener, и nofollow.

• rel="noopener" вы используете для всех ссылок, открывающихся в новых вкладках, используя расширение target _blank. Существуют последствия для безопасности, если вы не используете noopener для своих ссылок, открывающихся в новых вкладках. Злоумышленник может использовать window.opener для изменения содержимого и местоположения исходной страницы.
• rel="noreferrer" может служить той же цели, что и noopener, особенно в старых браузерах. Следовательно, имеет смысл использовать их оба. Кроме того, noreferrer это может повлиять на вашу аналитику и сообщить о трафике как о прямом, а не о реферальном.
• rel="nofollow" сообщит поисковым системам, чтобы они не передавали ссылочный вес на связанную страницу, и она не будет передавать PageRank. Вы можете рассматривать его как значение, которое используется, когда вы хотите сделать ссылку на какую-то другую страницу, но не «одобряете» ее. Это единственное значение rel в этом списке, которая оказывает ощутимое влияние на усилия SEO.