Оптимизация ссылок на сайте

При создании веб-сайтов важно учитывать безопасность и SEO-оптимизацию. Один из аспектов, который часто упускается из виду, — это обработка ссылок, ведущих на сторонние сайты. В этой статье мы рассмотрим, как и зачем добавлять атрибуты target="_blank" и rel="noopener noreferrer nofollow" для таких ссылок.

Зачем использовать `target="_blank"`

Атрибут target="_blank" указывает браузеру открыть ссылку в новом окне или вкладке. Это удобно для пользователей, так как они могут оставаться на вашем сайте, не теряя доступ к нему при переходе по внешней ссылке.

Зачем использовать `rel="noopener noreferrer nofollow"`

При разработке веб-сайтов важно учитывать безопасность и конфиденциальность пользователей, особенно при открытии ссылок в новой вкладке. Для этого в HTML используются атрибуты noopener, noreferrer и nofollow.

Атрибут `noopener`

Атрибут noopener используется для предотвращения доступа новой вкладки к объекту window.opener исходного окна. Это важно по следующим причинам:

Предотвращает доступ к window.opener: Новая вкладка не сможет взаимодействовать с исходной страницей, что защищает от атак, таких как фишинг.
Улучшает безопасность: Защищает ваше приложение от потенциальных атак через открытые вкладки.
Увеличивает производительность: Разрывает связь между окнами, снижая нагрузку на ресурсы.

<a href="https://example.com" target="_blank" rel="noopener">example.com</a>

Атрибут `noreferrer`

Атрибут noreferrer используется для скрытия информации о реферере и включает поведение noopener:

Скрывает реферера: Целевой сайт не узнает, откуда пришёл пользователь, что защищает конфиденциальность.
Включает noopener: Предотвращает доступ к window.opener, обеспечивая дополнительную безопасность.

<a href="https://example.com" target="_blank" rel="noreferrer">example.com</a>

Атрибут `nofollow`

Атрибут nofollow используется для указания поисковым системам, что они не должны передавать вес ссылки на целевой сайт:

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

<a href="https://example.com" rel="nofollow">example.com</a>

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

Пример кода

Вот пример JavaScript-кода, который автоматически добавляет эти атрибуты к ссылкам на вашем сайте:


document.addEventListener('DOMContentLoaded', function() {
        var links = document.querySelectorAll('a');
        links.forEach(function(link) {
            var href = link.getAttribute('href');
            if (href && href.trim() !== '') {
                var isInternalOrSpecialLink = /^(#|mailto:|tel:|javascript:)/i;
                var isHttpLink = /^https?:\/\//i;
                if (isHttpLink.test(href) && !href.startsWith(window.location.origin) && !isInternalOrSpecialLink.test(href)) {
                    link.setAttribute('target', '_blank');
                    link.setAttribute('rel', 'noopener noreferrer nofollow');
                }
            }
        });
      });

Куда вставить этот скрипт?

Чтобы скрипт работал, его нужно вставить в HTML-файл вашего сайта. Лучше всего разместить его перед закрывающим тегом </body>. Вот пример, как это может выглядеть:


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ваш сайт</title>
</head>
<body>
    <!-- Содержимое вашего сайта -->

    <script>
        document.addEventListener('DOMContentLoaded', function() {
        var links = document.querySelectorAll('a');
        links.forEach(function(link) {
            var href = link.getAttribute('href');
            if (href && href.trim() !== '') {
                var isInternalOrSpecialLink = /^(#|mailto:|tel:|javascript:)/i;
                var isHttpLink = /^https?:\/\//i;
                if (isHttpLink.test(href) && !href.startsWith(window.location.origin) && !isInternalOrSpecialLink.test(href)) {
                    link.setAttribute('target', '_blank');
                    link.setAttribute('rel', 'noopener noreferrer nofollow');
                }
            }
        });
      });
    </script>
</body>
</html>

Заключение

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

Оптимизация ссылок на сайте

Зачем использовать target="_blank"

Зачем использовать rel="noopener noreferrer nofollow"

Атрибут noopener

Атрибут noreferrer

Атрибут nofollow