Различия

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

@@ Строка 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 для экспериментов - читайте здесь.

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

Различия

7 Самых Популярных Статей

7 Самых Популярных Обзоров