Атрибут rev в HTML


Содержание
Илон Маск рекомендует:  Отступы margin

Что такое «rel=»?

В HTML атрибут rel (от англ. «relationship» ‒ «отношение, взаимосвязь») определяет взаимосвязь между текущим и связанным с ним ссылкой документом.

Когда ссылка ведет нас к ресурсу, атрибут rel объясняет, почему ссылка ведет к этому адресу. Ссылаться можно, например, на файл стилей, который нужно задействовать с документом. Или на страницу, которая наполнена тем же содержанием, что и исходный документ, но отображается в стандартном формате для подписки на RSS-новости. Также адрес может быть языковым переводом или PDF-версией. Ссылочные отношения применяются также, если ссылка ведет на предыдущие или последующие страницы электронной книги.

Большинство современных браузеров не реагируют на значения этого атрибута, но им руководствуются поисковые роботы при индексировании страниц сайтов. Веб-службы, вроде социальных сетей или инструментов языкового перевода также лучше поймут ваш сайт, если на нем определены типы ссылок. Может применяться как к ссылке с тегом с таким синтаксисом:

Либо к тегу , который устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. Синтаксис в этом случае будет таким:

Сейчас чаще всего используют значение «nofollow», которое запрещает поисковой системе переходить по конкретной ссылке, то есть, не передает им тИЦ и PR, и «canonical», которая определяет предпочитаемый адрес для индексации поисковыми системами. Но использование атрибута rel не ограничивается только значениями «nofollow» и «canonical»:

rel=nofollow

Значение предназначено для поисковых систем: указывает им, что ссылка не передает свой вес той странице, на которую ссылается. Пример:

rel=canonical

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

Подробнее об использовании rel=canonical в нашей статье о комплексном аудите сайта.

rel=alternate

Указывает на то, что по этой ссылкой располагается альтернативный вид отображения страницы. Например, это может быть PDF-версия, или версия для печати:

Также у этого типа можно задать hreflang, который указывает на то, что по этой ссылке находится страница другой языковой версии:

rel=author

Сообщает, что за ссылкой находится информация об авторе сайта или страницы:

rel=bookmark

Говорит, что ссылка является постоянной и адрес этой страницы не меняется никогда:

rel=help

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

В этом примере ссылка ведет на справочную информацию о контенте, который расположен в родительском элементе ссылки, а именно в форме комментария.

rel=license

Используется, когда ссылка ведет на лицензионное соглашение основного контента страницы. Ссылка должна быть размещена в пределах тега main сайта. Лицензионное соглашение относится только к тому контенту, которое размещено в пределах этой секции. Оно не будет относится к тому, что находится, например, в футере:

rel=dns-prefetch, preconnect, prefetch, preload

Используйте ссылки этого типа, когда ссылаетесь на внешние ресурсы, которые пользователь откроет с большой вероятностью. Браузер кэширует заранее эту ссылку и она откроется быстрее:

О тонкостях использования этих значений — в статье на Хабре.

Этот тип сообщает, что ссылка ведет на интерфейс поиска:

rel=tag

Ссылка этого типа ведет дает определения ключевого слова или категории сайта:

rel=first, next, up, last, prev

Эти значения используется в постраничной навигации. Например, ссылка на следующую страницу имеет значение next, а на предыдущую – prev:

rel=external

Означает, что ссылка будет открыта в новом окне. А сама ссылка будет индексироваться, передавать вес. В WordPress этот атрибут весьма широко применяется в комментариях. Может использоваться совместно с nofollow, чтобы ссылка не передавала вес:

rel=icon

Используется для ассоциации иконки сайта с его содержимым. Указывается в теге :

Большинство браузеров не конфликтуют с этим атрибутом, привязывая иконку сайта к его страницам. Также есть возможность определять размер изображения иконки при помощи size:

Это далеко не все возможные значения атрибута rel, подробнее читайте в справочнике HTML.

Не пренебрегайте использованием атрибута rel, он позволяет легко добавить в ваши ссылки больше семантического смысла и создать связи между страницами сайта, которые затем будут обработаны поисковыми роботами, агрегаторами и браузерами.

Атрибут rel в HTML5

Хоть сейчас поисковики и не полностью поддерживают разметку HTML5, но в ближайшем будущем семантичная верстка будет иметь не последнее место в продвижении сайта. Атрибут rel — определяет отношения между текущим документом и связанным документом.

Удаленные из HTML4 значения: appendix, chapter, contents, copyright, glossary, index, section, start, subsection

Добавленные в HTML5 значения: archives, author, bookmark, external, first, index, last, license, nofollow, noreferrer, pingback, search, sidebar, tag, up

Однако, несмотря на удаленные значения атрибута, HTML5 допускает использование старых значений и не выдаст ошибки валидации.

Для начала рассмотрим несколько типов ссылок, согласно документации wc3:
Hyperlink — это ссылки на другие ресурсы, которые обычно предоставляются пользователю браузером для навигации, по ним можно перейти к этим ресурсам, например, посетить их в браузере или загрузить их.
External Resource — это ссылки на ресурсы, которые будут использованы для расширения текущего документа.
Annotation — гиперссылка может иметь одну или более аннотацию, которые изменяют обработку семантики этой гиперссылки.

