Различия
Показаны различия между двумя версиями страницы.
Предыдущая версия | |||
— | a [2024/12/13 15:53] (текущий) – [SEO атрибуты nofollow, noreferrer, noopener, sponsored, ugc] darkfire | ||
---|---|---|---|
Строка 1: | Строка 1: | ||
+ | ====== Использование гиперссылок в SEO ====== | ||
+ | |||
+ | ~~Title: Гиперссылки: | ||
+ | {{htmlmetatags> | ||
+ | metatag-description=(Правильно организованная гиперссылка в html с учетом SEO. Как сделать ссылку и вставить в HTML код используя href, target blank и другие атрибуты тега a.) | ||
+ | }} | ||
+ | |||
+ | {{ :: | ||
+ | |||
+ | --- // | ||
+ | |||
+ | Гиперссылка (англ. hyperlink) — часть документа, | ||
+ | |||
+ | Для определения ссылки в [[html5|HTML]] используется тег <a>. | ||
+ | |||
+ | **Тег <a>** является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, | ||
+ | <file bash> | ||
+ | <a href=" | ||
+ | <a name=" | ||
+ | </ | ||
+ | Часто применяемые шаблоны: | ||
+ | <file bash> | ||
+ | <a href=" | ||
+ | </ | ||
+ | ===== Как гиперссылки влияют на SEO ===== | ||
+ | |||
+ | Обратные ссылки (backlinks) сайта имеют огромное влияние на их рейтинг ВНЕ зависимости от сегодняшних факторов ранжирования. Интернет по сути - это клоака ссылок. Но знать особенности современного ранжирования ссылок поисковыми системами - Вы должны. | ||
+ | |||
+ | В мире SEO конкурирующие сайты активно работают над созданием обратных ссылок как белыми, | ||
+ | ===== Стандартные атрибуты ===== | ||
+ | |||
+ | * **href** – определяет находящийся между начальным и конечным тегами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), | ||
+ | <file html> | ||
+ | file:// | ||
+ | file:// | ||
+ | Здесь " | ||
+ | |||
+ | Относительная ссылка используется для указания местоположения ресурса относительно текущего каталога. Применяются следующие обозначения: | ||
+ | <file html> | ||
+ | / - корневой каталог web-сервера или логического диска | ||
+ | ./ - текущий каталог | ||
+ | ../ - родительский каталог | ||
+ | каталог/ | ||
+ | </ | ||
+ | В частном случае, | ||
+ | |||
+ | <file html> | ||
+ | http://... – создает ссылку на www-документ; | ||
+ | ftp://... – создает ссылку на ftp-сайт или расположенный на нем файл; | ||
+ | mailto:... – запускает почтовую программу-клиент с заполненным полем имени получателя. | ||
+ | Если после адреса поставить знак вопроса, | ||
+ | news:... – создает ссылку на конференцию сервера новостей; | ||
+ | telnet:// | ||
+ | wais://... – создает ссылку на WAIS – сервер; | ||
+ | gopher:// | ||
+ | </ | ||
+ | Если тип соединения и адрес машины не указаны, | ||
+ | * атрибут **name** для якорей уже давно не используют, | ||
+ | * **target** - определяет, | ||
+ | * _blank - ресурс загружается в новое окно, например <a href=" | ||
+ | * _parent - ресурс загружается в родительском окне текущего документа; | ||
+ | * _top - ресурс загружается в окне верхнего уровня фреймовой структуры; | ||
+ | * _self - ресурс загружается в текущем окне. Является значением по умолчанию; | ||
+ | * " | ||
+ | * **tabindex** - число, определяющее последовательность активизации элемента кнопкой " | ||
+ | * **accesskey** - символ, | ||
+ | |||
+ | ===== SEO атрибуты nofollow, noreferrer, noopener, sponsored, ugc ===== | ||
+ | |||
+ | Вы можете использовать атрибуты в комбинации друг с другом, | ||
+ | * С 1 марта 2020 **sponsored** — для рекламных и спонсорских ссылок. | ||
+ | * С 1 марта 2020 **ugc** — для пользовательского контента UGC (user-generated content). Использование ugc на платных ссылках, | ||
+ | * **rel=" | ||
+ | |||
+ | Значение предназначено для поисковых систем: | ||
+ | |||
+ | Пример использования атрибута nofollow для ссылки на рекламу | ||
+ | <file html> | ||
+ | <a href=" | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | * **noreferrer** - не передавать в [[HTTP|HTTP]] заголовке поле Referer. Referer (от ошибочного написания англ. referrer — отсылающий, | ||
+ | * **noopener** использовать для внешних ссылок, | ||
+ | * **external** означает, | ||
+ | rel=" | ||
+ | </ | ||
+ | |||
+ | **Примеры SEO кода**: | ||
+ | - Обычные ссылки, | ||
+ | <a href=" | ||
+ | </ | ||
+ | - Рекламные ссылки: | ||
+ | <a href=" | ||
+ | </ | ||
+ | - Пользовательский контент, | ||
+ | <a href=" | ||
+ | </ | ||
+ | - Не передавать вес ссылке: | ||
+ | <a href=" | ||
+ | </ | ||
+ | ===== Что такое ссылка якорь в HTML и как её сделать ===== | ||
+ | В HTML существует возможность ссылаться не только на другие html документы, | ||
+ | |||
+ | Чтобы пометить документ, | ||
+ | <file html> | ||
+ | <h2 id=" | ||
+ | <span id=" | ||
+ | </ | ||
+ | <alert type=" | ||
+ | |||
+ | Чтобы сослаться на закладку в текущем документе используют гиперссылки с таким значением атрибута href: | ||
+ | <file html> | ||
+ | <a href="# | ||
+ | </ | ||
+ | Можно, так же, ссылаться на закладку в другом html документе. При этом, требуется указать адрес самого документа, | ||
+ | <file html> | ||
+ | <a href=" | ||
+ | </ | ||
+ | Часть адреса "# | ||
+ | <note tip> | ||
+ | Чтобы перенаправить пользователя к началу страницы (такую ссылку называют «заглушкой»), | ||
+ | <file html> | ||
+ | <a href="#"> | ||
+ | </ | ||
+ | ===== Использование библиотеки jQuery для получения атрибутов тега a ===== | ||
+ | В библиотеке jQuery реализованы [[selektory# | ||
+ | |||
+ | * Пример 1: Получить значение атрибута href тега a <file html> | ||
+ | <script type=" | ||
+ | $(function() { | ||
+ | $("td a" | ||
+ | var getvalue = $(this).attr(' | ||
+ | alert(getvalue); | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | * Пример 2: Получить значение (анкор) тега a и вставить его в тег input <file html> | ||
+ | <script type=" | ||
+ | $(function() { | ||
+ | // | ||
+ | |||
+ | $("td a" | ||
+ | var getvalue = $(this).html(); | ||
+ | $(" | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== Пример создания навигационной графической панели сайта ===== | ||
+ | В элемент **a** можно вкладывать не только текст, но и изображение. Именно так и создаются графические ссылки. Графические ссылки в ряде случаев выглядят гораздо эстетичнее, | ||
+ | < | ||
+ | <a href="/">< | ||
+ | </ | ||
+ | <note important> | ||
+ | |||
+ | Сейчас на небольшом примере мы с вами поэтапно спроектируем и реализуем несложную графическую навигационную панель сайта. Выглядеть это будет так: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Кажется, | ||
+ | |||
+ | Вот что получилось у меня: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | В результате, | ||
+ | |||
+ | **Шаг 1 - Листинг навигационная панель.** | ||
+ | < | ||
+ | <div style=" | ||
+ | <img src=" | ||
+ | <img src=" | ||
+ | ... | ||
+ | <img src=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Как говорится - " | ||
+ | |||
+ | **Шаг 2 - Листинг навигационная панель.** | ||
+ | |||
+ | <file html> | ||
+ | ...<img src=" | ||
+ | />< | ||
+ | />... | ||
+ | </ | ||
+ | Теперь все в норме! Снабдим код гиперссылками. Чтобы не придумывать адреса, | ||
+ | |||
+ | **Шаг 3 - Листинг навигационная панель.** | ||
+ | |||
+ | <file html> | ||
+ | ...<a href="#">< | ||
+ | /></ | ||
+ | </ | ||
+ | Полученный результат выглядит явно как то не так... Все дело в рамках вокруг изображений. Избавимся от них, добавив в изображения-ссылки атрибут border=" | ||
+ | |||
+ | **Шаг 4 - Листинг навигационная панель.** | ||
+ | |||
+ | <file html> | ||
+ | ...<a href="#">< | ||
+ | /></ | ||
+ | </ | ||
+ | Теперь вы можете связать несколько страниц несложной единой навигационной панелью, | ||
📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.
📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.
💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!7 Самых Популярных Статей
- Как запустить скрипты и веб-приложения на Python
- Что такое страны TIER 1,2,3
- 7 способов сравнения файлов по содержимому в Windows или Linux
- Установка и тестирование веб-панели HestiaCP
- Nginx простые примеры конфигурации
- top, htop, atop определение загрузки ОС (Load average, LA)
- Использование rsync в примерах
7 Самых Популярных Обзоров
- Хостинг для Python-скриптов и приложений
- ТОП 4 лучших антидетект браузеров (Бесплатные & Платные)
- Подборка купонов (промокоды) на хостинг, антидетект браузеры
- Обзор THE.Hosting (PQ Hosting): надежный хостинг с профессиональной поддержкой
- Хостинг в России
- Хостинг в Европе
- Обзор браузера Dolphin {anty} для мультиаккаунтинга