Как сделать, чтобы страница открывалась в новой вкладке в WordPress?

Открытие ссылок в новой вкладке браузера — распространенная практика в веб-разработке, направленная на улучшение пользовательского опыта и решение определенных задач SEO.

Саммари статьи

ChatGPT

Google AI

Grok

Perplexity

Повышение удобства пользователя и удержание на сайте

Основная причина — сохранение текущего контекста пользователя. Когда посетитель переходит по внешней ссылке, открывая ее в той же вкладке, он покидает ваш сайт. Чтобы вернуться, ему необходимо использовать кнопку «Назад» в браузере. Открытие ссылки в новой вкладке позволяет пользователю ознакомиться с внешним ресурсом, не теряя при этом исходную страницу вашего сайта. Это особенно важно для ссылок на внешние источники, документацию или партнерские ресурсы.

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

SEO-преимущества открытия ссылок во внешних вкладках

Хотя прямой корреляции между атрибутом target="_blank" и ранжированием в поисковых системах нет, косвенное влияние на SEO присутствует. Удержание пользователя на сайте и увеличение времени его пребывания (Dwell Time) являются положительными поведенческими факторами, которые могут учитываться поисковыми алгоритмами.

Кроме того, при переходе по внешней ссылке в той же вкладке показатель отказов (Bounce Rate) для исходной страницы может увеличиться, так как сессия пользователя на вашем сайте формально прерывается. Открытие в новой вкладке помогает снизить этот показатель для страниц, содержащих много внешних ссылок.

Способ 1: Использование встроенного редактора WordPress (Gutenberg и Classic Editor)

WordPress предоставляет интуитивно понятные инструменты для управления ссылками непосредственно в редакторе контента.

Открытие ссылок в новой вкладке в редакторе Gutenberg

Редактор блоков Gutenberg является стандартом для современных версий WordPress.

1. Выделите текст или изображение, которое должно стать ссылкой.
2. Нажмите на иконку ссылки (скрепка) на панели инструментов блока.
3. Введите URL-адрес в появившемся поле.
4. После ввода URL нажмите на стрелку вниз (или иконку настроек ссылки) рядом с полем ввода.
5. Активируйте переключатель «Открывать в новой вкладке» (Open in new tab).
6. Нажмите Enter или иконку «Применить» для сохранения ссылки.

Открытие ссылок в новой вкладке в классическом редакторе

Если вы используете классический редактор (Classic Editor), процесс также прост:

1. Выделите текст или изображение для ссылки.
2. Нажмите кнопку «Вставить/изменить ссылку» (иконка скрепки) на панели инструментов.
3. В появившемся окне введите URL.
4. Нажмите на иконку шестеренки («Параметры ссылки»).
5. В дополнительных параметрах установите флажок «Открывать ссылку в новой вкладке».
6. Нажмите «Обновить».

Проверка результата: как убедиться, что ссылка открывается в новой вкладке

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

Способ 2: Использование HTML-кода

Для более гибкого контроля или при работе с кодом напрямую (например, в виджетах «HTML-код» или при редактировании шаблонов темы) можно использовать HTML.

Редактирование HTML-кода страницы или записи

В редакторе Gutenberg вы можете переключиться в режим редактирования HTML для конкретного блока (Опции блока -> Редактировать как HTML) или для всей записи (Верхнее меню редактора -> Опции -> Редактор кода).

В классическом редакторе переключитесь на вкладку «Текст» (рядом с вкладкой «Визуально»).

Добавление атрибута target=»_blank» к ссылке

Стандартный HTML-тег для ссылки — <a>. Чтобы ссылка открывалась в новой вкладке, к этому тегу необходимо добавить атрибут target со значением _blank.

<a href="https://example.com">Текст ссылки</a>

Для открытия в новой вкладке модифицируем тег:

<a href="https://example.com" target="_blank">Текст ссылки</a>