Разберем каждое значение по отдельности, кстати значение атрибута регистро не зависимо:

Атрибут rel

HTML атрибут rel часто применяется вебмастерами для влияния на поисковые системы. Наиболее известное применение атрибута рел — это rel=»nofollow», rel=»canonical».

Итак, давайте же разберём, что это за зверь и где он применяется.

Атрибут Rel («relate» с английского языка — «относиться», «связывать») определяет отношение между текущим документом и документом, на который идет ссылка атрибута href. Он является необязательным атрибутом и у него нет значения по умолчанию, если не вписать его вручную.

Схематично синтаксис можно показать так:

Пример, как выглядит атрибут ссылки rel в коде страницы:

Значения

Наиболее полное описание всех значений атрибута рел можно найти на странице официального источника — http://microformats.org/wiki/existing-rel-values.

Наиболее часто используемое значение — это безусловно nofollow, которое указывает на то , что назначенной гиперссылки запрещается передавать любой дополнительный вес или рейтинг агентами, которые выполняют анализ как абсолютных ссылок так и относительных на веб-страницах (например, роботы поисковых систем).

Также часто для избежания дублей контента используется link rel=»canonical», означающий, что указанная ссылка каноническая (основная).

Какие браузеры поддерживают атрибут rel?

Большая часть браузеров не поддерживает атрибут ссылки rel, но он благополучно используется seo оптимизаторами для воздействия на ПС (Яндекс, Google, Bing и прочие).

Chrome
Safari
Android
iOS
Maxthon
Internet Explorer
Firefox
Opera

Нельзя сказать, что последние 2 браузера полностью поддерживают все значения атрибута: Firefox понимает значения sidebar и prefetch, Opera — sidebar.

Как правильно использовать атрибуты rel=alternate и hreflang=x

Атрибут rel=»alternate» hreflang=»x» помогает Google предоставлять соответствующие URL по языку или региону пользователя поисковой системы.

Примеры ситуаций, в которых рекомендуется использовать атрибут rel=»alternate» hreflang=»x» :

  • У вас переведен только шаблон страницы, например, элементы навигации и нижний колонтитул, в то время как основное содержание на одном языке. Это характерно для сайтов с контентом произведенным пользователями, например, сообщения на форуме.
  • Ваши страницы имеют очень похожий текст на одном языке, но с небольшими отличиями, которые изменяются в зависимости от региона. Это могут быть, например, англоязычные материалы направлены для читателей из США, Великобритании и Ирландии.
  • Ваш сайт полностью переведен. Например, каждая страница существует на русском и английском языках.

Использование атрибута rel=alternate hreflang=x

Допустим, что у вас есть русскоязычная страница http://www.example.com/ и её испанская версия http://es.example.com Одним из двух способов вы можете сообщить Google, что под другим URL находится испаноязычный аналог русской версии сайта:

  • Элемент HTML link – в разделе HTML по адресу http://www.example.com/ поместите элемент ссылку на испанскую версию этого сайта (http://es.example.com/):
  • HTTP заголовок – при публикации файлов в формате, отличном от HTML (например, PDF), вы можете указать другую языковую версию URL с помощью HTTP-заголовка: Ссылка: ; rel=»alternate»; hreflang=»es»

Если у вас есть несколько языковых версий URL, в каждой вы должны использовать атрибут rel=»alternate» hreflang=»x» для указания других.

Например, если веб-сайт содержит материалы на французском, английском и русском языках, сайт на русском языке должен содержать ссылки с атрибутами rel=»alternate» hreflang=»x» на английскую и французскую версию, а они, в свою очередь, должны содержать аналогичные ссылки, указывающие на две другие версии.

Поддерживаемые значения атрибута hreflang

Значение атрибута hreflang определяет язык (chinese формате ISO 639-1) и, опционально, регион (в формате ISO 3166-1) страницы в качестве альтернативного URL.

  • de: материалы на немецком языке, независимо от региона;
  • en-GB: материалы на английском языке, для пользователей из Великобритании;
  • de-ES: материалы на немецком языке, для пользователей из Испании.

Система письма определяется по стране. Например, использование кода zh-TW вызовет автоматический выбор китайского письма (в данном случае традиционного). Конкретную систему письма вы также можете определить самостоятельно с помощью кодов ISO 15924.

Существует также возможность ввода комбинации, обозначающих систему письма и региона.

Пример конфигурации: rel=alternate hreflang=x

Компания «Пример» запустила сайт предназначенный для пользователей из Германии, Швейцарии и России.

Под следующим URL находятся в основном одно и тоже содержание, но с некоторыми отличиями вытекающими из этого региона:

  • http://www.example.com/site.html – главная на немецком языке;
  • http://de-de.example.com/site.html – немецкая версия с ценами в евро;
  • http://de-ch.example.com/site.html – немецкая версия с ценами в швейцарских франках;
  • http://ru.example.com/stranica.html – сайт на русском языке.

