Создание сайта на WordPress — что может быть проще!
Как сделать ссылку на страницу сайта в HTML
Рубрика: Создание сайта WordPress

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

6 комментариев   

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

Что такое ссылки?

Ссылки (линки) – это основа всего Интернета. С их помощью реализуется связь страниц внутри сайта и за его пределами, на ссылках основана работа поисковых систем, крупных каталогов, социальных сетей, рекламных сервисов и всех прочих ресурсов вообще. Линки обеспечивают навигацию в Сети. Без них существование Интернета было бы невозможным.

Ссылочная масса ресурса учитывается в процессах ранжирования, а потому линки активно применяются в техниках продвижения, в SEO оптимизации площадок. Интернет наполняется финансами только благодаря линкам, только они способны оказать быстрое воздействие на раскрутку сайтов в Сети. Использовать ссылочное продвижение на данный момент нужно очень аккуратно!

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

Чтобы сделать ссылку словом на какую-либо страницу сайта, нам потребуется использовать язык гипертекстовой разметки. Посмотрите примеры ссылок:

обычная ссылка пишется так: <a href="#">обычная ссылка</a>

Где вместо знака #, нужно вписать адрес сайта или страницы. Так же, к ссылке мы можем добавить всплывающую подсказку (наведите мышкой):

ссылка с подсказкой: <a href="#" title="Я подсказка!">ссылка с подсказкой</a>

Как мы можем заметить, к коду обычной ссылки добавился параметр title="", таких параметров может быть несколько и каждый выполняет свою функцию. Список таких параметров и их функции Вы найдете чуть ниже...

Как сделать ссылку, чтобы она открывалась в новом окне? Добавим еще один параметр, который сделает это возможным... Код будет следующим:

ссылка в новом окне: <a target="_blank" href="#">ссылка в новом окне</a>

Как сделать картинку ссылкой, да и любой другой объект сайта? Мы просто берем и оборачиваем этот объект в теги <a>, смотрим пример:

<a target="_blank" href="#"><img width="100" height="50" alt="фото" src="путь до картинки"></a>

Все довольно просто, не правда ли?!

А как сделать ссылку закладку (якорь) в этой статье? И тут нет ничего сложного! Сперва добавим тег к перемещаемому элементу:


<h3 id="tema1">Что такое ссылки?</h3>

Теперь делаем якорь на него (нажмите и зацените):

[sociallocker]

Что такое ссылки: <a href="#tema1">Что такое ссылки</a>

[/sociallocker]

Кстати, чтобы посмотреть ссылку в виде кода на любом сайте, надо набрать комбинацию «Ctrl+U», либо, в любом пустом месте нажмите правой кнопкой мышки и ищите что-то вроде: «Исходный код страницы» или «Посмотреть источник»... Далее ищите тег <a href. Можно использовать поиск набрав «Ctrl+F».

Основные параметры и функции к ссылкам

title="" — добавляет всплывающую подсказку
href="" — адрес куда ссылается ссылка
rel="" — индексирование поисковыми роботами
target="" — поведение открытия: _blank — новое окно), _self — то же окно (по умолчанию)
class="" — использование стилей посредством CSS.

Немного теории для начинающих SEO-шников

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

Месторасположение ссылок на сайте

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

  • Внутри текста. Данный тип размещения является оптимальным при продвижении акцепторских проектов. Позиция линка внутри текста зовется «контекстной» и вызывает наименьшие подозрения у поисковых систем.
  • За текстом. Размещение линка за полем основного контента – один из самых подозрительных способов вставки. С другой стороны, это оптимальный вариант размещения для большинства внутренних ссылок.
  • За другим объектом. Любой объект может использоваться в качестве ссылки. На этом принципе выстроена навигация многих площадок. Подобное позиционирование активно используется в продвижении сайта, в рекламе.
  • Скрытое размещение. Если линк предназначен исключительно для поисковых роботов, он может вовсе не отображаться на страницах ресурса. Для сокрытия фрагментов кода используются средства CSS, особые шрифты, слои и элементы дизайна. Скрытые линки вызывают максимальные подозрения у поисковиков и создают нежелательные риски для донора и акцептора.

