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

Автор:
28 Ноябрь, 2015

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

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

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

А вторая причина более прозаична: все мои предыдущие статьи (хоть их и не много) написаны на совершенно разные темы и чтобы поставить ссылку с одной из них на другую, надо сильно постараться. Согласитесь, очень трудно, рассказывая о том как сделать бэкап сайта, естественно,  без искусственных предложений сослаться на статью о фавиконе. Поэтому решил начать большой цикл статей, объединенных одной темой, где каждая последующая статья будет самым естественным образом ссылаться на предыдущие, образуя тем самым правильную структуру внутренней перелинковки.

Небольшое вступление

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

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

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

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

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

После того как статья написана и обработана в текстовом редакторе, т.е. все подзаголовки заключены в H2,3 и т.д., ключевые слова выделены и т.д., переходим в режим  «Текст» или  «HTML», у кого как.

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

А после того как установил якорь (метку) так:

Теперь нужно создать ссылку на этот якорь. Для этого нахожу в содержании соответствующий подзаголовок, который опять же сначала выглядит так:

А после:

Все. Якорная ссылка готова. Обратите внимание, перед словом «test» стоит знак решетка  #, который и перекидывает к нужному якорю. Таким образом можно сделать сколько угодно пунктов, только запомните, что к каждому пункту надо присваивать свой якорь, например, «test2», «test3» и т.д.

И жмите кнопку «Опубликовать» в этом же режиме «Текст», иначе не будет работать.

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

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

Например, у меня есть статья о том, как подбирать ключевые слова. И я хочу, чтобы вы непременно ознакомились с одним из подразделов этого поста «Подбор ключевых слов в Яндекс». Для этого я иду в раздел  «Записи», выбираю эту самую статью, режим «Текст», нахожу нужный подзаголовок и устанавливаю якорь.

После этого обязательно нужно обновиться, иначе ссылка не будет работать. Далее нужно прописать путь до нашего якоря. Опять же идем в  «Записи», редактируем, конечно, уже эту запись, выбираем текст, который станет нашей ссылкой. Ну в данном случае пусть будет текстом  «Подбор ключевых слов в Яндекс». Перед ним прописываем атрибут гиперссылки  <a href=, внутри него адрес нашей статьи, затем через слеш идентификатор (якорь) и в конце закрывающий тэг.

Можете проверить,кликнув по ссылке. Если сделаете так, как здесь описано, у вас все будет прекрасно работать.  Пожалуй, на этом я закончу, удачи всем!

Буду признателен, если воспользуетесь кнопками социальных сетей.

Автор статьи Баяс Батуев

Читайте также:


Комментарии:

Комментарии