Как открыть ссылку в новой вкладке на сайте и в браузере

Чтобы открыть ссылку в новой вкладке HTML-страницы, добавьте тегу <a> атрибут target="_blank". Для явной защиты связи между страницами укажите rel="noopener". Если вы просто читаете чужой сайт, используйте Ctrl+клик или Cmd+клик на Mac. Владельцу сайта доступны также настройки CMS и JavaScript, но окончательный выбор между вкладкой и окном остается за браузером.

Что вам потребуется

Для изменения ссылки на своем сайте подготовьте один из вариантов доступа:

• Доступ к HTML-коду страницы, если вы редактируете разметку вручную.
• Доступ к редактору ссылок CMS или конструктора, если вы собираете страницу визуально.

Сохраните исходный код ссылки перед изменениями. Для открытия ссылки на чужом сайте доступ к редактору не нужен.

Как открыть ссылку в новой вкладке HTML-страницы

Атрибут target задает контекст, в котором браузер открывает документ. В HTML5 значение _blank допустимо для обычных ссылок.

Добавьте target="_blank" к одной ссылке

Допустим, что у вас есть следующая ссылка:

<a href="https://example.com/">Открыть сайт</a>

Измените ее, чтобы она выглядела следующим образом:

<a href="https://example.com/" target="_blank" rel="noopener">Открыть сайт</a>

1. Откройте HTML-код страницы и найдите нужный тег <a> по тексту ссылки.
2. Добавьте атрибуты target="_blank" и rel="noopener" внутрь открывающего тега. Если атрибут rel уже есть, допишите noopener к его значениям через пробел.
3. Сохраните страницу и откройте опубликованную версию в браузере.
4. Нажмите ссылку обычным левым кликом. Браузер откроет отдельную вкладку или окно, сохранив исходную страницу.

Чтобы вернуть обычный переход, удалите target="_blank". При наличии общего <base target="_blank"> задайте этой ссылке target="_self".

Значение _blank не гарантирует именно вкладку. Браузер выбирает вкладку или окно с учетом своих настроек. Разбор атрибута доступен в документации MDN по элементу a.

Настройте все ссылки через base

Элемент <base> позволяет задать общую цель для ссылок страницы. Добавьте его в секцию <head>:

<head>
  <meta charset="utf-8">
  <title>Пример страницы</title>
  <base target="_blank">
</head>

После сохранения нажмите несколько ссылок без собственного атрибута target. Они будут использовать общую цель _blank.

Не применяйте этот способ ко всему сайту без разбора. Он затронет внутренние переходы, ссылки-якоря и формы без собственного target. Для исключений задавайте target="_self", а для отмены общего поведения удалите элемент <base>. Если на странице уже есть <base>, измените существующий элемент вместо добавления второго.

Как открыть ссылку в новом окне через JavaScript

Метод window.open() подходит для открытия страницы по действию пользователя. Передайте noopener третьим аргументом, чтобы отключить связь с исходным окном.

<button type="button" id="open-page">Открыть сайт</button>
<script>
  document.getElementById('open-page').addEventListener('click', () => {
    window.open('https://example.com/', '_blank', 'noopener');
  });
</script>

Вставьте пример в HTML-страницу, сохранив скрипт после кнопки. Замените адрес своим и нажмите кнопку в браузере. Страница назначения откроется отдельно.

Вызывайте метод непосредственно в обработчике клика. Вызов после таймера или длительного ожидания может заблокировать защита от всплывающих окон. Для обычного перехода предпочтительнее тег <a>: он работает без JavaScript и поддерживает привычные команды браузера.

Если нужно запросить отдельное окно, передайте параметры его размера:

window.open('https://example.com/', '_blank', 'noopener,popup,width=800,height=600');

Браузер может изменить размеры, открыть вкладку или заблокировать окно. Скрипт не получает полного контроля над интерфейсом пользователя. Подробности описывает справка MDN по window.open(). Чтобы отменить поведение примера, удалите кнопку и связанный скрипт.

Как настроить открытие ссылки в WordPress и конструкторе

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

Ссылка в редакторе WordPress

Для настройки через HTML измените разметку блока, содержащего нужную ссылку. Сохраните исходный тег в отдельную заметку перед правкой.

1. Откройте запись или страницу в редакторе WordPress.
2. Выберите блок с нужной ссылкой и откройте его HTML-представление.
3. Найдите тег <a> по тексту ссылки или адресу в href.
4. Добавьте в открывающий тег target="_blank".
5. Добавьте rel="noopener". Если rel уже есть, допишите noopener через пробел внутри его кавычек.
6. Сохраните изменения записи или страницы.
7. Откройте опубликованную страницу и нажмите ссылку. Исходная страница должна остаться открытой.

В настройках самой ссылки также можно задать открытие в новой вкладке. Нажмите текстовую ссылку в редакторе и откройте ее параметры. Если нужной настройки нет, измените HTML блока по этим шагам.

Для отмены восстановите сохраненный тег и сохраните страницу. Если вы меняли поведение через параметры ссылки, отмените там открытие в новой вкладке.

Ссылка в Tilda и других конструкторах

В Tilda и других визуальных конструкторах начните с редактирования самой ссылки. Для текста выделите фразу и откройте инструмент вставки ссылки. Для кнопки откройте ее параметры и найдите поле адреса.

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

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

