Noopener: что это такое и как это влияет на ваш сайт WordPress?

В этой статье мы отвечаем на вопрос «что такое noopener?» а также расширяя то, что он делает, как удалить атрибут и как он приносит пользу вашему контенту WordPress для таких вещей, как SEO и партнерский маркетинг.

Продолжайте читать, чтобы узнать все о значении атрибута noopener!

Оглавление:

• Что такое ноупенер? И как это выглядит?
• Что на самом деле делает атрибут rel="noopener"?
• Noopener против noreferrer против nofollow
• Плюсы и минусы ноупенера
• Как добавить, удалить и деактивировать noopener

Что такое ноупенер? И как это выглядит?

Noopener — это значение HTML-атрибута rel="" . Он автоматически или вручную добавляется к любым исходящим ссылкам, которые вы добавляете в WordPress. Значение noopener, часто используемое для элементов <area> и <form> в HTML, чаще всего используется (особенно в WordPress) при реализации элементов <a> , также известных как. ссылки или якоря гиперссылок.

Сам по себе элемент гиперссылки <a href=""> позволяет создавать гиперссылки на что угодно, от веб-страниц до адресов электронной почты. Вот и все — нет включенных атрибутов, которые сообщают гиперссылке об открытии в новой вкладке при нажатии. Однако пользователи WordPress могут установить флажок, чтобы гиперссылка открывалась в новой вкладке при нажатии. Когда этот флажок установлен, WordPress вставляет в код target=" _blank" и предлагает браузеру открыть ссылку в новой вкладке. В качестве бонуса значение rel="noopener" также оказывается в коде для защиты от угроз безопасности.

Иногда значение сочетается с «noreferrer». Мы обсудим, как они работают вместе и чем они отличаются, чуть позже в этой статье.

В традиционном редакторе WordPress вы можете выделить немного текста и вставить ссылку. Во всплывающем окне вы можете добавить URL-адрес, текст ссылки и установить флажок « Открыть ссылку в новой вкладке ». Если этот флажок не установлен, это означает, что ссылка не будет открываться в новой вкладке при нажатии, но также и то, что WordPress оставляет гиперссылку без rel="noopener" .

Как видно из текстового редактора, для гиперссылки создается стандартный элемент <a href=""> без rel="noopener" .

Установка флажка и нажатие кнопки « Ввод » для гиперссылки полностью меняет это.

Снова переключившись в текстовый редактор, мы видим атрибут rel="noopener" ближе к концу элемента <a href=> . Вы также заметите, что WordPress добавляет атрибут target="" (со значением _blank ), который является кодом HTML, который фактически заставляет ссылку открываться в новой вкладке.

Значения noopener WordPress выглядят немного иначе для пользователей визуального редактора Gutenberg; вместо этого каждый новый URL-адрес показывает переключатель «Открыть в новой вкладке».

Если оставить переключатель « Выкл .», то появится базовый элемент <a href=""> , в котором гиперссылка открывается на той же вкладке (и мы не видим никакого rel="noopener" ).

Но включение переключателя « Вкл. » активирует автоматическую вставку значений из WordPress.

Взглянув на код, вы увидите эту ссылку с rel="noopener" и сопоставите ее со значением noreferrer .

Вы никогда не увидите атрибут rel="noopener" , если не добавите ссылку на WordPress и не откроете редактор текста/кода. Вы узнаете, что WordPress добавил атрибут, если откроете ссылку в новой вкладке, но WordPress не отображает никаких ссылок на значения noopener, пока вы не откроете представление кода. Также возможно добавить атрибут вручную, перейдя к коду и введя его самостоятельно. Но WordPress уже упрощает это с помощью визуального флажка/переключателя, так что в этом нет необходимости.

Что на самом деле делает атрибут rel="noopener" ?

Теперь, когда мы знаем, что такое атрибут rel="noopener" и как он выглядит, мы объясним, что он делает для ваших ссылок, вашего веб-сайта и взаимодействия между вашим сайтом и теми, на которые вы ссылаетесь.

Короче говоря, этот атрибут является ответом на уязвимость системы безопасности, когда сайты с вредоносным кодом получают частичный доступ к веб-сайтам, которые ссылаются на них. Атака работает только тогда, когда ссылка открывается в новой вкладке. Все новые ссылки на вкладки фактически предоставляют доступ к ссылающемуся сайту (вашему сайту) через свойство JavaScript, называемое window.opener . В результате ваша случайная ссылка на вредоносный веб-сайт фактически предоставляет контроль боту или веб-мастеру, который планирует редактировать вашу страницу, устанавливать вредоносное ПО или совершать любые другие атаки.

