Продолжение нашей статьи: Разнообразие атрибута rel, использование
Термин rel в переводе с английского обозначает взаимосвязь. В HTML он его суть заключается в том, чтобы давать информацию, насколько текущий документ связан с тем, на который он содержит ссылку.
Когда определенная ссылка переводит нас на другой ресурс, атрибут rel используется для объяснения логики – почему именно на этот адрес. Ссылаться можно на страницу, содержание которой взаимосвязано с текущим документом, или на файл, который нужно использовать с этим документом. Еще ссылка может быть PDF или иноязычной версией документа. Ссылка, как взаимосвязь между текущим и иным документом используется часто в электронных книгах для переадресации на следующую (предыдущую) страницу.
Сегодня браузеры практически не обращают внимания на атрибут rel, но на него обращают внимание роботы поисковых систем. Некоторые ресурсы, такие как соцсети, также лучше будут взаимодействовать с сайтом, если типы ссылок на нем будут определены. Возможно использование, как к ссылке с тегом <a> с таким синтаксисом:
<a rel="..." href="/...">...</a>
Также возможно использование <link>, который отвечает за связь с другим документом. В этой ситуации синтаксис будет таким:
<link rel="..." href="/...">
Сегодня активно используют «nofollow». Это значение создает запрет на переход поисковой системы по определенной ссылке. Другими словами не передает им PR и тИЦ. Также используют и другие значения, такие как «canonical». Оно определяет, какой адрес является предпочтительным для поисковых машин. Использование rel может применяться более широко:
rel=nofollow
Такое значение используется поисковыми машинами для того, чтобы определить, передает ли ссылка вес той веб-странице, на которую ссылается:
<a rel="nofollow" href="/page.html">Робот, не переходи на эту страницу</a>
rel=alternate
Используется для указания того, что ссылка ведет на альтернативное изображение страницы (версия для печати, PDF):
<a rel="alternate" type="application/pdf" href="/page.pdf">PDF версия страницы</a>
Для этого типа можно задать hreflang, что позволит указать на то, что ссылка ведет на иноязычную версию:
<a rel="alternate" hreflang="en" href="/english-version.html"> Spanish version</a>
rel=canonical
Это значение дает указание на адрес сайта, которому отдается предпочтение при поиске. Используется в теге <link> в хэдере:
<link rel="canonical" href="http://www.example.com/">
rel=bookmark
Указывает на то, что ссылка не меняется:
<a rel="bookmark" href="/about.html">Постоянная ссылка на страницу</a>
rel=author
Используется для сообщения, что ссылка ведет на сведения об авторе страницы (сайта):
<a rel="author" href="/about.html">О сайте</a>
rel=help
Говорит о том, что ссылка ведет на текст, являющийся справочной информацией.
<form id="form"> <label for="comment">Ваш комментарий:</label> <textarea id="comment"></textarea> <input type="submit" value="Оставить комментарий"> <a rel="help" href="/comments.html">Помощь по комментариям</a> </form>
Эти примеры показывают, что ссылка ведет на контент, раскрывающий информацию о самом тексте, который расположен в комментариях.
rel=license
Указывает на то, что по ссылке размещено лицензионное соглашение, которое относится к основному тексту страницы. Размещение ссылки должно быть ограничено тегом main. Это определяет контент, к которому ссылка привязана:
<a rel="license" href="/license.html"> Лицензионное соглашение</a>
rel=dns-prefetch, preconnect preload, preconnect, prefetch
Такие ссылки применяются в случаях, когда используется переадресация на сторонние сайты, которые с высокой степенью вероятности будут открыты. Эта ссылка кэшируется браузером заранее, что позволяет ускорить время на ее открытие в дальнейшем:
<a rel="prefetch" href="/license.html">Важная информация!</a>
rel=tag
Определяет категорию сайта или определяет ключевой запрос:
<a rel="tag" href="/search.html">Эта страница относится к странице поиска</a>
rel=search
Такая ссылка ведет к поиску на сайте:
<a rel="search" href="/search.html">Поиск по сайту</a>
rel=first, up, prev, next, last
Такие ссылки необходимы для навигации по странице. Они ведут на начало, конец, предыдущую, последующую страницы:
<ul> <li><a rel="next" href="/page-1.html">2 страница</a></li> <li>Текущая страница</li> <li><a rel="prey" href="/page-3.html">4 страница</a></li> </ul>
rel=icon
Необходима для того, чтобы связать содержимое сайта с иконкой:
<link rel="shortcut icon" href="/favicon.ico"></link>
Многие браузеры не учитывают это значение и автоматически связывают содержимое с основным логотипом ресурса. Размер иконки можно менять, для этого используется значение size:
<link rel="icon" href="/favicon.png" sizes="18x18" type="image/png"></link>
rel=external
Такое значение говорит о том, что ссылка будет открыта в новом окне. Также она будет индексироваться. В платформе WordPress это часто используется для комментариев:
<a rel="external nofollow" href="/page.html">Открыть в новом окне</a>
Использование атрибута rel имеет значение и пренебрегать им не стоит. Таким образом вы повысите связь между страницами и в итоге они будут более привлекательно выглядеть для поисковых систем, что скажется на посещаемости сайта.
Более подробно о нескольких атрибутах, не описанных в предыдущей статье:
Что такое rel=canonical?
- Использование записи rel=canonical определяет наиболее предпочтительную для индексации страницу для поисковых роботов.
- Помогает улучшить ссылочные показатели страниц доступных по множеству ссылок для правильного ранжирования в поиске.
- Канонический URLS решает проблемы с дублированием контента.
<link rel="canonical" href="https://var.com/main.html"/>
Приведенный выше код означает:
- Что данная страница должна индексироваться по приведенной ниже ссылке
- "https://var.com/main.html".
Цель
Основная цель использования записи rel=canonical - указание предпочтительного для индексации поисковыми роботами URL
Зачем указывать для поисковых роботов URL-ы?
Чтобы ваш сайт лучше ранжировался в выдаче. Основным фактором для ранжирования является количество сайтов, которые ссылаются на данную страницу.
Основные проблемы, которые rel=canonical решаетВ упрощенном примере может показаться, что сайт состоит только из одной страницы.
Предположим, что есть сайт с адресом www.example.com и так как он состоит только из одной страницы, вроде бы не должно быть проблем с дублями. Верно?
Не верно.
Ниже приведен список возможных вариаций адреса, по которому доступен данный сайт.
- http://www.example.com/
- http://www.example.com
- http://example.com/
- http://example.com
- https://www.example.com/
- https://example.com/
- http://www.example.com/index.html
- http://example.com/index.html
- https://www.example.com/index.html
- https://example.com/index.html
И это не полный список.
Теперь обратимся к пользователю, который хочет указать ссылку на этот сайт.
Ссылка может быть любой из приведенного списка вариаций.
Как это повлияет на ранжирование
Если несколько человек укажут 10 разных вариантов ссылки на страницы, то каждая версия страницы, будет иметь только одну ссылку.
Однако, если вы укажете канонический URL, тогда у вас будет 10 ссылок на один url, а не 1 ссылка на 10 url-ов.
Динамические url-ы
Допустим у нас есть страница, которая продает носки, и ее URL:
http://www.example.com/socks.html
На данной странице носки можно отсортировать по цвету. И например, если пользователь отсортировал носки по фиолетовому цвету, то URL ссылки будет выглядеть так:
http://www.example.com/socks.html?color=purple
По данному сценарию, можно понять, что мы имеем множество различных URL-ов, по которым можем попасть на страницу по носкам.
Благодаря использованию канонических ссылок на основной странице сайта, поисковые машины видят один url, а не множество. Они поймут, что все ссылки на самом деле относятся лишь к одной странице о носках.Канонические ссылки — лучший вариант, который рекомендуют все поисковики и профессионалы по продвижению. Я использую их на каждой странице своего сайта.
Где указывать rel=canonical used?
Как правило запись добавляют в тэг head.
Примечание: Можно также указать запись и в header сайта, однако данный способ не всегда хорошо работает и не всеми поддерживается.
Что такое rel=dns-prefetch?
- Это способ ускорить загрузку веб-страницы, с помощью предварительного разрешения доменных записей.
- Использование rel=dns-prefetch предполагает, что браузер сначала сделает вызов DNS необходимого домена, до фактической загрузки.
<link rel="dns-prefetch" href="https://cdn.varvy.com">
Приведенный выше код означает:
- Я хочу получить доменное имя, перед загрузкой
- Имя домена "cdn.varvy.com"
Цель
Основная цель использования rel=dns-prefetch – это ускорение загрузки веб-страниц, когда для страниц используются разные домены.
Процесс запроса и загрузки страницы оптимизируется, благодаря эффективному контролю.
Процесс часто называют "DNS prefetching".
Определение W3C
"Предзапрос ссылки, используется для определения источника, который будет использован для загрузки необходимых ресурсов, а также для того, чтобы браузер получил данные как можно быстрее."
Где используется rel="dns-prefetch" used?
В тэге head документа.
Важность применения DNS предзагрузки
В жизни можно быть уверенным в двух вещах — в смерти и налогах.
При загрузке страницы, можно быть уверенным в одном запросе DNS на один домен.
Это значит, если ваша страница найдена на трех доменах, будет сделано соответственно минимум три запроса. Если вы используете ресурсы с 10 доменов, вы получите минимум 10 запросов.
Поэтому используйте возможность минимизировать dns запросы.
Где полезно применять DNS предзагрузку?
Например, у вас на сайте целая пачка js файлов, которые используются при загрузке страницы. У вас также могут использоваться другие сторонние инструменты (adsense, seo инструменты, инструменты маркетинга и т.д.).
В реальности вы не знаете наверняка, какие файлы браузер начнет загружать в первую очередь.
Вы точно знаете, что будет задействован CDN. В данном случае самое время использовать DNS предзапрос, потому что тогда в первую очередь будет выполнен запрос к DNS, а не загрузка сторонних файлов. Т.е. Данная практика позволит быстрее отобразить страницу.
Предзапрос DNS фактически дает вам возможность контролировать то, как страница будет загружаться, «намекая» браузеру, с чего начать.
Где НЕ полезен DNS предзапрос?
Если все ресурсы и файлы страницы лежат на одном домене с html.
Если все файлы js, css, картинки и т. д. лежат на одном домене вместе с самим сайтом, тогда нет необходимости указывать предзапрос, это может только навредить.
Как правило лучше правильно организовать веб-страницу, чем делать предзапросы.
Перед тем как делать предзапрос DNS, возможно вам стоит узнать как можно уменьшить количество вызовов доменов. Я понимаю, что не на каждом сайте это можно сделать, но все же задайте себе 3 вопроса:
- Есть ли на странице ресурсы с разных доменов?
- Данные ресурсы вызываются одинаково?
- Могу ли я уменьшить кол-во доменов?
1. Есть ли на странице ресурсы с разных доменов?
Если HTML файл лежит на домене example.com, а CSS на cdn.example.com, а картинки подгружаются с 1234bucket.cdn.com, значит вы делаете загрузку с трех разных доменов, а могли бы перенести все эти ресурсы на один.
2. Данные ресурсы вызываются одинаково?
Если один CSS файл грузится c "www.example.com", а другой с "example.com", нужно это исправить. Убедитесь, что оба ресурса вызываются либо с версии www либо без "www".
То же самое касается https vs http, довольно распространенная практика.
3. Могу ли я уменьшить кол-во доменов?
Проверьте, все ли указанные на сайте ресурсы действительно нужны. Такие файлы как шрифты-иконки, плагины, социальные кнопки и т.д. часто используются не на каждой странице сайта, однако все равно вызываются.
Узнайте, как загружаются ваши страницы, с помощью сервиса page resource tool, так вы узнаете какие домены вызываются при загрузке.
Что такое rel=nofollow?
- Использование rel=nofollow сообщает поисковым роботам, чтобы они не следовали ссылке.
- Это указывает на то, что ссылка не подтверждается оригинальным автором или издателем страницы.
- Он также используется, когда ссылка включена из-за коммерческой (оплачиваемой) связи.
Пример использования
<a href="/example.com" rel="nofollow">текст ссылки</a>
Приведенный выше код говорит...
- Вот ссылка на example.com
- Если вы - поисковая система, пожалуйста, не отдавайте должное этой ссылке, поскольку я ее не одобряю.
Определение W3C
"Ключевое слово nofollow указывает, что ссылка не подтверждена оригинальным автором или издателем страницы или что ссылка на ссылочный документ была включена, прежде всего, из-за коммерческих отношений между людьми, связанными с этими двумя страницами." 1
Где используется rel="nofollow"?
Поскольку rel=nofollow является директивой, специфичной для ссылок, она используется в HTML-ссылке.
До появления rel=nofollow вам приходилось ставить nofollow для всех ссылок на странице, либо вообще ничего. Теперь, когда стал доступен rel=nofollow, мы использовать атрибут для конкретной ссылки.
Цель
Основными причинами существования rel=nofollow является контроль спама и запись платных ссылок.
- 2004: поисковые системы вводят rel=nofollow для управления спамом комментариев
- 2005: рекомендуется Google для платных ссылок
- 2016: добавлено в руководство Google для веб-мастеров
В конце концов, большинство людей используют его сейчас, чтобы снизить риск штрафных санкций в поисковых системах.
Когда использовать rel="nofollow"?
Существует четыре основных сценария, когда рекомендуется rel=nofollow.
1. Ненадежный контент
Есть много ситуаций, когда вы можете не контролировать, что люди публикуют на вашем сайте. Общие сценарии ...
- Комментарии к блогу
- Обсуждение форума
- Социальные виджеты
В приведенных выше ситуациях целесообразно убедиться, что любые ссылки используют rel=nofollow. Если вы не используете nofollow на ненадежные ссылки, вы в основном предлагаете спам и потенциально рискуете ранжированием в поисковой системе.
2. Платные ссылки
Google наказывает сайты, которые не добавляют rel=nofollow к платным ссылкам.
Если у вас есть следующие типы ссылок, вы не должны следовать им ...
- Платная ссылка (кто-то дал вам деньги или услуги, чтобы добавить ссылку)
- Партнерские ссылки
- Ссылка рекламного объявления
- Ссылки с оптимизированным текстом-якорем в статьях или пресс-релизах, распространяемых на других сайтах
Добавление rel=nofollow к платным ссылкам уже включено в руководства Google для веб-мастеров. Подробнее о платных ссылках читайте здесь.
3. Приоритезация сканирования
Приоритезация сканирования означает изменение способа взаимодействия поисковых роботов, таких как Googlebot, с вашим сайтом.
В некоторых сценариях существует ограничение на то, сколько страниц поисковые роботы будут сканировать.
Более простым примером этого было бы, если на веб-сайте было 100 страниц, и по какой-то причине 90 из этих страниц не были важны для поисковых систем или ранжирования (страницы входа, страницы результатов поиска, политики конфиденциальности или что-то еще, что на самом деле не имеет значения для ранжирования).
В этом случае важными будут те десять страниц, которые вы хотите просканировать, а не другие 90.
Добавив rel=nofollow к вашим внутренним ссылкам на эти 90 страниц, вы превратите свой 100-страничный веб-сайт в 10-страничный веб-сайт в отношении робота Googlebot и других поисковых систем.
Это определило бы «приоритет» этих десяти страниц.
В большинстве сценариев такая приоритизация обхода не нужна, но существуют ситуации, когда этот метод может быть полезен для определения того, как поисковые системы видят ваш сайт.
4. Защита от наказания
Основная причина, по которой люди используют rel=nofollow, заключается в том, чтобы избежать штрафа за ранжирование в поисковых системах.
- Не использовать nofollow для платных ссылок? - Ваш рейтинг будет снижен в Google.
- Не использовать rel=nofollow на сомнительных ссылках? - Ваш рейтинг будет снижен в Google.
- Не использовать rel=nofollow в своих пресс-релизах? - Ваш рейтинг будет снижен в Google.
Что касается функциональности rel=nofollow, то это защиты от спама. Что касается человеческой реальности, почему nofollow активно используется ...
Защита от штрафов/наказаний/санкций со стороны поисковой системы.
Иногда это означает, что веб-мастер будет злоупотреблять rel=nofollow, а не рисковать чем-либо.
Как мы используем rel=nofollow
Мы используем nofollow на этом сайте примерно на каждой странице. Способ, которыми мы пользуемся, это обозначать платные ссылки и партнерские ссылки.
Мы не используем его ни на каких других ссылках, потому что мы единственные авторы на этом сайте, и поэтому каждая ссылка создается нами. Поэтому нет риска непреднамеренных ссылок, исходящих с этого сайта (как это было бы, если бы у нас были комментарии или другой контент созданный пользователем).
Единственными ссылками nofollow являются ссылки, которые вы видите на боковой панели партнерские ссылки в объявлениях.
Мы делаем это, следуя руководству Google для веб-мастеров по платным ссылкам и рекламным объявлениям.
Что такое rel=author?
- Атрибут rel=author указывает на то, что приведенная ссылка относится к информации об авторе данной страницы или статьи.
- Атрибут указывает взаимосвязь между двумя страницами: той, на которой он расположен и документом об авторе.
Пример:
<a href="/author-page.html" rel="author">link text</a>
Приведенный выше код означает:
- Что есть ссылка «author-page.html»
- и данная ссылка относится к документу с информацией об авторе.
HTML5 определение
"атрибут author указывает на то, что документ, на который ссылаются, предоставляет более подробную информацию об авторе контента, расположенного в текущем блоке (где расположен сам атрибут) или всего контента на странице"
Где применяется?
Данный атрибут может использоваться на любой веб-странице, где владелец хочет указать автора.
Цель
Указать взаимосвязь между документом и автором документа.
Запись rel=author можно использовать при ранжировании
Несколько лет назад Google использовал авторство в своей выдаче для показа картинок/фото (сейчас данной функции нет).
Существует гипотеза, что Google по-прежнему использует авторство как фактор для ранжирования результатов, так как существует патент на данный алгоритм.
Google не заявляет открыто о том, что rel=author используется при ранжировании, но однако вероятность существует.
Способ применения rel=author
Наиболее частый вариант указания автора – это стандартный атрибут HTML ссылки. Пример:
<a href="/author-page.html" rel="author">link text</a>
Однако, rel=author также можно использовать внутри тэга head. Например:
<link rel="author" href="https://varvy.com/author.html">
Еще один вариант использования, когда вместо ссылки на документ указывается e-mail автора. Например:
<a href="mailto:Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript." rel="author">
Можно использовать запись rel=author на каждой странице сайта.
На мой взгляд, это лучший способ защиты контента от кражи. Конечно, rel=author не защищает контент в буквальном смысле этого слова, однако мы знаем, что несколько лет назад Google идентифицировал авторов и представители Google также отмечали, что владельцам сайтов имеет смысл указывать авторов статьей.
Что такое rel=amphtml?
- Запись rel=amphtml определяет AMP версию контента на странице.
- Указание AMP для ссылки на страницу, позволяет Google определить версию AMP для текущей страницы.
<link rel="amphtml" href="https://varvy.com/amp-page.html">
Приведенный выше код указывает:
- AMP версию данной страницы
- Версия находится по адресу amp-page.html
Где применяется?
Так как атрибут rel=amphtml определяет AMP версию страницы, он должен быть расположен на обычной странице без AMP.
На стандартной странице атрибут rel=amphtml указывает AMP версию. В свою очередь сослаться на стандартную версию страницы можно с помощью записи rel=canonical.
ЦельОсновная цель использовать запись rel=amphtml - распознать и индексировать AMP страницу.
AMP и Google распознание/анализ
Когда Googlebot находит запись rel=amphtml, он сканирует страницу, чтобы затем внести ее в индекс Google.
При условии, что страница Amp не содержит ошибок, она будет добавлена в Google CDN (Сеть доставки (и дистрибуции) контента).
В будущем, когда пользователь мобильного устройства будет искать эту страницу, Google покажет ему ее сохраненную копию из CDN.
Что такое rel=apple-touch-icon?
Запись rel=apple-touch-icon определяет картинку/иконку на устройствах Apple, которая определяет данный сайт или страницу.
Пример использования<link rel="apple-touch-icon" href="/custom_icon.png">
Приведенный выше код означает:
- Для данной страницы определена иконка
- Иконка расположена по адресу "/custom_icon.png"
Где используется данный код?
В тэге head документа.
Цель
Основная цель применения записи rel=apple-touch-icon – это обозначение иконки/логотипа для страницы.
Ее функцию можно также сравнить с Favicon для операционной системы Windows, которые присваиваются закладкам, ссылкам, сохраненным страницам.