Важное замечание по безопасности: При использовании target="_blank" для ссылок на внешние ресурсы, особенно если вы не полностью доверяете им, рекомендуется добавлять атрибут rel="noopener noreferrer". Это предотвращает потенциальные уязвимости безопасности (например, фишинг через window.opener).

• noopener: Запрещает новой вкладке доступ к объекту window.opener исходной страницы.
• noreferrer: Предотвращает передачу HTTP-заголовка Referer на целевой сайт.

Пример HTML-кода с ссылкой, открывающейся в новой вкладке

Полный и безопасный вариант HTML-кода:

<p>Для получения дополнительной информации посетите <a href="https://external-resource.com/data-analysis-trends" target="_blank" rel="noopener noreferrer">авторитетный источник по анализу данных</a>.</p>

Способ 3: Использование плагинов WordPress

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

Обзор популярных плагинов для открытия ссылок в новых вкладках

Хотя конкретные названия плагинов могут меняться, обычно их можно найти в репозитории WordPress по запросам типа «open external links in new tab», «link manager» или «target blank». Функционал таких плагинов часто включает:

• Автоматическое добавление target="_blank" ко всем внешним ссылкам.
• Возможность исключить определенные домены.
• Добавление rel="noopener noreferrer" для безопасности.
• Управление внутренними ссылками (хотя для них открытие в новой вкладке обычно не рекомендуется).

Настройка и использование плагина: пошаговая инструкция

1. Установите и активируйте выбранный плагин через раздел «Плагины» -> «Добавить новый».
2. Перейдите в настройки плагина (обычно они находятся в меню «Настройки» или имеют собственный пункт в консоли WordPress).
3. Сконфигурируйте опции согласно вашим требованиям (например, включите автоматическое добавление атрибута для внешних ссылок).
4. Сохраните изменения.

Преимущества и недостатки использования плагинов

Преимущества:

• Автоматизация: Не нужно вручную редактировать каждую ссылку.
• Массовое применение: Легко применить правило ко всем существующим и будущим ссылкам.
• Дополнительные опции: Некоторые плагины предлагают расширенный контроль.

Недостатки:

• Дополнительная нагрузка: Как и любой плагин, он добавляет нагрузку на сайт.
• Потенциальные конфликты: Возможны конфликты с темой или другими плагинами.
• Избыточность: Для простого добавления target="_blank" установка плагина может быть излишней.

Рекомендации и заключение

Выбор способа зависит от ваших потребностей и технических навыков.

Когда следует открывать ссылки в новой вкладке, а когда – нет

• Использовать target="_blank" рекомендуется для:
  • Ссылок на внешние ресурсы (другие сайты).
  • Ссылок на скачиваемые файлы (PDF, DOCX, ZIP и т.д.).
  • Ссылок на страницы с вспомогательной информацией (например, справочные материалы), которые пользователь может захотеть держать открытыми параллельно.
• Не рекомендуется использовать target="_blank" для:
  • Внутренних ссылок (навигация по вашему сайту). Это нарушает привычное поведение пользователя и может дезориентировать.
  • Ссылок в основном навигационном меню.

Советы по оптимизации пользовательского опыта

• Консистентность: Придерживайтесь единого подхода к открытию ссылок на всем сайте.
• Информирование: Можно визуально отличать ссылки, открывающиеся в новой вкладке (например, добавляя иконку внешней ссылки), хотя это необязательно.
• Безопасность: Всегда используйте rel="noopener noreferrer" вместе с target="_blank" для внешних ссылок.

Заключение и краткий обзор рассмотренных способов

Открыть ссылку в новой вкладке в WordPress можно несколькими способами:

1. Встроенный редактор: Просто и удобно для отдельных ссылок через интерфейс Gutenberg или Classic Editor.
2. HTML-код: Гибкий способ для ручного контроля, требует добавления target="_blank" (и rel="noopener noreferrer").
3. Плагины: Автоматизируют процесс для всех внешних ссылок, но добавляют зависимость от стороннего кода.

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