Как сделать якорную ссылку
Якорные ссылки или анкоры на сегодня являются неотъемлемой частью практически любой статьи. Они нужны в первую очередь для удобства навигации по статье и помогают читателям сразу найти нужную информацию. Давайте разберём, как сделать якорную ссылку и что для этого потребуется.
Содержание:
- Что такое якорь и зачем он нужен
- Как сделать якорь через HTML
- Как сделать якорь через плагин
- Как сослаться на якорь другого сайта или статьи
Что такое якорь и зачем он нужен
Якорная ссылка – это метка на странице (HTML тег), которая добавляется к любому заголовку или тексту в статье. На эту метку устанавливается ссылка, к примеру в содержании. И при нажатии на ссылку, откроется текст на который вы и поставили метку.
В первую очередь якорные ссылки актуальны для больших статей, в которых раскрывается несколько тем. Многие пользователи не любят прокручивать бесконечно длинную страницу, в поиске нужного раздела. И могут попросту уйти, не найдя необходимый материал.
Как вы понимаете это плохо и для СЕО и для вашего авторитета. Поэтому, если вы ещё не используете якоря в своих статьях, самое время разобраться.
Я вам покажу 2 варианта: первый – это напрямую через HTML и второй – через плагин. Если вы используете WordPress, то переходите сразу к второму.
Как сделать якорную ссылку через HTML
После того, как вы определились с заголовком на который хотите установить якорь, надо открыть статью в текстовом редакторе. В WordPress это выглядит вот так, если у вас другой движок, должно быть аналогично.
Давайте для наглядности я покажу, как сделать якорную ссылку на примере своего первого заголовка. Нахожу свой первый заголовок H2 и добавляю в него вот такой тег id=“a” через пробел.
Было
Стало
Буква “a” обозначает название метки. Я их ставлю по латинскому алфавиту, то есть следующие заголовки у меня будут “b”, “c” и так далее. Наш якорь обязательно должен находиться внутри тега < >.
Если хотите добавить его к тексту, нужно будет сделать тег. Можно выделить надпись жирным или сделать под наклоном, тогда тег добавиться автоматом и в него вставите якорь.
Добавляем ссылку на якорь
С якорями разобрались, давайте теперь посмотрим, как добавить ссылку на якорь в описание. Опять переходим в текстовый редактор и находим фразу в содержании, которая будет ссылаться на метку.
И к этой фразе добавляем следующий тег a href=“#a” и в конце тег </a>
Было
Стало
Тут уже мы не внутрь тега вставляем, а делаем отдельный тег <>. И следующие ссылки будут выглядеть так: “#b”, “#c”. В конце тег </a> должен добавляться автоматически, но если этого не происходит, вставьте вручную.
Как сделать якорную ссылку через плагин
Этот метод более простой и подойдёт тем, кто пользуется движком WordPress. Использовать мы будем плагин TinyMCE Advanced.
Этот плагин расширяет наш текстовый редактор, и в нём так же есть функция добавления якорей. Я его рекомендовал ранее, можете ознакомиться со списком необходимых плагинов, которые я предлагаю установить.
Настройка плагина
Итак, после установки плагина необходимо зайти в его настройки
Далее переходим в классический редактор (если у вас Gutenberg, то в него) и добавляем из строки Неиспользуемые кнопки, иконку Якорь. Просто зажимаем и перетаскиваем в нужную строку.
Далее пролистайте в низ и нажмите Сохранить изменения. У вас теперь в текстовом редакторе появится иконка якорь.
Добавление якорей
Давайте теперь покажу на примере второго заголовка, как добавляется якорная ссылка.
Переходим к следующему заголовку, кликаем на него мышкой и жмём на иконку якоря.
В строке Id, пишу метку b и на этом всё, жмём ok. Рядом с вашим заголовком должен появиться символ с якорем. Как видите намного проще первого варианта.
Теперь давайте добавим ссылку на него. Для этого переходим к содержанию, обводим фразу в которую надо вставить ссылку и нажимаем Ctrl + K или на иконку вставить ссылку.
В открывшейся строке пишем #b и нажимаем на стрелку. Всё ссылка должна работать.
Как сделать якорную ссылку на другой сайт или статью
Аналогично это делается и для других статей. Если к примеру надо поставить якорь на другой статье вашего блога, а ссылку на этой.
Проще говоря, если я захочу в другой статье сослаться на этот якорь, я сделаю так: 
А если через иконку вставки ссылки, то просто обвожу текст и вставляю ссылку – ссылка статьи#b и добавляю, открыть в новом окне.
Так же есть небольшой лайфхак. Если вы хотите сослаться на сайт другого человека и у него есть содержание в статье, то всё как никогда просто. Нажмите на раздел из содержания, который вас интересует и вы переместитесь на якорь статьи. После этого копируете ссылку из адресной строки и она уже будет с нужной меткой. Эту ссылку и вставьте в необходимую фразу, как это делать я уже показал.
Надеюсь объяснил довольно подробно, как сделать якорную ссылку для статьи. С плагином у вас точно трудностей не возникнет.
До встречи на страницах блога и успехов в начинаниях…