Классификация или куда ведут ссылки

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

  1. Внешние ссылки на сайты (исходящие). Уводят за пределы донорского ресурса, указывают на сторонние веб-проекты. Используются во внешней SEO оптимизации.
  2. Внутренние линки. Активно применяются для навигации внутри проекта, для реализации перелинковки (ссылочной связи) страниц. Используются во внутренней SEO оптимизации.
  3. Ссылки между метками документа (якоря). Данный тип линка работает внутри отдельной страницы веб-сайта и обеспечивает быстрое перемещение между метками внутри одной публикации.
  4. Через редирект сайта. Особый тип линка, совмещающий и внешние и внутренние качества. Такая ссылка уводит на внешний ресурс, но делает это не очевидно, через специальные программные решения.

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

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

  1. Анкорная ссылка. Если линк в своей структуре содержит полноценный «якорный» текст (ключевые слова или осмысленные фразы), он считается анкорным.
  2. Безанкорная ссылка. Тип линка, внутри которого полноценный ключевой текст заменяется адресом URL, другим объектом или бессмысленным «стоп-словом» вроде «тут», «далее», «источник».

Возможность индексации поисковыми роботами

Следующее деление сообщает нам, как линк будет восприниматься поисковыми роботами, как он будет работать. Итак, ссылка может быть:

  • активной — открытый и прямой линк, свободно индексируемый поисковиками;
  • текстовой — простое текстовое упоминание адреса или названия сайта;
  • закрытой — для закрытия линка от индексации могут применяться специальные теги, например rel="nofollow", либо настройки файла robots.txt или специальные программные решения. Например в этой статье я писал как скрыть ссылку скриптом.

Естественность

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

  1. Естественный линк. Появляется без участия оптимизатора и является бесплатным.
  2. Искусственная ссылка. Возникает благодаря прямым или косвенным усилиям оптимизатора. Может быть и платной и бесплатной.

Сколько живут ссылки?

  • Временный линк. Ссылка такого рода размещается на определенных условиях, которые и обеспечивают ее жизнь (например, ежедневная арендная плата, наличие обратной ссылки).
  • Вечная ссылка. Считается, что подобный линк размещается навсегда, однако это не так. На практике вечная ссылка отличается от арендуемой лишь длительностью срока жизни и некоторыми другими параметрами.

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

Ссылки также бывают полезными и вредными, трафиковыми и нулевыми, действующие и «битые ссылки», полными и сокращенными. Все линки работают по-разному, по-разному влияют на продвижение, по-разному воспринимаются людьми и поисковыми роботами.


Савельев Владимир Александрович
С уважением, Владимир Савельев
Премиум курсы от webformyself

Премиум-уроки от клуба webformyself

Это новый революционный продукт в области обучения сайтостроительству! Все лучшие видео-уроки собраны в одном месте и разделены на категории: WordPress, Joomla, PHP, HTML, CSS и JavaScript... База постоянно пополняется и уже сейчас в ней более 200 уроков! Всего за один год - Вы сможете стать опытным веб-мастером "с полного нуля"!
Подробнее

Прочтите еще:
Обсуждение статьи: 6 комментариев
  1. Денис Мехедов 2016-03-07 в 13:18 

    На сколько мне известно, прочитал уже много статей на эту тему, но rel="nofollow" перестал быть эффективным как это было несколько лет тому назад.

    :razz:

    Ответить
    • Владимир Савельев 2016-03-08 в 11:28 

      Привет Денис! Ты прав! Я не использую этот тег вообще...

      Ответить
  2. Дмитрий 2016-03-15 в 21:54 

    Я тоже не использую этот тэг. Просто мне порекомендовали забыть про него. Не стал допикать почему и как. Просто отказался. Просто доверился.

    Оказывается не обманули меня!

    Ответить
  3. Сергей 2016-07-02 в 10:31 

    Если nofollow не работает, то получается, что поисковики всё равно переходят по ссылкам? В любом случае?

    Ответить
    • Владимир Савельев 2016-07-02 в 14:00 

      Ага! Я где то читал что google в скором времени планирует внедрить ИИ — это уже будет не просто поисковик =)

      Ответить
  4. Катя 2019-04-21 в 19:46 

    Хорошая инструкция! Я раньше тоже всему этому училась, на сегодняшний день уже намного проще подобные вопросы решать.

    Ответить

Добавить комментарий

Прочитать Соглашение и Правила блога

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?:

Приветствую Вас друзья!
Савельев Владимир АлександровичМеня зовут Владимир Савельев, я являюсь автором блога savme.ru! Моя миссия - научить Вас создавать сайты, блоги и зарабатывать на них также, как это делаю я! Уже через год ведения блога я вышел на пассивный доход в 30.000 руб в месяц и это не предел! Еще я частенько пишу о своей жизни и устраиваю конкурсы с крутыми призами! Подпишитесь на мои новости, чтобы не пропустить что-то важное!
Безлимитная графика и шаблоны
Envato WW