Как сделать якорную ссылку

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

Содержание:

 

Что такое якорь и зачем он нужен

Якорная ссылка – это метка на странице (HTML тег), которая добавляется к любому заголовку или тексту в статье. На эту метку устанавливается ссылка, к примеру в содержании. И при нажатии на ссылку, откроется текст на который вы и поставили метку.

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

Как вы понимаете это плохо и для СЕО и для вашего авторитета. Поэтому, если вы ещё не используете якоря в своих статьях, самое время разобраться.

Я вам покажу 2 варианта: первый – это напрямую через HTML и второй – через плагин. Если вы используете WordPress, то переходите сразу к второму.

 

Как сделать якорную ссылку через HTML

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

 

 

Давайте для наглядности я покажу, как сделать якорную ссылку на примере своего первого заголовка. Нахожу свой первый заголовок H2 и добавляю в него вот такой тег id=“a” через пробел.

Было

 

Стало

 

Буква “a” обозначает название метки. Я их ставлю по латинскому алфавиту, то есть следующие заголовки у меня будут “b”, “c” и так далее. Наш якорь обязательно должен находиться внутри тега < >.

Если хотите добавить его к тексту, нужно будет сделать тег. Можно выделить надпись жирным или сделать под наклоном, тогда тег добавиться автоматом и в него вставите якорь.

 

Добавляем ссылку на якорь

С якорями разобрались, давайте теперь посмотрим, как добавить ссылку на якорь в описание. Опять переходим в текстовый редактор и находим фразу в содержании, которая будет ссылаться на метку.

 

 

 

 

 

И к этой фразе добавляем следующий тег a href=#a” и в конце тег </a>

Было

 

 

Стало

 

 

Тут уже мы не внутрь тега вставляем, а делаем отдельный тег <>. И следующие ссылки будут выглядеть так: “#b”, “#c”. В конце тег </a> должен добавляться автоматически, но если этого не происходит, вставьте вручную.

 

Как сделать якорную ссылку через плагин

Этот метод более простой и подойдёт тем, кто пользуется движком WordPress. Использовать мы будем плагин TinyMCE Advanced. 

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

 

Настройка плагина

Итак, после установки плагина необходимо зайти в его настройки

TinyMCE Advanced. 

 

Далее переходим в классический редактор (если у вас Gutenberg, то в него) и добавляем из строки Неиспользуемые кнопки, иконку Якорь. Просто зажимаем и перетаскиваем в нужную строку.

TinyMCE Advanced. 

 

Далее пролистайте в низ и нажмите Сохранить изменения. У вас теперь в текстовом редакторе появится иконка якорь.

 

Добавление якорей

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

Переходим к следующему заголовку, кликаем на него мышкой и жмём на иконку якоря.

Как сделать якорную ссылку

 

В строке Id, пишу метку и на этом всё, жмём ok. Рядом с вашим заголовком должен появиться символ с якорем. Как видите намного проще первого варианта.

Теперь давайте добавим ссылку на него. Для этого переходим к содержанию, обводим фразу в которую надо вставить ссылку и нажимаем Ctrl + K или на иконку вставить ссылку.

 

Как сделать якорную ссылку

 

В открывшейся строке пишем #b и нажимаем на стрелку. Всё ссылка должна работать.

 

Как сделать якорную ссылку на другой сайт или статью

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

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

А если через иконку вставки ссылки, то просто обвожу текст и вставляю ссылку – ссылка статьи#b и добавляю, открыть в новом окне.

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

Надеюсь объяснил довольно подробно, как сделать якорную ссылку для статьи. С плагином у вас точно трудностей не возникнет.

До встречи на страницах блога и успехов в начинаниях…

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

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