Атрибуты rel=»alternate» hreflang=»x» работают на уровне страницы, а не всего сайта, поэтому вы должны соответствующим образом отмечать каждый набор страниц, включая главную страницу.

Обновите код HTML во всех URL, добавив группу элементов с атрибутами rel=»alternate» hreflang=»x» на каждой странице:

Это руководство для алгоритма Google, что все эти страницы надо рассматривать в качестве взаимозаменяемых версий.

Атрибут rel=nofollow

Элемент тега А в HTML-разметке, который помогает бороться со спамом и ускоряет обход полезных страниц поисковыми роботами. Небольшой seo-гайд по данному атрибуту.

Илон Маск рекомендует:  Что такое код fileperms

Мини SEO-гайд по HTML атрибуту rel=»nofollow»

В статье я расскажу как грамотно закрыть ссылку от индексации через rel=nofollow.

Понятия

Донор — сайт, с которого ведут ссылки на внешний ресурс.

Акцептор — страница или сайт на который ссылаются.

Анкор — видимая часть ссылки.

Атрибут rel — элемент, который определяет отношения между текущим документом и документом, на который ведёт ссылка.

Яндекс

Что же говорит нам наш родной поисковик про данный атрибут:

Атрибут работает аналогично мета-тегу со значением nofollow, но распространяется только на ссылку, для которой указан.

А вот про мета-тег nofollow пишут следующее:

— не переходить по ссылкам на странице;

Робот не посетит документы, если ссылки на них стоят со страницы, содержащей мета-тег со значением nofollow, тем не менее, они могут быть проиндексированы, если в других источниках на них указаны ссылки без nofollow.

Google

Значение nofollow запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.

Ранее nofollow применяли в метатеге на уровне страницы. Это значение указывало, что системы поиска не должны переходить по ссылкам на этой странице (т. е. не нужно сканировать соответствующие URL).

Также Гугл явно указывает в примере, что можно закрывать внутренние ссылки данным атрибутом, закрытые также в файле robots.txt

Как Google обрабатывает ссылки с запрещенным переходом?

Как правило, переход не производится. Это означает, что по этим ссылкам Google не передает ни PageRank, ни текст ссылки. Благодаря nofollow ссылки не попадают в нашу «схему» Сети. Однако соответствующие целевые страницы все равно могут быть включены в индекс Google, если другие сайты ссылаются на них без использования nofollow или если их URL предоставлены Google с помощью файла Sitemap. Необходимо заметить, что другие поисковые системы могут обрабатывать nofollow несколько по-другому.

Распространенные случаи применения nofollow:

  • Ненадежный контент
  • Платные ссылки
  • Приоритизация сканирования

Основное назначение

Предназначение: для поисковых систем.

Главными целями данного атрибута у ссылок (тег A) являются:

  • не передавать вес — значение ТиЦ и PR (PageRank);
  • «не переходить» по ссылкам, дословное указание поисковым ботам, что посещать URL не нужно.

Наблюдения

На практике наблюдал и вижу следующее:

  • внешние ссылки закрытые в rel=nofollow индексируются и учитываются на акцепторе. Ранжирование по анкору происходит (в Яндексе), но только если ссылка зафиксирована в вебмастере.
  • закрытые внутренние ссылки данным атрибутом.
  • посещаемые ссылки, закрытые атрибутом индексируются и отображаются в вебмастерах, в отчете внешние ссылки.
  • был период, когда Яндекс убирал из отчета «Исключенные страницы» внутренние ссылки закрытые комбинацией в robots.txt и атрибутом rel=»nofollow».

Обо всем по порядку. расскажу ниже.

Внутренние ссылки

Как посмотреть и где определить что необходимо закрыть от индексирования?

1. Google Search Console

Сканирование => Ошибки сканирования => Смартфоны => Заблокировано

Если видим отчет, значит внутренние ссылки закрытые в robots.txt — не закрыты данным атрибутом. Робот использует страницы в обходе. Что также снижает индексацию и расходует драгоценные краулинговый бюджет.

Важно! Если на ресурс ссылаются также другие страницы (с открытой для индексирования ссылкой), то данный документ может остаться использоваться в обходе.

2. Яндекс Вебмастер

Индексирование => Страницы в поиске => Исключенные (вкладка)

Запрет в robots.txt (страница) — если есть значение больше нуля, то смотрим ниже — фильтруем по этому параметру и находим такие урл.

Примечание. В 2014 году в отчете находились ссылки незакрытые дополнительно через rel=nofollow — было приятно, когда исключенных страниц было 0 — что индексируются только полезные URL :))

3. Netpeak Spider

Настройки => Продвинутые => Учитывать инструкции по индексации => Атрибут «nofollow» у ссылок (ставим галку)

Тем самым мы позволим проверять сайт с учетом этого параметра. Для проверки также укажите robots.txt

Далее запускаем сканирование и смотрим:

Если появляется отчет «Пропущенные URL» — то необходимо закрыть все входящие ссылки на такие страницы данным атрибутом.

На практике чаще всего такими страницами являются:

  • страницы фильтрации;
  • страницы авторизации, личного кабинета, ссылки на страницы пользователя;
  • страницы поиска;
  • и другие страницы закрытые в robots.txt