1. Если ссылка находится в HTML-блоке, выделите этот блок в редакторе страницы. Откройте редактирование его содержимого: вам нужно поле с HTML-кодом, где виден тег <a>. Если вы работаете с исходным HTML-файлом, откройте его в текстовом редакторе.
2. Найдите ссылку по ее тексту или адресу из атрибута href.
3. Скопируйте исходный тег в отдельную заметку для отката.
4. Добавьте в открывающий тег <a> атрибут target="_blank".
5. Добавьте rel="noopener". Если rel уже есть, допишите noopener через пробел внутри его кавычек.
6. Сохраните код и опубликуйте измененную страницу.
7. Откройте опубликованную страницу и нажмите ссылку обычным кликом. Адрес назначения должен открыться отдельно, сохранив исходную страницу.

Например, ссылка с текстом «Условия участия» после изменения выглядит так:

<a href="https://example.com/" target="_blank" rel="noopener">Условия участия</a>

Сохраните свой адрес в href и прежний текст ссылки.

Если ссылка создана обычным визуальным блоком без доступа к разметке, передайте владельцу сайта или администратору адрес страницы, текст ссылки и этот пример. Попросите применить атрибуты к существующей ссылке либо предоставить доступ к ее HTML-коду. Создавать новый HTML-блок для изменения чужой ссылки не нужно.

Для отмены выключите переключатель в параметрах ссылки. Если вы меняли код, восстановите сохраненный тег и повторно опубликуйте страницу.

Как защитить исходную страницу от подмены

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

Современные браузеры неявно применяют поведение noopener к ссылкам с target="_blank".

Поэтому отсутствие явного rel уже не означает автоматическую уязвимость такой ссылки. Все же указывайте rel="noopener" явно: так защитное намерение видно в коде. Это также помогает старым браузерам, которые поддерживают значение, но еще не применяют его автоматически. Браузер без поддержки noopener проигнорирует это значение.

Для window.open() передавайте опцию noopener отдельно. Не переносите правило для HTML-ссылок на все способы открытия окон.

Значения nofollow, sponsored и ugc не отключают window.opener. При необходимости сочетайте их с noopener через пробел.

Не добавляйте noreferrer только ради открытия вкладки. Он скрывает источник перехода от сайта назначения и влияет на аналитику переходов. При этом noopener сам по себе не меняет передачу заголовка Referer.

Поведение защитного значения описывает документация MDN по noopener.

Как открыть ссылку в новой вкладке или окне самостоятельно

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

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

Что можно настроить в Chrome и поиске Google

Для разового открытия ссылки в новой вкладке Chrome используйте Ctrl/Cmd+клик, среднюю кнопку или контекстное меню.

Настройки всплывающих окон управляют разрешениями сайтов на создание окон. Они не заменяют настройку цели каждой обычной ссылки.

У поиска Google есть отдельные настройки поведения результатов. Откройте настройки самого поиска и найдите опцию открытия результатов в отдельном окне. Если она доступна, включите ее и сохраните изменение. Затем нажмите результат поиска: исходная выдача должна остаться открытой.

Эта настройка относится к поисковой выдаче, а не ко всем сайтам. Если опции нет, удерживайте Ctrl или Cmd при клике по результату. Чтобы вернуть прежнее поведение, отключите ту же опцию.

Что делать, если вкладки открываются отдельными окнами

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

• Отпустите Shift и повторите клик. Проверьте, не застряла ли клавиша: сочетание Shift+клик открывает новое окно.
• Откройте ту же ссылку через контекстное меню, выбрав новую вкладку. Если способ работает, проблема связана с обычным кликом или обработчиком сайта.
• Если проблема появилась после установки расширения, временно отключите его в разделе управления расширениями Chrome. Повторите клик; затем включите расширение обратно, если поведение не изменилось.
• Если окно появляется только на одном сайте, скопируйте адрес ссылки. Вставьте его в новую вкладку вручную, чтобы обойти обработчик открытия окна.
• Если вы случайно вытащили вкладку в отдельное окно, перетащите ее за заголовок обратно на полосу вкладок основного окна.

На своем сайте дополнительно проверьте обработчики window.open(). Удалите параметры popup, width и height, если отдельное окно не нужно. Затем повторите обычный клик по опубликованной странице.

Когда новая вкладка оправдана

Внутреннюю навигацию обычно оставляют в той же вкладке. Так посетитель сохраняет привычную историю переходов и может воспользоваться кнопкой «Назад». Новая вкладка начинает собственную историю: она не содержит предыдущих переходов исходной страницы.

Отдельная вкладка полезна, когда посетителю важно сохранить текущую работу:

• Человек заполняет форму и открывает условия или справочный материал.
• Посетитель открывает документ или PDF, продолжая работать с основной страницей.
• Пользователь обращается к внешнему источнику во время выполнения задания.

Сам факт внешней ссылки не требует новой вкладки. Выбирайте поведение по задаче посетителя.

Как предупредить посетителя об открытии новой вкладки

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

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

<a href="https://example.com/" target="_blank" rel="noopener">
  Условия участия (откроются в новой вкладке или окне)
</a>

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

Для одной ссылки используйте target="_blank" rel="noopener". Для обычной навигации сохраняйте переход в текущей вкладке. JavaScript оставьте для действий, которым действительно нужна программная логика.

Перед публикацией проверьте ссылку обычным кликом и с клавиатуры. Предупреждение должно быть понятно еще до перехода.