Description

rel=noopener>https://hozyindachi.ru/rel-noopener-noreferrer-chto-eto/

Что ?

**Просто о безопасности: Глубокое использование атрибутов `rel= »noopener noreferrer »` и что это значит для вашего сайта**

—

**Что же такое `rel=noopener` и `noreferrer`?**
Если вы занимаетесь веб-разработкой или продвижением сайта, скорее всего, уже встречали эти слова. Эти атрибуты в HTML-коде ссылок — это не просто технический хлам, а важные инструменты для защиты вашего сайта и улучшения пользовательской безопасности. Давайте разберемся, почему они нужны и как они работают на практике.

—

### **Почему «простые» ссылки могут быть опасны?**
Если ваша ссылка выглядит так:
« `html
Переход
« `
… то это потенциальная угроза. Расскажем по-простому, **что может произойти**:
– Если пользователь переходит по ссылке, исходная страница остается открытой. Если автор ссылки злой, он может заставить новый сайт «влезть» в исходный код вашего сайта через JavaScript (например, при помощи `window.opener`). Это позволяет вредоносному сайту изменять ваш контент, кукисы или перенаправлять посетителей.

**Как это решают атрибуты `noopener` и `noreferrer`:**
– **`rel= »noopener »`** — отключает связь между новой вкладкой (ссылкой) и вашей страницей. Теперь вредоносный скрипт не может взаимодействовать с вашим сайтом.
– **`rel= »noreferrer »`** — не передает HTTP-заголовок `Referer`, то есть не указывает, что переход на внешний сайт был сделан у вас. Это защищает приватность посетителя и ваши данные.

Часто их используют вместе: `rel= »noopener noreferrer »`.

—

### **Почему их нужно ставить всегда?**
Если вы используете `target= »_blank »` для открытия ссылки в новом окне — добавляйте эти атрибуты! Без них вы подвергаете сайт риску:
– **Атаки на JavaScript**.
– Утечка данных по рефереру (например, конкурент может знать источник трафика).

Всего лишь нужно добавить:
« `html
Ссылка
« `

—

### **SEO и аналитика: мифы и реальность**
Если вы думаете, что это «съест» вес ссылки для поисковиков — стоп!
– **`nofollow`** — уже существует отдельный атрибут, который отключает передачу веса. `noopener noreferrer` не влияют на SEO-вес, но:
– Убедитесь, что **никаких других** `rel`-атрибутов (например, `nofollow`) вы не отменяете случайно.
– **Аналитика**: переходы через `noreferrer` могут отображаться как прямой трафик («прямые поисковые системы»), но это не ухудшает статистику — это просто другой формат отчетности.

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

—

### **SEO-оптимизаторы и WordPress:** как автоматизировать всё это?
1. **В WordPress** начиная с версии 4.7.4:
– Система сама добавляет `rel= »noopener »` при вставке ссылок с `target= »_blank »`. Но для полной безопасности **вручную добавляйте `rel= »noopener noreferrer »`**.
– Если вдруг захотите убрать эти атрибуты — **не нужно!** Это ухудшит безопасность.

2. **Вручную для статичных сайтов**:
Просто добавьте их к каждой ссылке с `target= »_blank »`.

—

### **Ответы на частые вопросы:**
– **Почему нужен `noreferrer`, если `noopener` уже есть?**
Первый — для старых браузеров. Некоторые (например, IE) поддерживают только `noreferrer`, который выполняет функции обоих.

– **Больше не нужно писать `target= »_blank »`?**
Нет, если вы хотите, чтобы страница открывалась в новом окне. Атрибуты лишь убирают риски.

– **Влияют ли на индексацию ссылок?**
Нет. Только `nofollow` подрывает передачу «силы» поисковикам, но это совсем другая история.

—

### **Заключение**
Добавление `rel= »noopener noreferrer »` — простая, но эффективная мера безопасности, которая:
✅ **Защищает посетителей** от атак.
✅ **Скрывает реферера**, сохраняя приватность.
✅ **Совместимо с SEO** — нет ухудшений ранжирования.

Не ждите с этим до «когда-нибудь», включите атрибуты в код сразу. Ваш сайт и юзеры скажут спасибо!

А вы уже используете `noopener noreferrer`? Расскажите в комментариях, как это повлияло на вашу аналитику или безопасность! 🔒🌐

—

**Теги поста:** SEO, веб-безопасность, атрибуты HTML, WordPress, target= »_blank ».
*Вдохновлено материалами веб-разработчиков и SEO-экспертов: [hozyindachi.ru](https://hozyindachi.ru), [Life Webmaster](https://life-webmaster.ru), Stack Overflow и других.*

*P.S. Надеюсь, это статья поможет сэкономить ваши нервы и защитить ваш проект от неприятных сюрпризов. Всегда в безопасности!* 🛡️

—
С уважением,
Ваш блог по веб-знаниям.

P.P.S. **Бонус:** Если хотите посмотреть, какие ссылки в вашем сайте уязвимы, проверьте публикуемый HTML через инструменты разработчика в браузере. Атрибутов должно быть минимум `target= »_blank » + rel= »noopener noreferrer »`.