Как сделать ссылку на сайте

Как сделать ссылку на сайте

Как создать правильную ссылку на сайте с использованием атрибутов, подробным описанием их типов и с примерами. Так же пошаговое объяснение как отредактировать ссылку в редакторе WordPress. Часто нужно сделать ссылку на другую страницу сайта своего или чужого. И встает вопрос как сделать? Для начала немного разберемся что такое ссылка.

Типы ссылок

SEO-специалисты применяют разделение ссылок типы:

  • Внутренние — ссылки на страницы или объекты внутри сайта. К этому типу относятся — меню, текстовые ссылки, якоря, кнопки, модальные окна и другие объекты. Данный тип ссылок необходим для юзабилите сайта и SEO при например — передачи веса страниц. 
  • Внешние — ссылки на страницы или объекты на сторонних сайтах. Они нужна для: продвижения ваших соц. сетей, работы с партнерами, для упрощения загрузки страниц, для указания поисковикам доп. параметров и так далее.

Программисты применяют другое разделение на типы ссылок:

 
Типы ссылокабсолютныеотносительные
внешние

http://www.seo2site.com

ссылка на другой сайт

такой тип ссылки невозможен
внутренние

https://www.help2site.ru/services/

внутренняя ссылка на этот же сайт, но она приведена как абсолютная

/services/

внутренняя относительная ссылка на страницу этого сайта. Суда так же относятся все якоря.

Отдельно стоит отметить что не все ссылки «видны пользователям» ссылки могут находиться и в скрытых областях страниц. Наиболее частый пример скрытых полезных ссылок это применения микроразметки данных https://schema.org/ очень важной при продвижении сайтов.

Виды объектов для ссылок на сайтах:

    • Текстовая ссылка. Пример: На данной странице есть много ссылок и полезной информации. Как видите слова «полезная информация» являются ссылкой. Данная ссылка может вести на другую страницу или на якорь на данной странице.
    • Кнопка. Все мы их любим и знаем. Это тоже ссылка.
    • Изображение. Наживая на картинку вы можете перейти на другую страницу или сайт или открыть увеличенное изображение на этой странице.
    • Иконка. Иконки бываю разных типов. но все их можно сделать ссылками на страницы или якоря.
    • Модальные окна — это когда вы кликаете кнопку и открывается окно над открытой страницей.
    • tooltip — это когда вы подводите мышь к объекту и всплывает пояснительный текст. ПримерПример tooltip — подсказка к тексту.
    • И любой объект на странице. Но это уже более профессиональная тема

Общий вид ссылки

Код ссылки состоит из:

  • адреса куда должен перейти пользователь или робот (это если говорить о SEO)
  • правил по котором должен осуществляться переход
  • визуального стиля ссылки

Код чистой ссылки:

Где функция href отвечает за url перехода, а адрес_куда_должен_перейти_пользователь — это url в виде:

  • https://www.help2site.ru/ — внешний url на страницу. Используется когда вам нужно сделать ссылку на другой сайт или вы не знаете как правильно прописать внутреннюю ссылку.
  •  /contact — внутренняя ссылка на страницу вашего сайта
  • #glava5 — внутренняя ссылка на якорь установленный на данной странице
  • /contact#glava5 — внутренняя ссылка на якорь на другой странице вашего сайта

Атрибуты ссылок

name

Атрибут «name» задает имя идентификатора для определения имени места на странице куда должен переходить якорь

Где имя_якоря отвечает за идентификацию функции. Самый частый пример использования кнопка «Наверх», для того чтобы она при нажатии отправила в то место где вы хотите, нужно добавить атрибут name или существующему объекту или создать пустую ссылку с данным именем. Пример кода для текстовой ссылки:

target

Атрибут «target» задает параметры для загрузки ссылки в этом же окне, в новом окне или фрейме или нет. 

Значения атрибута:
описание атрибута
_blankоткрываем новую вкладку в браузере для ссылки
_selfзагружаем ссылку в существующем окне. По умолчанию для всех ссылок.
_parentзагружаем ссылку во фрейм
_topотменяем загрузку во фрейм. Применяется в основном при отключении наследования параметров родителя.

Пример — наши работы

title

Атрибут «title» задает пояснение к ссылке. Отображается в виде всплывающего окна при наведении на ссылку. Любимый атрибут SEO-специалистов который позволяет при правильном его использовании значительно поднять сайт в выдаче.

Пример — Наверх

rel

Атрибут «rel» определяет отношения текущий страницы к странице на которую будет осуществляться переход и описывает ее. Данный атрибут определяется только для поисковых роботов и задает им правила перехода и индексирования открывающейся страницы. Параметр нужен для SEO-оптимизации и продвижения сайтов.

Один атрибут может содержать несколько значений размещенных через пробел.

Значение атрибута:
 Описание атрибута
