Повышаем удобство потребления контента с помощью ссылок-якорей в тексте статьи

Добрый день, уважаемые читатели!

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

Яркий пример таких ссылок-якорей вы можете увидеть практически в каждой моей статьей, где имеется содержание.

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

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

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

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

Теперь перейдем непосредственно к реализации. Начинаю с видео-урока после чего имеется текстовая версия для полного освоения всей информации.

А вот и обещанный текстовый вариант со всеми исходными данными, который показывал выше.

Как поставить ссылку-якорь в тексте?

Реализация данной функции проста до невозможности. Нам потребуется 2 ссылки:

  1. Первая для самой ссылки;
  2. Вторая для якоря, который будет определять место, куда нужно переместиться при нажатии на первую.

Теперь стало понятно, что первую ссылку мы ставим на ту фразу, при нажатии на которую будет происходить перемещение в нужное место статьи. А вторую - в место, куда нужно переместиться.

Ниже даю вам 2 ссылки, которые необходимо прописывать в HTML режиме.

В обеих ссылках имеется идентификатор, который связывает оба линка между собой. Если на одной странице нужно использовать не одну ссылку-якорь, то значения необходимо ставить новое для каждой связки. В примере выше значение стоит 1. Если мне необходимо сделать вторую ссылку, то можно поставить новое значение, например 2.

Я так обычно и делаю в своем содержании. Каждый пункт у меня обозначен новым номером.

То же самое касается и второй ссылки, то есть самого якоря. Там также проставлены номера, соответствующие каждому пункту.

Замечу, что во второй ссылке между тегами не обязательно прописывать какой-то текст. Я его не вписываю. Мне нужен просто якорь. Если же пропишите текст, то якорь будет отображаться ссылкой с текстом, который вы туда впишите.

Что касается движка WordPress, то необязательно проставлять первую ссылку в текстовом (html) редакторе. Я делаю проще.

  • Сначала пишу все пункты содержания;
  • Затем делаю их нумерованным списком;

  • Далее просто делаю каждый пункт ссылкой стандартным функционалом и URL указываю в виде идентификаторов #1, #2, #3 и так далее;

  • Потом перехожу в текстовый редактор и в нужные места вставляю якоря с соответствующими номерами ссылок.

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

Также, если статья ну очень уж длинная, то я даю возможность после каждого пункта вернуться к содержанию, использовав ту же самую ссылку якорь.

Это нужно для того, чтобы посетитель не утруждал себя долгим перелистыванием страницы вверх.

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

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

В окончании этой статьи я дам еще один совет, когда можно использовать такие ссылки-якоря.

Целесообразно это делать в том случае, когда нужно вернуться к какому-то моменту, описанному выше в тексте. Как правило, всегда пишется "Делайте точно так же, как и выше...". Можно эту фразу также сделать ссылкой на якорь, чтобы посетитель сразу переместился в нужное место. В таком случае ему не придется самому искать ранее изложенную информацию.

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

До скорой!

С уважением, Константин Хмелев!

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 7
  • Константин, спасибо за материал. А как ссылки-якоря воспринимаются поисковиками? Положительно влияют? Не думаю ли они что это очередная "перелинковка" или просто доп. лишние ссылки? Сугубо из-за кода <a href= ... ? Спасибо

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

  • добрый день, как в контенте после первой ссылки якоря не видеть второй текст, то есть...при открытии первой темы из колонки left, вторая не виднелась, что для этого надо сделать=) больш спасибо за помощь!!!

    • Здравствуйте. Я совершенно не понял суть вопроса. И каким образом это связано с ссылкой-якорем?

  • Костя, статья полезная и благодаря вам я пользуюсь в некоторых сатьях содержаним со ссылками-якорями.
    Однако, однажды возникла потребность сделать ссылку в нужное место совсем в другой статье. Я конечно это как-то реализовал. Но хотелось бы узнать, как это делается по правилам?
    Думаю, и другим это пригодится.
    Спасибо!

    • Делается это очень просто. Если посмотрите на адрес страницы, когда нажмете на ссылку в содержании, то к нему прибавится идентификатор ссылки-якоря. Если полностью эту ссылку (с идентификатором) разместить либо в содержании, либо в другом месте статьи, то она перекинет сразу в нужное место другого текста. Тут все очень просто и наверняка вы так и сделали, других вариантов я не вижу:)

      • Да, так и есть.

        К ссылке на статью прибавляется решетка и, либо цифра, либо слово, которое отправит к якорю в другой статье. Так у меня и сделано.

        Спасибо.

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

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