Подытог

На практике закрытие ссылок в rel=nofollow ведущих на технические страницы, ускоряет обход и индексацию, особенно на больших сайтах.

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

Внешние ссылки

Определить список внешних ссылок необходимых к закрытию также поможет мой любимый инструмент Netpeak Spider.

1. Netpeak Spider

После полного сканирования выгружаем отчеты:

Экспорт => Все доступные отчеты

Далее находим отчет с названием «дата

Либо в самой программе просматриваем:

База данных => Таблица со всеми результатами => Внешние ссылки

Подытог

Вы можете получить список внешних урлов необходимых для закрытия от индексирования.

Примечания. Закрывать внешние стили (css), скрипты (js) и картинки — не имеет смысла. Они не участвуют в основном поиске. Для нас самое главное не делать бесплатную рекламы именно внешним документам, передавая им свой вес.

Советы и заключение

Закрывайте все внешние ссылки и внутренние — ведущие на неважные и закрытые в robots страницы.

Замечание. Со снижением количества мусорных страниц из обхода, также снижается трафик и нагрузка на сервер.

Оставляйте для индексации только полезные и релевантные ресурсы.

WordPress и дополнительные атрибуты

Если используете target=»_blank» или у вас стоит Вордпресс, то ссылки могут формироваться таким образом:

noopener — повышает производительность и безопасность перехода.

noreferrer — указывает, что информация о реферере не должна утекать при переходе по ссылке.

Про вес

Да, указывая атрибут мы теряем вес в пустоту, как распространено мнение. Но как говориться: «Бережёного Бог бережёт».

Удачи Вам! Экспериментируйте чаще! ;))

Обновлено: 22.12.2020 2961 (в день: 5.761)

Практический HTML: улучшаем семантику ссылок

Примечание: ниже перевод статьи «Boost Your Hyperlink Power». В ней освещается использование атрибутов rel и rev, а также некоторые микроформаты.

Часть HTML-тегов и атрибуты мы используем каждый день в свой работе. Заголовки, параграфы, списки и картинки являются основой разметки каждого веб-разработчика. Но наиболее распространенным элементом, наверное, будет ссылка — простой тег, который связывает воедино все страницы, создавая ту самую беспорядочную структуру, которую мы называем Всемирная Сеть Интернет (WWW).

Ссылка как она есть

Весь потенциал ссылок заключается в атрибуте href , сокращение от hypertext reference . Он создает одностороннюю связь текущей страницы с другим ресурсом, обычно другой такой же страницей в интернете:

Атрибут href находится в открывающем теге a , между открывающим и закрывающим тегами находится текст для описания ссылки:

«Ну и что», — скажите вы. — «Это я все и так знаю», — и будете абсолютно правы! Но у ссылки есть еще кое-что, кроме атрибута href .

Теория относительности ( rel ativity)

Может быть, вы уже читали про атрибут rel у ссылки. Я готов поспорить, что в секции head ваших страниц будет располагаться что-нибудь типа этого:

Атрибут rel описывает связь между текущим документом и тем, на который он указывает. В этом случае, значением атрибута rel является stylesheet . Это означает, что связанный документ является таблицей стилей для текущего: между ними именно такая связь.

Еще одно распространенное употребление rel :

В данном случае связь между текущим документом и связанным — RSS-лентой — указана как alternate : альтернативное преставление текущего документа.

Оба этих примера используют тег link , но вы можете использовать атрибут rel и у обычных ссылок. Например, мы ссылаетесь на вашу RSS-ленту из секции :

Вы можете добавить дополнительную информацию к этой ссылке, используя атрибут rel :

Не существует определенного списка значений для атрибута rel , поэтому вы можете использовать все, что посчитаете семантически разумным. Например, если у вас сложное коммерческое веб-приложение, в котором присутствует ссылка на подсказку, то вы можете определить связь между текущей страницей и этой подсказкой, используя значение help :

Элементарные микроформаты

Хотя вы абсолютно свободны в использовании значений атрибута rel , существует уже некоторые общепринятые значения при использовании микроформатов. Некоторые из простейших микроформатов предлагают варианты грамотного использования rel . Например, если вы ссылаетесь на лицензию, под которой опубликован данный документ, используйте микроформат rel-license :

Эта конструкция описывает, что текущая страница ссылается на документ, помеченный как «лицензия».

Микроформат rel-tag идет немного дальше. Он используется для указания на то, что последняя часть URL’а у ссылки является «меткой» для текущего документа:

В данном случае для этого документа добавлена метка «Microformats».

XFN (XHTML Friends Network) является способом описания отношений между людьми:

Этот микроформат в значительной степени расширяет возможное применение атрибута rel . Так же, как и атрибут class , rel может принимать несколько значений, разделенных пробелом:

Таким образом я указываю, что Drew мой друг, я с ним встречался, и он мой коллега (ведь мы оба фанатеем от интернета (Web monkies)).

«Мы — хотим перемен» ( rev olution)