Когда эта угроза стала заметной, WordPress действовал быстро, автоматически добавляя атрибут rel="noopener" всякий раз, когда пользователи создают ссылки, которые открываются в новых вкладках.

Почему? Поскольку атрибут rel="noopener" блокирует связанному сайту доступ к функции JavaScript window.opener , устраняя угрозу. Gutenberg также включает значение noreferrer , которое отключает связанные (потенциально вредоносные) сайты от того, чтобы видеть, что ваш сайт вообще ссылается на них. Таким образом, он устраняет дыру в безопасности, возникающую при открытии ссылок в новых вкладках, а noreferrer скрывает информацию о вашем сайте при открытии ссылок в новых вкладках.

Вас также могут заинтересовать:

• Действительно ли скорость сайта WordPress важна для SEO?
• Как оптимизировать изображения для вашего веб-сайта и заставить их работать на всех устройствах (адаптивные изображения для мобильных устройств, настольных компьютеров, планшетов)
• Что такое поисковое намерение? Как определить намерение улучшить SEO

Noopener против noreferrer против nofollow

Noopener, noreferrer и nofollow — все это потенциальные значения для вставки в атрибут rel="" чаще всего при создании гиперссылок.

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

Вот как их отличить:

новичок

• Значение HTML, которое вы можете поместить в атрибут rel="" .
• Закрывает брешь в безопасности JavaScript window.opener , защищая сайты, которые могут непреднамеренно ссылаться на вредоносные URL-адреса.
• WordPress автоматически добавляет атрибут rel="noopener" , когда владелец сайта создает ссылку для открытия в новой вкладке (со значением target="_blank" ).
• Вы часто будете видеть значение в тандеме со значением noreferrer внутри rel="" . Они выполняют разные работы, но работают над одним и тем же типом безопасности.
• Значение помогает с безопасностью. Вопреки слухам, это никак не влияет на SEO.

нереферер

• Значение HTML, которое вы можете поместить в атрибут rel="" .
• Не позволяет браузеру отправлять адрес ссылающейся веб-страницы на связанный веб-сайт. Это означает, что у вредоносных сайтов есть еще одно препятствие при попытке доступа к вашему сайту.
• В Gutenberg WordPress автоматически добавляет значение noreferrer, когда вы вставляете ссылку для открытия в новой вкладке. Вы должны добавить noreferrer вручную, если используете традиционный редактор.
• Значение noreferrer часто указывается прямо перед значением noopener внутри rel="" , например: rel="noreferrer noopener" .
• Значение noreferrer также способствует безопасности, скрывая URL-адрес реферера от других сайтов. Это значение не влияет на поисковую оптимизацию, но может увеличить сообщаемые цифры трафика для прямого трафика, если сайт будет просматриваться с помощью аналитического программного обеспечения.
• Многие специалисты по партнерскому маркетингу считают, что значение noreferrer вредит результатам SEO, поскольку поисковые системы хотят видеть заявления об отказе от партнерских ссылок (чтобы не скрывать, что вы рекомендуете что-то только потому, что вам платят). Однако нет никаких доказательств того, что noreferrer влияет на SEO для партнерских ссылок.
• Однако в отношении партнерских ссылок это влияет на то, что в зависимости от вашего партнерского партнера они могут не иметь возможности приписывать посетителей, которых вы направили, к вашей учетной записи. Параметр noreferrer запрещает им это делать. Поэтому, если вы хотите быть уверены, что ваши партнерские ссылки отслеживаются должным образом, у вас не должно быть noreferrer на них.

не следует

• Значение HTML, которое можно поместить в атрибут rel="" .
• Сообщает поисковым системам, чтобы они не посылали «ссылочный вес» на веб-сайт, на который вы ссылаетесь. Высококачественный ссылочный вес может улучшить рейтинг сайта, на который вы ссылаетесь, в поисковых системах. Это потому, что поисковые системы видят ценность во многих сайтах, ссылающихся на определенный контент. Веб-мастера отказываются отправлять ссылочный вес на определенные веб-сайты/страницы по разным причинам.
• Чаще всего это применяется, когда ссылки размещаются в комментариях и на форумах, поскольку вам не нужна куча вредоносных ссылок в разделе комментариев.
• Некоторые сайты используют значение nofollow для внутренних ссылок, чтобы не сообщать поисковым системам, что они создают слишком много внутренних ссылок. Однако нет никаких доказательств того, что это имеет значение.
• Nofollow влияет на SEO, но только при использовании партнерских ссылок или перенаправлении на спонсируемый контент или что-то, за продвижение чего вам платят. По сути, поисковые системы не хотят давать сайтам ссылочный вес только потому, что они платят за трафик. Таким образом, рекомендуется использовать атрибуты rel="nofollow" при ссылках на партнерские страницы.

