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

При создании веб-сайтов важно учитывать безопасность и 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)) {
                      // Проверяем, не был ли уже установлен rel
                      if (!link.hasAttribute('rel')) {
                          link.setAttribute('rel', 'noopener noreferrer nofollow');
                      } else if (!link.getAttribute('rel').includes('noopener')) {
                          link.setAttribute('rel', link.getAttribute('rel') + ' noopener noreferrer nofollow');
                      }
                      link.setAttribute('target', '_blank');
                  }
              }
          });
      });
    

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

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

Заключение

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

Отзывы