Как сделать внешние ссылки на сайте: HTML и проверка

Внешнюю ссылку на сайте делают элементом <a> с полным адресом назначения в href и понятным текстом перехода. Нужны опубликованная страница, точный адрес назначения и возможность изменить текст или HTML на своём сайте. Ниже вы создадите обычную ссылку, решите, нужна ли новая вкладка и отметка для рекламы, затем проверите переход на опубликованной странице.

Что подготовить перед добавлением ссылки

Возьмите конечный адрес целевой страницы, а не только адрес главной сайта. Откройте его в отдельной вкладке: страница должна показывать именно обещанный материал. Для обычной внешней ссылки используйте полный адрес с протоколом HTTPS. Если конструктор сайта даёт поле «Ссылка», вставляйте туда адрес без HTML-тега; если вы редактируете код, добавляйте элемент <a>. Основу синтаксиса и назначение href показывает справочник MDN по элементу a.

• Текст ссылки назовите по назначению: «инструкция по установке» или «условия доставки», а не «здесь». Читатель должен понимать результат перехода до клика.
• Проверьте, что адрес начинается с https://, а домен написан без подменённых символов. Особенно внимательно сверяйте ссылки на вход, оплату и скачивание.
• Если страница назначения требует входа, прямо предупредите об этом рядом со ссылкой. Иначе проверка из вашего аккаунта создаст ложное впечатление, что переход доступен всем.

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

Как вставить внешнюю ссылку в HTML

Поместите адрес в href, а между открывающим и закрывающим тегами напишите название страницы назначения. Самый простой пример открывается в той же вкладке. Такой HTML можно вставить в редактор кода страницы; в визуальном редакторе достаточно выделить текст, нажать добавление ссылки и вставить тот же URL.

<p>Подробности есть в <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a">справочнике HTML-ссылок MDN</a>.</p>

Сохраните страницу и откройте именно опубликованную версию. Наведите указатель на ссылку или скопируйте её адрес через контекстное меню: получившийся URL должен совпадать с выбранной страницей. Google описывает, почему обычный <a href> с осмысленным текстом понятнее поисковому роботу, чем кликабельный <span> или адрес, спрятанный в обработчике нажатия.

По теме: Полноэкранный режим сайта: кнопка, выход и проверка

Нужна ли новая вкладка

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

<a href="https://example.org/guide" target="_blank" rel="noopener">Руководство на другом сайте (новая вкладка)</a>

target="_blank" открывает новую вкладку или окно по решению браузера. rel="noopener" явно закрывает доступ новой странице к исходной через window.opener; современные браузеры обычно применяют такое поведение и без явного значения, но атрибут делает намерение понятным в коде. Если требуется скрыть адрес исходной страницы в заголовке Referer, используйте noreferrer осознанно: он меняет передачу этого заголовка, а значит может повлиять на аналитику переходов. Подробности есть в справке MDN по noopener и по rel.

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

Когда добавлять sponsored, ugc или nofollow

Обычной редакционной ссылке на источник специальная отметка не нужна. Если размещение оплачено или связано с рекламой, Google рекомендует rel="sponsored". Для ссылок, которые добавили пользователи в комментариях или на форуме, рекомендуется ugc. Значение nofollow применяют, когда другие варианты не подходят и вы не хотите связывать сайт с целевой страницей. Эти значения и допустимые сочетания перечислены в официальном руководстве Google.

1. Определите происхождение ссылки: редакционная рекомендация, оплаченная публикация или пользовательский ввод.
2. Редакционную ссылку оставьте обычной. Для оплаченной добавьте sponsored; для пользовательской выберите ugc с учётом правил площадки.
3. Проверьте, что отметка стоит на элементе <a> нужной ссылки, а не на всей странице. Не добавляйте nofollow ко всем внешним ссылкам автоматически.

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

По теме: Как сделать сайт для проекта: этапы и результат

Как проверить ссылку после публикации

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

• Адрес после клика ведёт на нужный домен и нужную страницу; нет ошибки 404, страницы входа вместо материала или неожиданного перенаправления.
• Название ссылки описывает содержимое назначения и остаётся различимым с клавиатуры: пройдите до неё клавишей Tab и активируйте Enter.
• Если задана новая вкладка, она действительно открывается, а читатель предупреждён. Если стоит рекламная или пользовательская отметка, проверьте её в исходном HTML опубликованной страницы.
• Проверьте мобильный экран: длинный текст ссылки не должен закрывать другие элементы, а соседние ссылки должны быть различимы при касании.

Что делать, если переход не работает

Идите от видимого симптома к причине. Если браузер открывает папку на вашем домене, проверьте, не потерян ли протокол HTTPS у внешнего адреса. Если открывается чужой сайт, но не тот материал, сравните полный URL после перенаправления с адресом в редакторе. Если ссылка работает у вас, а у коллеги ведёт на вход, откройте её без авторизации и уточните требование доступа. Если визуально текст похож на ссылку, но не открывается с клавиатуры, проверьте, что это именно <a href>, а не декоративный элемент с обработчиком клика.

Когда редактор автоматически переписывает URL или стирает rel, откройте опубликованный HTML и посмотрите получившийся элемент. В конструкторе без доступа к HTML используйте его штатные настройки для ссылки и рекламной пометки. Если такой настройки нет, не обещайте, что атрибут применился: выберите редактор с нужным управлением или согласуйте другой способ размещения.

По теме: Как сделать информационный сайт: рубрики и проверка

Когда этот способ не подходит

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

Частые вопросы

Можно ли вставить ссылку без знания HTML?

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

Нужно ли ставить nofollow на каждую внешнюю ссылку?

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

Почему ссылка работает только в моём браузере?

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