archivesurl архива сайта. Важный параметр для поисковых роботов говорящий им что по этой ссылке находится архив сайта.
authorСсылка на страницу об авторе на том же домене. Параметр описывающий ссылку как «та страница о компании». Нужен в SEO, если вы назвали страницу «О компании» как «Мы крутые ребята и там типо о нас есть материал». По названию робот никогда не поймет что это страница описывающая вашу компанию.
bookmarkПостоянный url на раздел или запись. 
firstСсылка на первую страницу.
helpСсылка на документ со справкой. Указанию роботу, что у вас есть страница с помощью пользователям сайта
indexСсылка на содержание.
lastСсылка на последнюю страницу.
licenseСсылка на страницу с лицензионным соглашением или авторскими правами. Робот будет знать про ваши лицензии.
meСсылка на страницу автора на другом домене. Похвастайтесь роботу публикациями о вас.
next
Ссылка на следующую страницу или раздел. Важный параметр для блогов, говорящий что это не последний материал
nofollow
Не передавать по ссылке ТИЦ и PR. Тайная любовь SEO-специалистов
noreferrer
Не передавать по ссылке HTTP-заголовки. И еще раз про SEO-продвижение
prefetch
Указывает, что надо заранее кэшировать указанный ресурс.
prev
url предыдущей страницы или раздела. Скажите роботу что у вас в блоге есть еще материалы. 
search
url страницы поиска. Расскажите ему что вы используете поиск по сайту.
sidebar
Добавить ссылку в избранное браузера. Можно пользователю предложить добавить ваш сайт в избранное и сказать это роботу.
tag 
Указывает, что метка (тег) имеет отношение к текущему документу. Расскажите поисковику про метки на сайте.
up
url родительской страницы.

rev

Атрибут «rev» в отличие от «rel» описывает текущую страницу по отношению к остальным страницам сайта. Заранее заданных параметров нет поэтому описание делается текстом. Пример:

 

shape

Атрибут «shape» задает параметры активной области, действителен только на изображениях включенных в объект. Проблема — работает не со всем браузерами. Значения:

circle — Область в виде круга.
default — Область по умолчанию (прямоугольная).
poly — Полигональная область произвольной формы.
rect — Прямоугольная область.

tabindex

Атрибут «tabindex» определяет последовательность перехода по ссылкам при использовании клавиши клавиатуры «TAB». Применяется при создании специализированных сайтов с ограничениями. Например — сайты для слепых.

type

Атрибут «type» применяется для описания ссылки при вставке объектов MIME (Multipurpose Internet Mail Extension, Многоцелевые расширения почты Интернета). К ним относятся видео, аудио, pdf, архивы (zip, rar и другие), таблицы и многое другое. Полный перечень MIME-типов.

Как создать и отредактировать ссылку на сайте

Если читаете данный материал скорее всего у вас сайт на какой либо CMS (WopdPress, 1C:Битрикс, Drupal, Joomla!, MODx или любой другой). На всех системах стоят разные редакторы которые по разному позволяют создавать ссылки. Например: создать кнопку, добавить изображение или объект. Правятся ссылки в них через открытие (если позволяет CMS) html-кода и поиска там нужного элемента ссылки. Эта работа скорее для профессионалов и вы можете заказать ее у нас — доработка и поддержка сайта. Мы сейчас рассмотрим возможности простого текстового редактора в котором вы сможете самостоятельно все сделать.

Как создать ссылку в WordPress

Откройте нужную запись или страницу в редакторе. Выделите текст или изображение на который вы хотите поставить ссылку. Нажмите кнопку «Вставить/изменить ссылку«.

В открывшемся окне вставьте адрес ссылки (на фото «/blog»), вы увидите текст ссылки (если нужно можно отредактировать), заголовок (это атрибут title) и rel (по умолчанию «нет» и «nofollow», подробнее про rel) и «Цель» (это атрибут target со значением «Нет» (значение по умолчанию — _self) или «Новое окно»(значение — _blank)). 

Предупреждение: если вы в атрибуте rel в WordPresse выбираете «nofollow», то CMS автоматически вам подставит rel="nofollow noopener noreferrer"

Если вам нужно добавить какие либо другие атрибуты то вам нужно будет перейти или в панели Инструменты > Исходный код или во вкладку «Текст». Найти нужный элемент и отредактировать его.

как отредактировать ссылку в редакторе

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

Если нужно сделать ссылку с изображения то нужно вставить картинку в текст. Выделить ее и дальше нажимаем на «Вставить/изменить ссылку» и дальше аналогично работе с текстом.

как добавить ссылку на картинку

Рекомендации и советы по созданию ссылок 

  • используйте правильно атрибуты и их значения. Как говорилось выше правильные title творит чудеса SEO.
  • используйте атрибут rel для контроля и перераспределения весов страниц на сайте. Это важно при SEO-продвижении.
  • создавайте и работайте с якорями. Это поможет в юзабилити сайта и даст прирост по поведенческим факторам в поисковом ранжировании.
  • не злоупотребляйте ссылками все должно быть сбалансировано на странице.
  • контролируйте работоспособность ссылок. Удаляйте и исправляйте «битые» ссылки

Бонус — как сделать tooltip через ссылку

Делаем дополнительную всплывающую подсказку в тексте.

Добавляем или в css или прямо в редакторе стиль.

Добавляем код к тексту

И получаем: ваш текст до подсказкатекст подсказки

Удачи вам! и если что звоните-пишите.

WhatsApp Chat
Отправить через WhatsApp