Если rel описывает связь между текущей страницей и той, на которую она ссылается, (прим.: текущая страница -> другая страница) то rev используется для обратной зависимости: он определяет вид связи страницы, на которую ссылаются, с текущей (прим.: текущая страница rev указывает, что текущая страница является страницей помощи, подсказкой для той, на которую она ссылается.

Микроформат vote-links позволяет вам использовать атрибут rev для уточнения ваших ссылок. Например, определяя значение vote-for , вы можете указать, что ваш документ поддерживает тот, на который ссылается:

Есть и соответствующее значение vote-against . Оно означает, что хоть вы и ссылаетесь на этот документ, но вы явно указываете, что с ним не согласны.

Естественно, ничего не мешает использовать в одной ссылке и rel , и rev :

Разумность большинства

За легкостью использования rel и rev скрывается богатый потенциал. Они позволяет относительно легко добавить в ваши ссылки больше семантического смысла, что создает связи, которые затем могут быть обработы поисковыми роботами, агрегаторами или браузерами. Пусть вашим следующим шагом станет тесное знакомство с этими атрибутами и расширение возможностей ссылок.

Сссылки по теме

Большое спасибо тем, кто прочитал всю статью полностью. Мне хотелось бы услышать ваше мнение или замечания по поводу использования rel/rev , в частности, или микроформатов вообще.

Читают сейчас

Похожие публикации

  • 31 декабря 2006 в 22:35

Элементарные микроформаты

Знакомство с микроформатом rel-license

Инструменты для публикации тагов в микроформате rel-tag

Вакансии

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Комментарии 44

В данном случае для этого документа добавлена метка «Microformats».

Имелось ввиду, конечно:

в смысле? имеется ли здесь в виду #anchor или /Microformats в этой ссылке? Можете пояснить свою мысль

в оригинале написано URL, я согласен с автором, ибо последняя часть адреса будет заключать в себе метку

rel вызывал у меня всегда следующее противление:

1) если там можно написать все что угодно — я могу и по-русски там писать, но разве это кому-то понравится?

2) если только по-английски — почему тогда не стандартизировали список возможных отношений, а то опечатаюсь еще

rev наследует эти противоречия.

В целом, мне кажется, лучше избавляться от механики в текстах ссылок, забыть про «подробнее», «здесь», «тут», «там», «скачать». Текст ссылки обладает заметным в настоящее время преимуществом — его индексируют и учитывают поисковики. Ничто на свете не мешает парсить вместо rel/rev тот же текст ссылки, разыскивая в нем нужные слова. Мешает только лень (атрибут тэга куда как легче прочитать).

У rel со стандартными словами есть одно важно применение (которое, впрочем, не прижилось особо) — у Opera есть тулбар, который позволяет быстро переходить на следующую/предыдущую/первую/последнюю итд страницу (адреса указываются через соотв. link rel). Еще, разумеется, упомянутые stylesheet и alternate — без этого щас ни один сайт не делается, наверное. Еще — значения rel, рекомендованные в микроформатах. Дальше этого идти я бы не рекомендовал.

1. Пишите на английском. Он роднее для html, чем русский.
2. Знаете, если всё в жизни стандартизовать, то жить станет трудно. Опечатаетесь — рано или поздно заметите и поправитесь. Если же вам надо, чтобы какое-нибудь интеллисенс выдавало список вариантов, то напишите расширение для своего редактора.

Текст ссылки обладает заметным в настоящее время преимуществом — его индексируют и учитывают поисковики. Ничто на свете не мешает парсить вместо rel/rev тот же текст ссылки, разыскивая в нем нужные слова. Мешает только лень (атрибут тэга куда как легче прочитать).

Основы HTML: работа со ссылками. Тег A и его атрибуты rel, target, name.

Рад приветствовать Вас на блоге Checho.ru! В сегодняшней статье мы начнем говорить о языке гипертекстовой разметки html. Данная публикация будет первой в своем роде (и далеко не последней), так как прежде я ничего подобного не писал.

План поста:

  1. Тег ссылки А – создаем гиперссылку в html документе с анкором и без него
  2. Открытие ссылки в новом окне. Атрибут target _blank
  3. Атрибут rel nofollow и тег noindex. Закрываем ссылку от индексации
  4. Ссылка якорь и как ее сделать. Атрибут Name

А вот сейчас, когда я набрал необходимые знания и проверил их на практике, с удовольствием поделюсь ими со своими читателями. Ведь недаром, сколько сил и времени на первоначальном этапе было потрачено, к примеру для того, чтобы знать, как вставить ссылку в html. Естественно, после прочтения моего поста Вы также будете это знать и уметь делать.

Вообще, стоит отметить, что теги ссылок просто необходимы в работе оптимизаторов, потому что их хлеб, это как раз поисковая оптимизация и продвижение сайта, и естественно без ссылок гуру в области SEO скорее всего не обходятся, что уж говорить про обычных блоггеров :).

Пожалуй, html тег ссылки A является одним из моих самых используемых, на ряду, с тегом img, который необходим для вывода изображений в тексте. В среднем, в каждой публикуемой мной статье, проставляется примерно пять ссылок, как на внутренние страницы, так и на внешние.

