Гиперссылка — это однонаправленная (движущаяся или действующая в одном направлении) ссылка в электронном документе. Гиперссылки могут соединять два разных документа, а также различные разделы одного документа. Текст, обогащенный гиперссылками, называется гипертекстом.
Консорциум всемирной паутины (W3C) определяет гипертекст следующим образом:
«Гипертекст — это текст, который не ограничен линейностью.
Гипертекст — это текст, который содержит ссылки на другие тексты.»
Вообще говоря, это не обязательно линейные тексты, которые связаны с другими текстами посредством гиперссылок. Термин «гипертекст» был введен американским философом Тедом Нельсоном.
Наиболее распространенной гипертекстовой системой в мире является всемирная паутина (также известная как ‘web’ или ‘www’). В Интернете гиперссылки реализуются с помощью языка разметки HTML для связывания веб-страниц и других ресурсов между собой. В этой статье мы сосредоточимся на гиперссылках в веб-документах, представим их структуру, свойства и приведем несколько примеров их использования.
Гиперссылки — это ссылки в электронных документах и основа сетевой структуры, которой является всемирная паутина. Щелчок на гиперссылке позволяет переходить между различными элементами текста в документе или между различными веб-сайтами и, таким образом, осуществлять нелинейную организацию контента.
Гиперссылки во всемирной паутине
В HTML-документах гиперссылки реализуются с помощью элементов <a> и <link>. Если элемент <a> определяет положение гиперссылки в области содержимого (body) HTML-документа, то элемент <link> в области заголовка (head) используется для определения связей с другими документами и ресурсами.
В следующем параграфе мы сосредоточимся на элементе <a>, другими словами, на гиперссылках в теле HTML. Они видны посетителям сайта, на них можно нажимать, и они относятся к центральным навигационным инструментам всемирной паутины, так же как адресная строка браузера или поля ввода поисковых систем.
Информация в заголовке <ссылка> считывается и обрабатывается исключительно агентами пользователя, такими как веб-браузеры. Таким образом, можно сделать доступными такие ресурсы, как таблицы стилей, фавиконы или лицензии на авторские права. Кроме того, элемент link определяет логические связи между документами веб-проекта для определения альтернативных страниц, языковых вариантов или основного (канонического) URL страницы.
| HTML-ссылки | |
|---|---|
| Элемент HTML | Описание |
| <ссылка> | HTM-элемент <link> используется исключительно в области заголовка (head) HTML-документа и позволяет веб-разработчикам связывать HMTL-документы с другими ресурсами. |
| <a> | С помощью HTML-элемента <a> операторы веб-сайтов определяют положение гиперссылок в теле HTML-документа. Эти HTML-теги также называются якорями. |
Структура гиперссылки
Гиперссылки в теле HTML реализуются с помощью элемента якоря. Базовая схема соответствует следующему примеру:
<a href="https://www.example.org">Linktext</a>Элемент a состоит из начального и конечного тегов, которые заключены в угловые скобки и являются типичными для HTML. Начальный и конечный теги элемента a окружают так называемый текст ссылки. Видимый и кликабельный текстовый элемент.
В качестве альтернативы можно хранить элементы изображений с гиперссылками. В этом случае начальный и конечный теги элемента a окружают HTML-код для встраивания графики.
<a href="https://www.example.org"><img src="bild.jpg" alt="Bild"></a>Как правило, элемент a определяет не только якорь гиперссылки и начальную точку ссылки, но и цель ссылки. Цель гиперссылки задается атрибутом href, который имеет в качестве значения уникальный идентификатор — унифицированный идентификатор ресурса (URI). Целью гиперссылки обычно является URL веб-ресурса или переход на другую часть документа. Атрибуты HTML и их значения определяются отдельно пробелами в начальном теге соответствующего элемента HTML.
Приведенные выше примеры ссылок ведут на веб-сайт, который имеет адрес
www.example.org
в качестве URL. Это стало возможным благодаря HTTPS. По умолчанию этот тип гиперссылки направляет интернет-пользователей на верхнюю часть связанного сайта.
Однако если это ссылка на внутреннюю цель в текущем документе, будет использована HTML-разметка по следующей схеме:
<a href="#Abschnitt2">Linktext</a>Обратите внимание, что начиная с HTML5 цели ссылок внутри документа должны определяться как маркеры с использованием уникальных идентификаторов. В HTML4 имя атрибута использовалось в элементе a.
<h1 id="Paragraph1">First paragraph</h1>
<p>Example text<p>
<h2 id="Paragraph2">Second paragraph</h2>
<p>Example text<p>Если, с другой стороны, вы хотите сослаться на переход страницы во внешнем документе, вы можете объединить URL целевой страницы с хэшем (#) и соответствующим ID нужного перехода страницы.
<a href="https://www.example.org#Abschnitt2">Linktext</a>Элемент a в принципе не имеет обязательных элементов. Если должна быть реализована гиперссылка, то цель ссылки должна быть указана через href. Кроме того, элемент a поддерживает различные атрибуты, которые могут быть реализованы при необходимости для предоставления дополнительной информации для пользователей или пользовательских агентов.
В следующей таблице приведены наиболее важные атрибуты элемента a:
| Атрибуты элемента a | |||
|---|---|---|---|
| Атрибут | Описание | HTML4 | HTML5 |
| href | Атрибут href (сокращение от hyper reference) определяет цель ссылки. В качестве значения атрибута ожидается URI веб-сайта. Пример: href=»https://www.example.org». URL https://www.example.org определяется как целевой адрес гиперссылки. | ✔ | ✔ |
| title | Атрибут title позволяет добавить к гиперссылке любой заголовок. В качестве значения атрибут требует строку, заключенную в кавычки. Заголовок ссылки обычно отображается в веб-браузере в виде всплывающей подсказки, которая появляется всякий раз, когда пользователь наводит курсор мыши на текст ссылки. Пример: title=»Любой заголовок ссылки». | ✔ | ✔ |
| target | С помощью атрибута target вы можете определить целевой фрейм, в котором цель ссылки должна быть открыта веб-браузером. В качестве значения атрибута требуется имя нужного фрейма. По умолчанию атрибут target имеет значение _self. Целевая ссылка открывается в указанном фрейме в текущем окне браузера. Если вы хотите, чтобы такого эффекта не было, атрибут target можно опустить. Отклонения от стандарта определены в явном виде. Пример: target=»_blank». Веб-браузер открывает целевую ссылку в новой вкладке или окне браузера. | ✔ | ✔ |
| rel | С помощью атрибута rel вы определяете логическую связь между целевым ресурсом и исходным документом. В качестве значения атрибут rel требует одно или несколько имен типов ссылок, разделенных пробелами. Пример: rel=»nofollow». Тип ссылки nofollow позволяет операторам сайта исключить гиперссылку из рейтинга поисковых систем. Если атрибут rel содержит значение nofollow, гиперссылка определяется как ссылка nofollow. Эта информация сообщает ботам поисковых систем, что они не должны переходить по ссылке, если наткнутся на нее при просмотре веб-страницы. Таким образом, ссылка nofollow не влияет на позицию сайта, определяемую алгоритмами поисковых систем rel=»noreferrer». Как правило, веб-браузер, переходя по гиперссылке, передает адрес источника ссылки на сервер целевой ссылки. Если используется атрибут rel со значением noreferrer, браузеру дается указание опустить эту информацию в HTTP-заголовке запроса. Оператор целевой ссылки не выясняет, как посетитель попал на сайт, на который ведет ссылка. Более подробную информацию об атрибуте noreferrer можно найти в статье об анонимных ссылках. | ✔ | ✔ |
| скачать | Атрибут download был введен в новой версии HTML 5 и определяет цель ссылки как ресурс, который загружается, когда пользователь интернета нажимает на ссылку. Значением атрибута download является имя файла, доступного для загрузки. Правильное расширение файла автоматически определяется и добавляется веб-браузером. Пример: download=»pricelist-2018″. | ✘ | ✔ |
| имя | Атрибут name позволяет присвоить элементу a имя, которое в дальнейшем может быть использовано в качестве перехода на страницу. HTML5 запрещает атрибут name. Вместо него используйте глобальный атрибут id. Пример HTML4: <a name=»Paragraph2″>Link text</a>. Пример HTML5: <a id=»Paragraph2″>Link text</a>. | ✔ | ✘ |
Обратите внимание, что HTML5 больше не поддерживает некоторые атрибуты a предыдущего стандарта и предоставляет ряд новых атрибутов.
Типы ссылок и их значение для поисковой системы
Для связи веб-страниц используются гиперссылки с различными функциями. Различные типы ссылок были установлены пользователями Интернета и теперь считаются общепринятыми. Их можно условно разделить на внутренние и внешние гиперссылки. Внутренние ссылки — это все ссылки между отдельными подстраницами домена. Внешние ссылки соединяют различные домены друг с другом.
Внутренние и внешние ссылки используются в основном пользователями для навигации по веб-сайтам. Дополнительное преимущество гиперссылок в контексте поисковой оптимизации (сокращенно: SEO) появилось только с созданием ботов Google, особенно поисковых краулеров, которые также используют гиперссылки для разработки веб-сайтов и оценки связей с другими веб-сайтами. Долгое время гиперссылки были основным критерием рейтинга сайта, что делало их решающими для ранжирования в поисковых системах.
Сегодня важность гиперссылки релятивизировалась. Современные алгоритмы поисковых систем используют множество факторов ранжирования, чтобы представить пользователям Интернета наиболее релевантные результаты по каждому поисковому запросу. Тем не менее, внутренняя перелинковка и профиль обратных ссылок по-прежнему очень важны для поисковой оптимизации.
Внутренние гиперссылки
Организация внутренних ссылок в рамках веб-проекта называется структурой ссылок. Структуры ссылок основаны на стратегических наблюдениях. Цель состоит в том, чтобы направить поток посетителей через сайт упорядоченным образом. Это называется «путь клика».
Пути кликов обычно имеют конкретную цель, например, операторы интернет-магазинов хотят продать товары и услуги, привлечь подписчиков на рассылку новостей или побудить посетителей принять участие в тотализаторе.
Путь клика состоит из серии шагов, которые посетитель сайта должен выполнить, чтобы достичь цели, намеченной оператором. Это не обязательно переход от одного URL-адреса к другому: пути клика обычно ведут на несколько веб-страниц.
Возможными структурами внутренней перелинковки являются линейная структура, древовидная структура, звездная структура и сетевая структура:
- Линейная структура: в линейной структуре ссылок подстраницы веб-страницы связаны таким образом, что создается предопределенный путь клика. Посетители всегда попадают на сайты с линейной структурой ссылок в порядке, желаемом оператором, что дает ему максимальный контроль над траекторией клика. Однако посетители могут счесть такую структуру несколько стесненной. Линейная структура ссылок типична для динамических веб-проектов, таких как блоги
- Древовидная структура: если внутренняя перелинковка следует древовидной структуре, то веб-сайт основан на структуре, в которой подстраницы проекта отнесены к различным уровням иерархии. Подобные структуры ссылок типичны для интернет-магазинов. Обычно посетитель сначала попадает на целевую страницу, оптимизированную для поисковой системы, а затем переходит по клику на страницы нужных категорий и товаров. Тематическая направленность веб-страниц (категория, подкатегория, продукт, статья) обычно становится более конкретной, чем дальше потенциальный клиент заходит на сайт.
- Звездная структура: звездная структура — это когда веб-страница предлагает несколько ссылок на другие подобные веб-страницы в рамках одного проекта. Подобные организационные принципы характерны для онлайн-энциклопедий, таких как Википедия. В каждой статье пользователи найдут гиперссылки на другие соответствующие статьи, в которых связанные элементы объясняются более подробно.
- Сетевая структура: сетевые структуры характеризуются тем, что почти все подстраницы веб-проекта связаны между собой на каждой веб-странице. Посетитель сайта имеет возможность попасть на нужную подстраницу сайта из любой точки.
Следует помнить, что представленные здесь структуры ссылок являются абстрактными. Как правило, операторы веб-сайтов используют смесь внутренних ссылок, которые сочетают в себе стратегии ссылок из представленных концепций. Например, веб-сайт может в основном следовать древовидной структуре и в то же время предлагать сетевую структуру ссылок через навигационные меню, боковые панели и нижние колонтитулы, что позволяет потенциальным клиентам покинуть текущий путь клика и перейти на другую страницу категории, продукта или услуги.
Внутренние гиперссылки имеют огромное значение для удобства использования веб-сайта. Веб-проект с хорошей структурой ссылок предлагает пользователям короткие пути перехода к нужному контенту и побуждает их открывать другие разделы сайта. Хорошая внутренняя перелинковка способствует увеличению времени удержания, то есть посетители дольше остаются на сайте. Эксперты SEO также считают удобную для пользователей внутреннюю перелинковку одним из основных факторов хорошего рейтинга в поисковых системах.
Для получения дополнительной информации об улучшении ссылочной структуры вашего сайта см. нашу основную статью о внутренней перелинковке.
Внешние гиперссылки
Группа внешних гиперссылок включает в себя все ссылки с одного сайта на другой. Каждая ссылка между двумя доменами является — в зависимости от того, как ее рассматривать — либо исходящей, либо входящей гиперссылкой.
Исходящие гиперссылки
Исходящие гиперссылки — это гиперссылки на вашем собственном сайте, которые ссылаются на веб-ресурс другого домена. Как правило, внешние ссылки используются в качестве ссылок или рекомендаций для дальнейшего содержания.
Обратите внимание, что внешние гиперссылки уводят пользователей Интернета с вашего сайта на другой. С каждой внешней ссылкой возникает риск потери посетителей. Это можно компенсировать с помощью HTML-атрибута target. Если вы реализуете внешние ссылки по следующей схеме, то цель внешней ссылки будет открываться в новой вкладке или окне, в зависимости от настроек браузера. Ваш сайт останется открытым в браузере, и посетитель не потеряет его из виду.
<a href="https://www.example.org" target="_blank">Linktext</a>Недостатком атрибута target является то, что посетители сайта не могут сами решить, где должна открываться ссылка. Если используется target=»_blank», то в целях безопасности всегда следует использовать атрибут rel со значением noopener:
<a href="https://www.example.org" target="_blank" rel="noopener">Linktext</a>Добавление rel=»noopener» закрывает брешь в безопасности, которая возникает, когда гиперссылка открывает веб-ресурс в новой вкладке или окне. Если target=»_blank» используется без этого дополнения, целевая страница получает доступ к окну, в котором отображается ваш сайт, через window.opener. Затем страница может перенаправить его на любой URL с помощью window.opener.location = newURL. Этого можно избежать, задав для window.opener значение null с помощью rel=»noopener». Ссылки на дополнительную информацию по этой теме можно найти на сайте GitHub разработчика Матиаса Байненса. К сожалению, rel=noopener в настоящее время поддерживается не всеми браузерами.
Наличие или отсутствие на сайте исходящих ссылок не оказывает прямого положительного влияния на рейтинг в поисковой системе. Об этом заявил сотрудник Google Джон Мюллер в мае 2016 года в ходе сессии Google Webmasters hangout на YouTube. Однако, по словам Мюллера, гиперссылки, которые предлагают дополнительную ценность для посетителя за счет ссылки на высококачественный и заслуживающий доверия контент, повышают качество сайта. Поэтому не следует полностью воздерживаться от использования исходящих гиперссылок.
Хотя Google отрицает, что исходящие ссылки имеют прямое положительное влияние, несомненно, что исходящие гиперссылки могут оказывать негативное влияние на рейтинг сайта. Если на сайте слишком много неестественных исходящих ссылок, существует опасность, что поисковые системы классифицируют их как спам и будут наказывать сайт.
Имейте в виду, что Интернет постоянно меняется. Поэтому следует регулярно проверять, чтобы ни одна из ваших исходящих ссылок не вела на устаревшие ссылки или страницы ошибок, поскольку это негативно скажется на удобстве использования вашего сайта. Существуют инструменты SEO, которые могут проверить это за вас.
Как оператор сайта, вы должны проявлять осторожность при использовании внешних гиперссылок, поскольку ссылки на другие сайты могут иметь юридические последствия, например, нарушение авторских прав или гиперссылки, ведущие на незаконные азартные игры.
Если вы хотите, чтобы исходящая ссылка на вашем сайте не рассматривалась поисковой системой как рекомендация, вы можете указать поисковой машине игнорировать данную ссылку. Для этого используйте атрибут rel со значением nofollow. Ссылки nofollow не рассматриваются алгоритмами поисковых систем как релевантные. Этот тип ссылок стал стандартом, особенно для веб-проектов, где посетители могут публиковать собственный контент, включая гиперссылки. Онлайн-форумы, рейтинговые платформы, онлайн-журналы и вики таким образом защищают себя от спама. Этот спам служит исключительно для создания ссылок в рамках Black Hat SEO.
Входящие гиперссылки
Входящие гиперссылки (также называемые входящими ссылками или обратными ссылками) — это все ссылки, которые ведут с других доменов на ваш собственный веб-проект. Все входящие ссылки вместе образуют профиль обратных ссылок сайта.
Ссылки в профиле обратных ссылок можно условно разделить на две категории в зависимости от целевой ссылки:
- Поверхностные ссылки
- Глубокие ссылки
Поверхностные ссылки — это ссылки на главную страницу или различные целевые страницы вашего веб-проекта. Глубокие ссылки, с другой стороны, это обратные ссылки, которые ведут на конкретную подстраницу вашего сайта. Глубокие ссылки также могут быть направлены на медиаконтент вашего сайта, такой как видео, изображения или документы, предлагаемые для скачивания (например, PDF). Такие ссылки также называются медиа-ссылками.
Обратные ссылки также могут отличаться друг от друга по источнику ссылки. В поисковой оптимизации различают ссылки на контент, ссылки на боковую панель и ссылки на нижний колонтитул, а также ссылки на комментарии и социальные сигналы.
- Контентные ссылки: контентные ссылки — это ссылки, которые ведут с текстового содержимого другого сайта на ваш домен. Контентные ссылки могут быть как глубокими, так и поверхностными. Подобные гиперссылки обычно представляют собой рекомендацию относительно содержания вашего сайта. Поставщики поисковых систем также интерпретируют контентные ссылки как качественные и релевантные. Контентные ссылки особенно ценны, когда речь идет о поисковой оптимизации. При оценке контентной ссылки поисковая система принимает во внимание такие факторы, как текст ссылки, тематическая направленность сайта, на который дается ссылка, и степень доверия к источнику ссылки.
- Ссылки на боковую панель и нижний колонтитул: ссылки на боковую панель и нижний колонтитул имеют кое-что общее. Они не внедрены непосредственно в текст веб-страницы. Они находятся в части меню сбоку или в конце страницы. В среде блоггеров, например, принято ставить ссылки на друзей или тематические блоги в боковой панели. Это известно как блогролл. Ссылки в нижнем колонтитуле иногда используются на корпоративных сайтах для ссылок на деловых партнеров, клиентов, отраслевые ассоциации, комментарии прессы или спонсоров. Поскольку боковые и нижние ссылки раньше использовались в основном для неестественного наращивания ссылок, эти типы гиперссылок имеют второстепенное значение при оценке релевантности сайта. Однако если профиль обратных ссылок содержит много неестественных боковых и нижних ссылок, это может привести к тому, что поставщик поисковой системы автоматически или вручную обесценит сайт
- Ссылки на комментарии: ссылки на комментарии — это гиперссылки в пользовательском текстовом контенте, таком как комментарии в блогах, обзоры или статьи на онлайн-форумах. Многие операторы веб-сайтов предлагают посетителям возможность комментировать контент или оценивать продукты и услуги. В некоторых случаях гиперссылки на другие сайты также могут быть размещены в соответствующих сообщениях, которые, как и все другие входящие ссылки, появляются в профиле обратных ссылок связанного сайта. Как и ссылки на боковую панель и нижний колонтитул, ссылками на комментарии можно манипулировать, и легко создать неестественный профиль обратной ссылки. Для предотвращения спама гиперссылки в комментариях часто автоматически становятся nofollow-ссылками.
- Социальные сигналы: в Web 2.0 пользователи привыкли делиться контентом, который им нравится, который они считают достойным обсуждения или хотят продвигать, со своими знакомыми в социальных сетях. Это также гиперссылки, которые ссылаются на соответствующий сайт из социальной сети. Это так называемые социальные сигналы. Вопрос о том, полагаются ли алгоритмы поисковых систем на социальные сигналы, такие как лайки, акции и комментарии, для оценки релевантности сайта, является довольно спорным — особенно потому, что операторы социальных сетей предоставляют ограниченный доступ к содержимому социальных сетей только поисковым роботам, таким как бот Google.
Естественный профиль обратных ссылок обычно содержит каждый из перечисленных выше типов ссылок. Качественные, релевантные теме контента ссылки имеют решающее значение для ранжирования в поисковых системах. Тем не менее, каждая естественная входящая ссылка — это хорошая ссылка, поскольку она позволяет пользователям Интернета посетить ваш сайт и представляет собой потенциальный источник трафика. Социальные сигналы, в частности, предлагают большой потенциал для охвата новых групп посетителей, особенно когда общий контент становится вирусным.
Подробную информацию о внешних гиперссылках и о том, как поддерживать профиль обратных ссылок, можно найти в нашей статье о построении ссылок в соответствии с требованиями поисковых систем.
- Веб-разработка