Внешняя ссылка ведёт с вашей страницы на другой домен. В HTML её создаёт тег <a> с обязательным атрибутом href, где указан адрес назначения. Текст между открывающим и закрывающим тегом становится видимой частью ссылки, её называют анкором.
<a href="https://example.com/page">Полезный материал</a>Ломают такую конструкцию чаще всего три вещи: адрес без протокола, непарная кавычка и незакрытый тег. Проверка занимает полминуты: сохраните страницу, откройте её в браузере и кликните по ссылке. Открылся нужный адрес, значит всё собрано верно.
Дальше разберём устройство ссылки, разницу между абсолютным и относительным адресом, вставку через HTML, визуальный редактор и конструктор сайта, ссылки на PDF и документы, типичные ошибки и назначение атрибутов rel.
Что такое внешняя ссылка и из чего она состоит
Гиперссылка состоит из четырёх частей: открывающий тег <a>, один или несколько атрибутов, анкор и закрывающий тег </a>. Внешнюю ссылку от внутренней отличает только адрес: он указывает на чужой домен.
Обязательный атрибут один, это href. Остальные меняют поведение ссылки, но без них она работает: target управляет вкладкой, rel описывает отношения с адресом назначения, title добавляет всплывающую подсказку, download подсказывает браузеру скачать файл.
Атрибут href: адрес, на который ведёт ссылка
Значение href берут в кавычки, двойные или одинарные, главное парные. Внутри может стоять абсолютный адрес с протоколом и доменом либо относительный путь внутри сайта.
<a href="https://example.com/guide">Внешний источник</a>
<a href="/blog/guide">Статья в блоге</a>Пустой href="" или href="#" ведёт на текущую страницу. Так делают заглушки в меню и кнопки «наверх». Внешней ссылкой такой адрес не станет, даже если рядом стоит текст чужого сайта.
Тег <a> без href перестаёт быть ссылкой: браузер не подсвечивает её, переход по Tab не работает, курсор не меняется. Если вставили код, а ссылка «не нажимается», первым делом проверьте наличие href.
target и rel: зачем нужны дополнительные атрибуты
target="_blank" открывает адрес в новой вкладке. Без этого атрибута ссылка откроется в текущей, и посетитель уйдёт с вашей страницы. Для внешних источников новая вкладка часто удобнее, но злоупотреблять не стоит: десять новых вкладок раздражают сильнее, чем один переход назад.
rel описывает отношение ссылки к странице. Самые частые значения: nofollow, noopener, noreferrer. Подробный разбор с критериями применения ниже, в отдельном разделе.
title показывает подсказку при наведении. На поисковую выдачу он не влияет, применяйте для пояснений к неочевидным анкорам вроде «смотреть» или «подробнее».
Абсолютные и относительные ссылки: в чём разница и что выбрать
| Тип адреса | Пример | Где работает | Когда использовать |
|---|---|---|---|
| Абсолютный | https://site.ru/blog/guide | Из любого места | Внешние ссылки, письма, документы, соцсети |
| Относительный от корня | /blog/guide | Только на своём домене | Внутренние ссылки, меню, хлебные крошки |
| Относительный от текущей папки | guide.pdf | Только из файла в той же папке | Документы рядом со страницей |
Для внешних адресов правило простое: полный URL с протоколом https:// и доменом. Такой адрес работает везде: в чужом блоге, в письме, в презентации. Относительный путь /blog/guide на другом сайте приведёт в никуда, потому что папку будут искать на чужом домене.
Копируя адрес из строки браузера, проверьте два момента. Первое: протокол на месте. Второе: в конце не приклеились параметры вида ?utm_source=... или идентификатор сессии. Для внутренних ссылок относительные пути удобнее: при переезде на другой домен они не ломаются.
Как добавить ссылку вручную в HTML
- Откройте файл шаблона или нужный блок в HTML-режиме редактора CMS.
- Найдите место, где должна появиться ссылка.
- Наберите тег: сначала открывающий с адресом, затем анкор, затем закрывающий.
- Проверьте парность кавычек и наличие
</a>. - Сохраните изменения и обновите страницу в браузере.
<p>Полные требования к разметке собраны в
<a href="https://example.com/docs" target="_blank" rel="noopener">документации</a>.</p>Кавычки могут быть двойными или одинарными, но в пределах одного атрибута парными. Незакрытый тег или пропущенная кавычка ломают вёрстку блока: часть текста после ссылки уезжает в анкор, вёрстка съезжает, а иногда страница просто обрезается.
В CMS код вставляют в HTML-режиме. Если набрать тег в визуальном режиме, редактор покажет его как обычный текст или вырежет при сохранении.
Как добавить ссылку через визуальный редактор
- Выделите фрагмент текста, который станет анкором.
- Нажмите кнопку вставки ссылки. В WYSIWYG-редакторах это иконка цепи либо пункт «Вставить ссылку» в контекстном меню по выделению.
- Вставьте адрес в поле URL.
- Если нужно, включите опцию открытия в новой вкладке.
- Подтвердите и сохраните материал.
Интерфейсы различаются, логика одна: выделенный текст превращается в ссылку. После сохранения загляните в HTML-режим и посмотрите, что получилось. Редактор может добавить rel="nofollow" по своим настройкам, открыть адрес в новой вкладке по умолчанию или превратить адрес без протокола в относительный путь. Настройки ссылок часто вынесены в отдельный раздел, а не спрятаны в саму кнопку.
Как добавить ссылку в конструкторе сайта
- Выберите блок, текст, кнопку или изображение.
- Найдите в панели настроек поле «Ссылка» или «Link».
- Выберите тип ссылки: внешняя, страница сайта, файл, якорь, телефон, почта.
- Вставьте адрес и сохраните блок.
- Опубликуйте страницу и проверьте переход на живом адресе.
В конструкторах ссылку вешают не только на текст, но и на кнопку, карточку товара, иконку соцсети. Тип «внешняя» обычно требует полный URL с протоколом, тип «файл» открывает медиатеку. Изменения видны на опубликованной странице, а не в режиме редактирования: в предпросмотре часть переходов может вести на тестовую копию.
Ссылка на PDF и документы: как указать путь правильно
- Загрузите файл в медиатеку CMS или на сервер через FTP либо файловый менеджер.
- Скопируйте прямой адрес файла из медиатеки. Если загружали вручную, соберите путь по фактическому расположению.
- Вставьте адрес в
hrefи добавьте осмысленный анкор: «Скачать гайд в PDF», а не «нажмите здесь». - Опубликуйте страницу и проверьте, что файл открывается или скачивается.
<a href="/files/guide-2026.pdf">Скачать гайд в PDF</a>
<a href="https://site.ru/files/guide-2026.pdf">Скачать гайд в PDF</a>Путь должен совпадать с реальным расположением файла: та же папка, то же имя, тот же регистр символов, то же расширение. Guide.pdf и guide.pdf на сервере под Linux это два разных файла, а на Windows-хостинге регистр часто не важен. Проверяйте на том сервере, где сайт живёт, а не на локальной копии.
Имена файлов лучше писать латиницей без пробелов: guide-2026.pdf. Кириллицу и пробелы браузер закодирует в последовательности вида %20, адрес станет нечитаемым, хотя работать будет. Пробел внутри href без кодирования обрывает адрес на середине.
Атрибут download подсказывает браузеру скачать файл, а не открывать его встроенно. Для файлов с чужого домена подсказка может игнорироваться. Открытие PDF во вкладке или скачивание зависит от настроек браузера, и оба варианта нормальны.
Типичные ошибки, из-за которых ссылки оказываются битыми
| Ошибка | Как выглядит | Как исправить |
|---|---|---|
| Пропущенный протокол | href="example.com/page" | Браузер считает адрес относительным и ищет папку на вашем домене. Дописать https:// |
| Опечатка в домене | https://exmaple.com | Сверить посимвольно, надёжнее копировать из адресной строки |
| Пробел внутри адреса | href="https://site.ru/my page" | Убрать пробел или заменить на %20, имя файла переписать латиницей |
| Непарная кавычка или незакрытый тег | href="https://site.ru/page> | Закрыть кавычку и тег, проверить весь блок |
| Неверный относительный путь | href="guide.pdf" для файла в папке /files/ | Указать реальный путь: /files/guide.pdf |
| Регистр символов в пути | /Files/Guide.pdf вместо /files/guide.pdf | Совпасть с именем на сервере символ в символ |
| Ссылка на удалённую страницу | адрес отдаёт 404 | Обновить URL или снять ссылку |
| Лишние параметры при копировании | ?utm_source=mail&sid=123 | Оставить чистый адрес до знака вопроса |
| Символы из документа | «умные» кавычки, неразрывный пробел | Набрать вручную или вставить как обычный текст |
Отдельная категория проблем приезжает вместе с текстом из Word или Google Docs: фигурные кавычки, неразрывные пробелы, невидимые символы. Такая ссылка выглядит правильно, но не работает. Вставляйте адреса через «Вставить как обычный текст» или перепечатывайте вручную.
Как проверить, что ссылка работает: простой алгоритм
- Сохраните и опубликуйте страницу.
- Откройте её по публичному адресу, а не в предпросмотре.
- Кликните по ссылке и убедитесь, что открылся именно тот адрес, который вы указывали.
- Проверьте содержимое страницы: она доступна без логина, не показывает 404 и не ведёт на главную вместо статьи.
- Повторите клик в режиме инкогнито, чтобы исключить кэш браузера и вашу авторизацию на чужом сайте.
- Для файлов убедитесь, что PDF открывается или скачивается целиком, а не отдаёт пустой документ.
- Отдельно проверьте
target="_blank": ссылка должна открываться в новой вкладке, а исходная страница оставаться на месте.
Клик ловит главное, но не всё. Ссылка может быть видна на десктопе и скрыта на мобильном, может вести на страницу, которая отдаёт код 200 при авторизации и 404 без неё. Если ссылок много, откройте инструменты разработчика, вкладку Network, и посмотрите коды ответов: 200 означает доступность, 301 или 302 редирект, 404 отсутствие адреса, 5xx ошибку сервера. Редирект на посторонний сайт тоже повод проверить, куда именно ведёт адрес.
rel="nofollow" и rel="noopener": когда применять и чего не бояться
nofollow и noopener решают разные задачи. Первый относится к поисковой оценке ссылки, второй к безопасности браузера. Смешивать их в одну «настройку для внешних ссылок» не стоит, хотя в коде они живут в одном атрибуте.
Когда nofollow действительно нужен
rel="nofollow" говорит поисковому роботу, что по этой ссылке не нужно передавать вес и учитывать её как рекомендацию. Практические случаи: платные и партнёрские размещения, пользовательский контент (комментарии, форумы, отзывы), ссылки на источники, за качество которых вы не ручаетесь, служебные переходы вроде «войти», «оплатить», «политика конфиденциальности».
Обычную справочную ссылку на качественный источник закрывать не обязательно. Принцип такой: ставьте nofollow, когда размещение оплачено или когда вы не готовы отвечать за содержимое адреса. Поисковые системы оценивают контекст и качество ссылки, а не сам факт её наличия.
Зачем нужен noopener при target="_blank"
Без noopener открытая вкладка получает доступ к объекту window.opener, то есть к вашей странице. Скрипт на чужом сайте теоретически может подменить адрес в исходной вкладке, пока посетитель читает новый материал. Атрибут разрывает эту связь и стоит одну строку кода.
Современные браузеры во многих случаях подставляют noopener сами при target="_blank", но поведение зависит от браузера и версии. Явное указание надёжнее и ничему не мешает.
<a href="https://example.com/page" target="_blank" rel="noopener">Открыть в новой вкладке</a>rel="noreferrer" дополнительно скрывает адрес вашей страницы в заголовке Referer. Его ставят, когда не хотят раскрывать источник перехода или когда в адресе источника остались внутренние параметры.
Разговоры о «штрафах за внешние ссылки» обычно описывают ситуацию вокруг покупки ссылок, а не обычное цитирование. Ссылка на статью, исследование или документацию вреда не несёт: так работает ссылочное цитирование, и поисковые системы это учитывают. Проблемы возникают у схем с массовой продажей ссылок, скрытыми конструкциями и переходами на дорвеи. Требования Яндекса и Google к ссылочным размещениям различаются, поэтому не переносите правило из одной системы в другую механически, а сверяйтесь с актуальной документацией той системы, которая важна вашему проекту.
Короткий чек-лист перед публикацией ссылки
- Адрес внешней ссылки полный: протокол
https://, домен, путь. - Из скопированного адреса убраны параметры трекинга и идентификаторы сессии.
- Кавычки парные, тег
</a>закрыт, в адресе нет пробелов. - Анкор осмысленный: читатель понимает, куда ведёт клик.
targetиrelвыбраны осознанно, а не по умолчанию редактора.- Файл загружен, путь совпадает с реальным расположением, регистр символов проверен.
- После публикации ссылка проверена кликом, при необходимости в режиме инкогнито.
Когда статей десятки и сотни, ручная проверка каждой ссылки превращается в отдельный этап процесса. SerpJet помогает провести материалы через подготовку, согласование и публикацию в едином процессе, чтобы ссылки и вставки не терялись между правками. Финальный клик по ссылке после публикации всё равно лучше оставить человеку: автоматизация ускоряет рутину, но не отменяет проверку результата.