Не стоит забывать о том, что теги для сайта html используются не только при написании постов. Также, они будут нужны при изменении кода установленного Вами шаблона на CMS WordPress или любой другой системы управления сайтом.

Поэтому, нужно изучить хотя бы самые основные html теги, чтобы в дальнейшем не иметь проблем при работе со ссылками. К примеру, если Вы пользуетесь «Визуальным редактором», когда пишите свои статьи, то это не очень хорошо, потому как, если данный редактор не будет работать, Вы даже не будете знать элементарного кода, чтобы проставить ссылку.

В общем, знание основных понятий в языке разметки html, я считаю, сильно поможет Вам и упростит жизнь. Все таки время, которые Вы потратите сейчас на изучение, возможно нового для Вас материала, не будет потрачено зря.

Также существует еще очень много нюансов, которые облегчат Вам работу, и о которых, Вы прочитаете ниже в моей статье – это и rel=”nofollow”, и target=“_blank”, и много еще чего интересного связанного со ссылками.

Тег ссылки А – создаем гиперссылку в html документе с анкором и без него

[yandexd]
Как я уже выше успел заметить, ссылка один из самых используемых мною html тегов. Нужны они для того, чтобы пользователи могли без особых усилий из одного документа переходить на другой с помощью одного щелчка мышкой.

Однако, чтобы указать путь гиперссылке, нужно обязательно использовать атрибут href. Благодаря ему можно и нужно указывать URL страницы, на которую Вы хотите сослаться. Это могут быть как внутренние страницы Вашего сайта, так и страницы любого другого ресурса во всемирной паутине.

При чем ссылки на внутренние страницы с необходимым анкором, будут полезны во внутренней оптимизации сайта, что может увеличить Ваши шансы на попадание в ТОП выдачи поисковой системы. Подробнее об этом я писал в своем посте о внутренней перелинковке.

Анкор html тега ссылки А весомый фактор, который учитывают поисковые роботы, поэтому на него нужно обратить особое внимание. Я рекомендую использовать в анкоре ключевые слова, по которым Вы хотите, чтобы Ваша статья попала на первые позиции в выдаче.

Разобравшись немного с теорией гиперссылок в html документе, можно приступить и к наглядным примерам. Вот такой код будет иметь ссылка:

Как видите, ссылка начинается с открывающейся скобки « Становитесь моим фолловером

Все довольно таки просто. Также, я рекомендую Вам при использовании noindex использовать и атрибут rel с параметром nofollow, чтобы ссылка была неиндексируемой и не передавала внутренний вес внешнему ресурсу.

Кстати, я зайдя на любой сайт сразу вижу, где гиперссылка закрыта от индексации, а где наоборот открытая. Все благодаря, отличному дополнению для браузера Opera RDS bar. Также, с помощью данного плагина я могу отслеживать и другие параметры ресурсов, такие как Тиц и Page Rank, а также AlexaRank.

Ссылка якорь и как ее сделать. Атрибут Name

А сейчас я, возможно, для многих открою весьма занимательную вещь при работе со ссылками. Лично я узнал о ней лишь после того, как более полугода пользовался WordPress. Так вот, сейчас речь пойдет о якоре ссылок.

Благодаря ему, а также при использовании хэш-ссылки, можно ссылаться не просто на какую-то статью, но и на место в ней, которое необходимо, то есть на определенный участок текста. Это ннужно, когда публикация очень объемная и найти на ней нужную информацию будет затруднительно.

Так вот, браузер при нажатии на ссылку якорь открывает новую страницу и автоматически прокручивает до того места, где предварительно был проставлен атрибут name. Сейчас я более подробно расскажу, как все это устроено.

Сначала, нужно в статье, на которую Вы хотите сослаться выбрать участок текста, до которого будет прокручиваться страница в интернет браузере. То есть, если Вы даете ссылку, допустим о настройке плагина All in One SEO Pack (не является примером якоря), то и атрибут name должен размещаться в необходимом участке публикации.

Якорь ссылки в html выглядит следующим образом:

Как видите, атрибут name не имеет анкора, так как якорь состоит из открывающегося и закрывающегося тега A. Параметр атрибута Вы должны задать сами, указывается он после знака равенства и скобок, как показано выше на примере.

Теперь непосредственно в новом посте нужно указать хэш-ссылку, используя заранее приготовленный якорь. Таким образом, ссылка будет открывать сразу то место в тексте, которое необходимо. Данная хэш-ссылка будет иметь следующий вид:

В принципе html код ссылки практически не изменился. Только после указания URL страницы, на которую Вы хотите сослаться, нужно проставить знак решетки «#» (хэш-символ) и указать название якоря.

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

Что же, на этом у меня все, если возникли какие-либо вопросы, задавайте их в комментариях. Отмечу, что эта не последняя статья по html, в обозримом будущем будут еще публикации на эту тему.

Всем удачи, с Вами был Вячеслав Чечотенко!

Видео-эпилог: художник очень быстро рисует картины на стекле

HTML: Все о ссылках «A HREF REL»