Плюсы и минусы ноупенера

Многие люди путают noopener с nofollow, и обычно именно поэтому они считают, что атрибут rel="noopener" необходим, если вы хотите улучшить SEO или использовать партнерские ссылки. Но он не может помочь ни с тем, ни с другим. Однако у него есть несколько других преимуществ.

Плюсы

• Значение noopener блокирует доступ вредоносных сайтов к объекту JavaScript window.opener . window.opener обеспечивает частичный доступ к связанному сайту при открытии в новой вкладке, поэтому он помогает устранить эту угрозу.
• Это повышает безопасность, но при этом позволяет открывать ссылки на новых вкладках, что, по мнению многих людей, делает работу пользователя более приятной.
• WordPress автоматически вставляет атрибут при создании ссылки, которая открывается в новой вкладке. Он делает это, если вы используете Gutenberg или традиционный редактор WordPress, по существу удаляя любую ручную работу с вашей стороны.
• Вы всегда можете вставить атрибут в код, если хотите.
• Это не влияет на SEO, партнерские ссылки или производительность вашего сайта.

Минусы

• Это сбивает с толку, когда вы пытаетесь различить noopener, noreferrer и nofollow. Некоторые пользователи даже начинают добавлять значения noopener ко всем ссылкам, надеясь улучшить SEO. Но это просто пустая трата времени.
• Есть простой способ вообще избежать дыры в безопасности window.opener — просто открыть ссылки на той же вкладке. Таким образом, значение не так уж необходимо, поскольку угрозы можно избежать в первую очередь.
• Технически noreferrer уже ограничивает доступ к window.opener , поэтому многие утверждают, что noopener избыточен.

Как добавить, удалить и деактивировать noopener в WordPress

Вы можете использовать переключатель «Открыть в новой вкладке», чтобы добавить или удалить значение noopener для отдельной гиперссылки в WordPress.

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

Чтобы перейти к редактору кода в Гутенберге, нажмите кнопку параметров (три вертикальные точки), затем кнопку « Редактор кода» .

Здесь вы можете добавить значение внутри rel="" . Удаление просто требует, чтобы вы удалили текст noopener. Вы также можете удалить весь атрибут rel="" , если хотите.

В классическом редакторе WordPress вы можете добавить или удалить значение noopener, щелкнув ссылку в визуальном редакторе. Выберите значок « Редактировать» (карандаш) .

Это позволяет вам редактировать саму ссылку, но вы хотите щелкнуть значок « Параметры ссылки» (шестеренка) , чтобы настроить дополнительные параметры.

Чтобы добавить noopener, установите флажок « Открыть ссылку в новой вкладке ». Чтобы удалить noopener из предыдущей ссылки, просто снимите этот флажок.

Классический редактор WordPress предоставляет вкладку «Текст» для изменения страницы/почтового кода. Это еще один способ добавить или удалить значения noopener для ссылок. Нажмите на вкладку «Текст» и найдите ссылку, которую хотите отредактировать. Либо добавьте атрибут rel="noopener" перед закрывающей скобкой для <a href=""> , либо удалите текст noopener, чтобы удалить его из ссылки.

Удалите функциональность noopener со всего вашего сайта WordPress.

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

Однако, если у вас есть веская причина деактивировать noopener на всем сайте, найдите файл functions.php вашей темы и вставьте в него следующий код:

add_filter( 'tiny_mce_before_init' , 'wpb_disable_noopener' ); function wpb_disable_noopener ( $mceInit ) { $mceInit[ 'allow_unsafe_link_target' ]= true ; return $mceInit; }
 Язык кода: PHP ( php )

Это не позволяет WordPress добавлять атрибут rel="noopener" всякий раз, когда вы решите открыть ссылку в новой вкладке.

Резюме

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

Мы также подчеркнули разницу между noopener, noreferrer и nofollow, особенно то, что nofollow — единственное значение rel="" , имеющее какое-либо отношение к SEO или аффилированному маркетингу. Наконец, мы объяснили, как использовать, добавлять и удалять значения noopener с вашего сайта WordPress.

Если у вас есть какие-либо вопросы или мысли об использовании rel="noopener" в WordPress, оставьте нам сообщение в разделе комментариев ниже!