Различия

Показаны различия между двумя версиями страницы.


Предыдущая версия
a [2024/12/13 15:53] (текущий) – [SEO атрибуты nofollow, noreferrer, noopener, sponsored, ugc] darkfire
Строка 1: Строка 1:
 +====== Использование гиперссылок в SEO ======
 +
 +~~Title: Гиперссылки: Значения и использование атрибутов rel, href, target blank ссылок HTML тега a ~~
 +{{htmlmetatags>
 +metatag-description=(Правильно организованная гиперссылка в html с учетом SEO. Как сделать ссылку и вставить в HTML код используя href, target blank и другие атрибуты тега a.)
 +}}
 +
 +{{ ::wiki.dieg.info_chto_takoe_giperssylka.jpg?nolink&600 |}}
 +
 + --- //[[darkfire@dieg.info|Dmytro Yakovenko]] 2021/01/12 //
 +
 +Гиперссылка (англ. hyperlink) — часть документа, ссылающаяся на элемент в этом документе (текст, изображение) или на другой объект (веб-страницу, файл (документ), каталог, приложение), расположенный на локальном диске или в Интернет. Текст, содержащий гиперссылки, называется гипертекстом или гипертекстовым документом.
 +
 +Для определения ссылки в [[html5|HTML]] используется тег <a>.
 +
 +**Тег <a>** является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
 +<file bash>
 +<a href="URL">...</a>
 +<a name="идентификатор">...</a>
 +</file>
 +Часто применяемые шаблоны:
 +<file bash>
 +<a href="https://dieg.info/review/obzor-shinjiru/" target="_blank">Обзор Shinjiru (Синджиру)</a>
 +</file>
 +===== Как гиперссылки влияют на SEO =====
 +
 +Обратные ссылки (backlinks) сайта имеют огромное влияние на их рейтинг ВНЕ зависимости от сегодняшних факторов ранжирования. Интернет по сути - это клоака ссылок. Но знать особенности современного ранжирования ссылок поисковыми системами - Вы должны.
 +
 +В мире SEO конкурирующие сайты активно работают над созданием обратных ссылок как белыми, так и сомнительными способами. Недавно Google ввел **новые атрибуты sponsored и ugc**, которые частично **заменяют** старый и привычный нам **rel="nofollow"**.
 +===== Стандартные атрибуты =====
 +
 +  * **href** – определяет находящийся между начальным и конечным тегами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), указанный в значении данного атрибута. Возможные значения:
 +<file html>
 +file://диск:\папка\...\папка\файл - Абсолютная локальная ссылка. Указывает адрес ресурса на текущем компьютере в формате
 +file://\\хост\папка\...\папка\файл - Абсолютная сетевая ссылка. Указывает адрес ресурса на соседнем компьютере в сети в формате.</file>
 +Здесь "хост" - имя компьютера или его IP адрес.
 +
 +Относительная ссылка используется для указания местоположения ресурса относительно текущего каталога. Применяются следующие обозначения:
 +<file html>
 +/ - корневой каталог web-сервера или логического диска 
 +./ - текущий каталог 
 +../ - родительский каталог 
 +каталог/ - дочерний каталог
 +</file>
 +В частном случае, когда адресуемый ресурс находится в одном каталоге с документом, в качестве адреса достаточно указать имя файла. Относительные ссылки обычно используют для указания адресов "внутренних" ресурсов сайта. Такой подход позволяет сделать перенос сайта быстрым и легким процессом, без последствий в виде перенастройки ссылок.
 +
 +<file html>
 +http://... – создает ссылку на www-документ;
 +ftp://... – создает ссылку на ftp-сайт или расположенный на нем файл;
 +mailto:... – запускает почтовую программу-клиент с заполненным полем имени получателя.
 +Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";
 +news:... – создает ссылку на конференцию сервера новостей;
 +telnet://... – создает ссылку на telnet-сессию с удаленной машиной;
 +wais://... – создает ссылку на WAIS – сервер;
 +gopher://... – создает ссылку на Gopher – сервер;
 +</file>
 +Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки.
 +  * атрибут **name** для якорей уже давно не используют, а используют универсальный атрибут id. Более подробно изучите раздел [[a#chto_takoe_ssylka_jakor_v_html_i_kak_ejo_sdelat|Что такое ссылка якорь в HTML и как её сделать]].
 +  * **target** - определяет, окно браузера, в которое должен быть загружен ресурс. Может принимать следующие значения:
 +         * _blank - ресурс загружается в новое окно, например <a href="URL"  target="_blank">...</a>;
 +         * _parent - ресурс загружается в родительском окне текущего документа;
 +         * _top - ресурс загружается в окне верхнего уровня фреймовой структуры;
 +         * _self - ресурс загружается в текущем окне. Является значением по умолчанию;
 +         * "имя окна" - ресурс загружается в заданном окне (фрейме).
 +  * **tabindex** - число, определяющее последовательность активизации элемента кнопкой "Tab"
 +  * **accesskey** - символ, используемый как комбинация клавиш в сочетании с клавишей Alt. Нажатие сочетания активизирует ссылку. Этот атрибут не получил широкого применения.
 +
 +===== SEO атрибуты nofollow, noreferrer, noopener, sponsored, ugc  =====
 +
 +Вы можете использовать атрибуты в комбинации друг с другом, например допускается такой синтаксис **rel="nofollow sponsored"** или даже так **rel="nofollow sponsored ugc"**.
 +  * С 1 марта 2020 **sponsored** — для рекламных и спонсорских ссылок.
 +  * С 1 марта 2020 **ugc** — для пользовательского контента UGC (user-generated content). Использование ugc на платных ссылках, может привести к штрафу.
 +  * **rel="nofollow"** - атрибут тега **<a>** с 1 марта 2020 для всех ненадежных ссылок, по которым мы не хотим передавать вес. Ранее nofollow использовался для всех платных, спонсорских, UGC и ненадежных ссылок, теперь введены значения sponsored и ugc.
 +
 +Значение предназначено для поисковых систем: он указывает им на то, что рейтинг PageRank и ТИЦ со страницы, на которой ссылка размещена, не должен передаваться странице, на которую данная ссылка ведет. Атрибут со статусом rel=”nofollow” стандартизирован. Наиболее популярные поисковые системы, соблюдающие стандарты W3C, не учитывают ссылки с таким атрибутом при расчёте индекса цитирования веб-сайтов и поисковые роботы не следуют по ним. Данный атрибут можно использовать для всех ссылок, ведущих на другие сайты. Для ссылок, ведущих на собственные страницы,  данный атрибут лучше не использовать.
 +
 +Пример использования атрибута nofollow для ссылки на рекламу
 +<file html>
 +<a href="http://www.example.com" rel="nofollow">Попытка рекламы</a>
 +</file>
 +
 +<note>У [[seo#ispolzovanie_kombinacij_meta_name_robots_content_x_y|META - тега nofollow]] область действия вся страница.</note>
 +  * **noreferrer** - не передавать в [[HTTP|HTTP]] заголовке поле Referer. Referer (от ошибочного написания англ. referrer — отсылающий, направляющий) — в протоколе HTTP один из заголовков запроса клиента, который содержит URL источника запроса. То есть если Вы переходите с одной страницы (или сайта) на другую, referer будет содержать адрес первой страницы (или сайта).
 +  * **noopener** использовать для внешних ссылок, если они открываются в новом окне target="_blank". Атрибут noopener предотвращает хакерский взлом вашего сайта и повышает безопасность. Noopener не оказывает никакого влияния на производительность или SEO вашего сайта.
 +  * **external** означает, что ссылка ведет на другой сайт, будет индексироваться и передавать вес. В WordPress этот атрибут часто используется в комментариях. Может функционировать совместно с nofollow, чтобы ссылка не передавала вес: <file bash>
 +rel="external nofollow"
 +</file>
 +
 +**Примеры SEO кода**:
 +  - Обычные ссылки, которую можно рекомендовать: <file html>
 +<a href="https://wiki.dieg.info"> Ссылка, которую можно рекомендовать </a>
 +</file>
 +  - Рекламные ссылки: <file html>
 +<a href="wiki.dieg.info" rel="sponsored"> Рекламная ссылка </a>
 +</file>
 +  - Пользовательский контент, например ссылка оставлена в комментариях сайта: <file html>
 +<a href="wiki.dieg.info" rel="ugc"> Ссылка пользователя </a>
 +</file>
 +  - Не передавать вес ссылке: <file html>
 +<a href="wiki.dieg.info" rel="nofollow"> Ненадежная ссылка </a>
 +</file>
 +===== Что такое ссылка якорь в HTML и как её сделать =====
 +В HTML существует возможность ссылаться не только на другие html документы, но и возможность ссылаться на части одного документа. Такой механизм получил название "закладки" или якорь. Вы как бы отмечаете некоторый элемент в документе (ставите якорь), а потом ссылаетесь на него из этого же или из другого документа. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
 +
 +Чтобы пометить документ, используется атрибут id - уникальный идентификатор элемента: 
 +<file html>
 +<h2 id="chapter5">Глава 5</h2>
 +<span id="reviews"></span>
 +</file>
 +<alert type="success" icon="fa fa-info">В качестве значений атрибута id допускается использовать любые символы, однако рекомендуется применять только буквы английского алфавита, цифры, дефисы (-) и знаки подчёркивания (_), причём начинать значение — с буквы.</alert>
 +
 +Чтобы сослаться на закладку в текущем документе используют гиперссылки с таким значением атрибута href: 
 +<file html>
 +<a href="#chapter5">Перейти к 5й главе</a>
 +</file>
 +Можно, так же, ссылаться на закладку в другом html документе. При этом, требуется указать адрес самого документа, затем символ "#" и имя закладки: 
 +<file html>
 +<a href="htmldocs/book.html#chapter5">Перейти к 5й главе</a>
 +</file>
 +Часть адреса "#имя" получила название хэш. 
 +<note tip>Если вы укажете в качестве закладки только символ "#", то документ будет прокручен на самое начало. Таким образом, символ "#" тоже можно назвать корректной закладкой.</note> 
 +Чтобы перенаправить пользователя к началу страницы (такую ссылку называют «заглушкой»), нужно написать так:
 +<file html>
 +<a href="#">Наверх</a>
 +</file>
 +===== Использование библиотеки jQuery для получения атрибутов тега a =====
 +В библиотеке jQuery реализованы [[selektory#psevdoklassy|псевдоклассы тега А]] чтобы применять к элементам разные процедуры форматирования.
 +
 +  * Пример 1: Получить значение атрибута href тега a <file html>
 +<script type="text/javascript">
 +            $(function() {
 +$("td a").bind('click', function(){
 +var getvalue = $(this).attr('href');
 +alert(getvalue);
 +</script>
 +</file>
 +
 +  * Пример 2: Получить значение (анкор) тега a и вставить его в тег input <file html>
 +<script type="text/javascript">
 +            $(function() {
 +//$("td a").css('font-weight','bold');
 +
 +$("td a").bind('click', function(){
 +var getvalue = $(this).html();
 +$("input[name=s_email]").val(getvalue);
 +return false;
 +        });
 +});
 +</script>
 +</file>
 +
 +===== Пример создания навигационной графической панели сайта =====
 +В элемент **a** можно вкладывать не только текст, но и изображение. Именно так и создаются графические ссылки. Графические ссылки в ряде случаев выглядят гораздо эстетичнее, чем текстовые. Здесь, однако, нас подстерегает не очень приятный сюрприз - изображения, заключенные в элемент a приобретаю рамку. Для того, чтобы избавиться от нее необходимо использовать атрибут border элемента img:
 +<file>
 +<a href="/"><img src="/appfiles/img/image.svg" alt="Logo Mama" /></a>
 +</file>
 +<note important>При использовании изображений в качестве ссылок, не забудьте указать для них атрибут alt. В случае невозможности отображения рисунка, браузер сделает гиперссылкой его текстовое описание.</note> 
 +
 +Сейчас на небольшом примере мы с вами поэтапно спроектируем и реализуем несложную графическую навигационную панель сайта. Выглядеть это будет так: 
 +
 +{{:navbar.gif|}}
 +
 +Кажется, что все просто: берем изображение, размещаем его на странице... Что может быть проще? Однако, различные фрагменты этого изображения должны быть гиперссылками на различные ресурсы. Таким образом, мы приходим к необходимости разрезать рисунок на несколько частей. 
 +
 +Вот что получилось у меня:
 +
 +{{:navbar_fragments.gif|}}
 +
 +В результате, у нас есть три "кнопки" - гиперссылки "Назад", "Содержание" и "Вперед". Разместим все это добро на странице: 
 +
 +**Шаг 1 - Листинг навигационная панель.**   
 +<file>
 +<div style="text-align: center;">
 +    <img src="navbar/navbar01.gif" alt="" />
 +    <img src="navbar/navbar02.gif" alt="Назад" />
 +    ...
 +    <img src="navbar/navbar09.gif" alt="" />
 +</div>
 +</file>
 +
 +Как говорится - "Первый блин комом"! Между изображениями появились зазоры, хотя никто этого не планировал. Все дело в том, что MSIE добавил между изображениями пробельный символ. Это происходит потому, что элементы img разделены переводом строки в коде страницы. Зная это, положение вещей легко поменять, удалив пробельные символы (переводы строки, табуляции...) между элеменнами img.
 +
 +**Шаг 2 - Листинг навигационная панель.**  
 +
 +<file html>
 +...<img src="navbar/navbar01.gif" alt="" 
 +/><img src="navbar/navbar02.gif" alt="Назад"
 +/>...
 +</file>
 +Теперь все в норме! Снабдим код гиперссылками. Чтобы не придумывать адреса, в качестве значения атрибута href используйте "#":
 +
 +**Шаг 3 - Листинг навигационная панель.**  
 + 
 +<file html>
 +...<a href="#"><img src="navbar/navbar02.gif" alt="Назад"
 +/></a>...
 +</file>
 +Полученный результат выглядит явно как то не так... Все дело в рамках вокруг изображений. Избавимся от них, добавив в изображения-ссылки атрибут border="0": 
 +
 +**Шаг 4 - Листинг навигационная панель.**  
 +
 +<file html>
 +...<a href="#"><img src="navbar/navbar02.gif" alt="Назад" border="0"
 +/></a>...
 +</file>
 +Теперь вы можете связать несколько страниц несложной единой навигационной панелью, разместив ее код в начале каждой страницы и правильно настроив ссылки.
  

📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.

📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.

💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!