Все знают, что типы ссылок описывают взаимосвязь между двумя или более страницами на сайте. Определение типа ссылки полезно для SEO, так как позволяет поисковым системам лучше понимать ваш сайт. Так же они могут объяснять причину, почему эта ссылка присутствует на данной странице и дать поисковому роботу гораздо больше информации, чем вы можете подумать.

Другие веб-службы, такие как социальные сети или инструменты языкового перевода так же смогут лучше понимать ваш сайт благодаря определению типов ссылок.

Краткий перечень типов ссылок

Тип Для чего используется
alternate альтернативный способ отображения страницы
author За ссылкой подробная информация об авторе
bookmark Постоянная ссылка
help Справка или информация помогающая с какой-то частью сайта или контента
license Ссылка на информацию об авторском праве
nofollow Ссылка, которую вы не рекомендуете. Возможно вы ее разместили их корыстных мотивов
prefetch Ресурс, который скорее всего заинтересует пользователя. Сообщает браузеру, что его можно заранее поместить в кэш
search Поиск по сайту
tag Ключевое слово или название категории сайта
next Ссылка на следующую страницу
prev Ссылка на предыдущую страницу

Как определить тип ссылки?

Для определения типа используется атрибут rel

rel=alternate
Тип alternate указывает на то, что по этой ссылкой идет альтернативный вид отображения страницы. Например, это может быть PDF версия, или версия оптимизированная для печати.

Так же у этого типа можно задать hreflang , который указывает на то, что по этой ссылкой идет страница другой языковой версии.

rel=author
Этот тип сообщает, что за ссылкой находиться подробная информация об авторе сайта или страницы.

rel=bookmark
Данный тип ссылки говорит, что ссылка является постоянной и адрес этой страницы не меняется никогда.

rel=help
Ссылка данного типа ведет к контенту справочного характера. Но есть важный момент. Help-ссылка контекстно-зависимая. Браузер сопоставит эту справочную информацию с родительским контейнером, в котором была размещена эта ссылка.

В этом примере ссылка ведет на справочную информацию о контенте расположенном в родительском элементе гиперссылки, а именно в форме комментария.

rel=license
Этот тип может использоваться когда ссылка ведет на лицензионное соглашение основного контента данной страницы. Ссылка данного типа должна быть размещена в пределах тега main сайта. Лицензионное соглашение относится только к тому контенту, которое размещено в пределах этой секции. Оно не будет относится к тому, что например у вас в подвале.

rel=nofollow
Этот тип сообщает, что поисковому роботу не следует воспринимать эту ссылку как ссылку, которую рекомендует публицист

rel=prefetch
Ссылки этого типа следует использовать когда вы ссылаетесь на некие внешние ресурсы, которые пользователь скорее всего откроет. Браузер закеширует заранее эту ссылку и она откроется очень быстро без всяких ожиданий.

rel=search
Этот тип сообщает, что ссылка ведет на интерфейс поиска

rel=tag
Ссылка данного типа ведет дает определения ключевого слова или категории сайта

rel=next и rel=prev
Указывает и используется в постраничной навигации. Ссылка на следующую страницу имеет тип next , а на предыдущую – prev

Элемент link HTML содержит связанную с документом информацию: альтернативные версии, авторы, авторские лицензии, иконки и т.д. Он должен содержать атрибут rel или itemprop , но не оба сразу. Атрибут href также является обязательным.

Когда атрибут itemprop отсутствует, этот элемент может быть объявлен только в разделе head . В противном случае он может быть объявлен в другом месте.

Примеры

В следующем примере предоставляется информация о документе с помощью элемента link с различными типами гиперссылок:

Атрибуты

Специальные атрибуты

Этот атрибут тега link в HTML содержит адрес ( URI ) связанного ссылкой ресурса. Он указывает браузеру, куда переходить по ссылке.

Наличие этого атрибута является обязательным. Если он отсутствует или имеет значение, которое не является допустимым URI , элемент не определяет ссылку.

CROSSORIGIN

Указывает, должен ли запрос к внешнему серверу предоставлять учетные данные CORS или нет. Допустимы два значения ( без учета регистра ):

  • anonymous : CORS запросы к элементу будут содержать установленный флаг « omit credentials «;
  • use-credentials : CORS запросы к элементу не будут содержать установленный флаг « omit credentials «.

Атрибут HTML link rel содержит разделенный пробелами список типов ссылок, указывающий, какое значение связанный ссылкой ресурс имеет для документа ( содержащего ссылку ).

Элемент link должен содержать либо атрибут rel , либо атрибут itemprop , но не оба сразу. Атрибут href также является обязательным.

MEDIA

Список медиа-запросов с указанием типов медиа ( и их характеристик ), для которых предназначен связанный ссылкой ресурс. Например, документ или ресурс может быть оптимизирован для печати ( меньше цветов, изображений и фоновых тонов ), под мобильные устройства или обычные экраны. Значение по умолчанию -« all «.

HREFLANG

Этот HTML link tag указывает язык, который будет использоваться в связанном ссылкой ресурсе ( указан в атрибуте HREF ).

Тип контента ( или Internet Media Type ), который должен содержать связанный ресурс.

SIZES

Разделенный пробелами список с размерами иконки ссылки. Каждый размер может состоять из двух целых чисел, разделенных буквой « х «, или из специального ключевого слова « any «, представляющего все возможные размеры. Каждое значение чувствительно к регистру.

Этот атрибут тега link в HTML должен объявляться только, когда присутствует атрибут rel и он имеет значение « icon «. Иначе ситуации его использование является недействительным.

CHARSET

Кодировка символов целевого ресурса. Этот атрибут является устаревшим и в HTML5 уже не используется. Вместо него разработчикам рекомендуется использовать HTTP-заголовки Content-Type , чтобы предоставить информацию о наборах символов в документах и других ресурсах.

Значение текущего документа ( содержащего ссылку ) для связанного ссылкой ресурса.

Этот атрибут HTML link tag является устаревшим и в HTML5 уже не используется. Разработчикам рекомендуется заменить его атрибутом rel .

Данная публикация представляет собой перевод статьи « LINK ELEMENT » , подготовленной дружной командой проекта Интернет-технологии.ру

Что такое «rel=»?

В HTML атрибут rel (от англ. «relationship» ‒ «отношение, взаимосвязь») определяет взаимосвязь между текущим и связанным с ним ссылкой документом.

Когда ссылка ведет нас к ресурсу, атрибут rel объясняет, почему ссылка ведет к этому адресу. Ссылаться можно, например, на файл стилей, который нужно задействовать с документом. Или на страницу, которая наполнена тем же содержанием, что и исходный документ, но отображается в стандартном формате для подписки на RSS-новости. Также адрес может быть языковым переводом или PDF-версией. Ссылочные отношения применяются также, если ссылка ведет на предыдущие или последующие страницы электронной книги.

Большинство современных браузеров не реагируют на значения этого атрибута, но им руководствуются поисковые роботы при индексировании страниц сайтов. Веб-службы, вроде социальных сетей или инструментов языкового перевода также лучше поймут ваш сайт, если на нем определены типы ссылок. Может применяться как к ссылке с тегом с таким синтаксисом:

Либо к тегу , который устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. Синтаксис в этом случае будет таким:

Сейчас чаще всего используют значение «nofollow», которое запрещает поисковой системе переходить по конкретной ссылке, то есть, не передает им тИЦ и PR, и «canonical», которая определяет предпочитаемый адрес для индексации поисковыми системами. Но использование атрибута rel не ограничивается только значениями «nofollow» и «canonical»:

rel=nofollow

Значение предназначено для поисковых систем: указывает им, что ссылка не передает свой вес той странице, на которую ссылается. Пример:

rel=canonical

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

Подробнее об использовании rel=canonical в нашей статье о комплексном аудите сайта.

rel=alternate

Указывает на то, что по этой ссылкой располагается альтернативный вид отображения страницы. Например, это может быть PDF-версия, или версия для печати:

Также у этого типа можно задать hreflang, который указывает на то, что по этой ссылке находится страница другой языковой версии:

rel=author

Сообщает, что за ссылкой находится информация об авторе сайта или страницы:

rel=bookmark

Говорит, что ссылка является постоянной и адрес этой страницы не меняется никогда:

rel=help

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

В этом примере ссылка ведет на справочную информацию о контенте, который расположен в родительском элементе ссылки, а именно в форме комментария.

rel=license

Используется, когда ссылка ведет на лицензионное соглашение основного контента страницы. Ссылка должна быть размещена в пределах тега main сайта. Лицензионное соглашение относится только к тому контенту, которое размещено в пределах этой секции. Оно не будет относится к тому, что находится, например, в футере:

rel=dns-prefetch, preconnect, prefetch, preload

Используйте ссылки этого типа, когда ссылаетесь на внешние ресурсы, которые пользователь откроет с большой вероятностью. Браузер кэширует заранее эту ссылку и она откроется быстрее:

О тонкостях использования этих значений — в статье на Хабре.

rel=search

Этот тип сообщает, что ссылка ведет на интерфейс поиска:

rel=tag

Ссылка этого типа ведет дает определения ключевого слова или категории сайта:

rel=first, next, up, last, prev

Эти значения используется в постраничной навигации. Например, ссылка на следующую страницу имеет значение next, а на предыдущую – prev:

rel=external

Означает, что ссылка будет открыта в новом окне. А сама ссылка будет индексироваться, передавать вес. В WordPress этот атрибут весьма широко применяется в комментариях. Может использоваться совместно с nofollow, чтобы ссылка не передавала вес:

rel=icon

Используется для ассоциации иконки сайта с его содержимым. Указывается в теге :

Большинство браузеров не конфликтуют с этим атрибутом, привязывая иконку сайта к его страницам. Также есть возможность определять размер изображения иконки при помощи size:

Это далеко не все возможные значения атрибута rel, подробнее читайте в справочнике HTML.

Не пренебрегайте использованием атрибута rel, он позволяет легко добавить в ваши ссылки больше семантического смысла и создать связи между страницами сайта, которые затем будут обработаны поисковыми роботами, агрегаторами и браузерами.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL