Якорные ссылки что это: Как создать якорную ссылку? | Помощь по конструктору сайтов Nethouse

Содержание

Как работают якорные ссылки — POSiFLORA

Якорь — это ссылка внутри страницы на какой-то заголовок или другую часть страницы. Такие ссылки начинаются со ссылки на страницу сайта, сразу после слеша «/» ставится символ решетки «#» и дальше латинскими символами название якоря, которое указано у элемента на странице, например, так выглядит ссылка на форму заявки на сайте Посифлоры: https://posiflora.com/english/#form. #form — это и есть якорь. 

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

Чтобы включить якорную ссылку, нужно установить галочку «Включена» в настройках «Ссылка-якорь» блока «Заголовок» (см. скриншот 1).

Но этого недостаточно, нужно обязательно заполнить название якоря. Он заполняется без символа «#», этот символ добавится к ссылке автоматически.

Скриншот 1. Настройки якорных ссылок у заголовков статей

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

Скриншот 2. Заголовок с якорной ссылкой.

Якорную ссылку можно скопировать из строки браузера. Еще это можно сделать, кликнув правой кнопкой мыши по значку и выбрав «Копировать адрес ссылки» на десктопе или задержав палец на значке, и выбрав в контекстном меню пункт «Копировать» на телефоне или планшете.

Ниже представлен реальный блок-заголовок с добавленным якорем zagolovok-ssilka-yakor

Я заголовок с якорной ссылкой!

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

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

Подробнее о работе настройки «Ссылка на содержание» можно узнать из статьи «Зачем нужны справочные материалы»

Request call

Open chat

Request a callback

Leave your phone number and indicate the most convenient time for a call. Our represantative will contact you and answer all your questions.

Or call now: +44 7458-148921.

POSiFLORA chat

We’ll answer all your questions in the messenger of your choice.

Start chat with POSiFLORA manager in convenient way.

Log in POSiFLORA

Enter your business name and we will redirect you to the system

Explore the system from the inside out.

Check out how easy and comfortable it is to work with POSiFLORA

Explore the system from the inside out.

Check out how easy and comfortable it is to work with POSiFLORA

Якорный текст — что это, стоит ли его использовать

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

Рассказываем, что это такое и как влияет на SEO.

Что такое якорь

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

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

Чтобы пользователь не ушел, а мог, например, просмотреть ассортимент, стоит создать закладку, или якорь (назовем его range). В качестве ссылки укажем название раздела.

В html это можно сделать так:

  • [p][a name=»range»][/a][/p]

  • [p]. ..[/p]

  • [p][a href=»#range»]Ассортимент[/a][/p]

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

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

Зачем нужны якоря

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

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

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

Иногда якорями называют ссылки для межстраничной и междоменной навигации — то есть те, что ведут на другие страницы сайта. Однако все-таки это не якоря в строгом смысле слова, а просто внутренняя перелинковка.

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

Как якоря влияют на SEO

Многие веб-мастера относятся к якорному тексту с недоверием. Считается, что поисковики могут неправильно распознать этот элемент, что чревато санкциями. Разберемся, так ли это.

Потенциальные риски

Поисковые системы не любят циклические ссылки. Так называют ссылки, которые ведут на ту же страницу, на которой размещены. Например, если на странице http://site.ru находится ссылка, которая ведет на http://site.ru, то она будет считаться циклической.

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

При чем здесь якорные ссылки? Дело в том, что они похожи на циклические.

Например, вы создаете оглавление при помощи якорных ссылок. В html это будет выглядеть так:

Якорные ссылки, которые идут подряд, выглядят почти одинаково — отличается только идентификатор. Значит ли это, что поисковый робот может принять их за циклические?

На самом деле нет. Поисковые системы — и Яндекс, и Google — давно научились распознавать якоря и понимать их назначение. Ни зацикливания, ни санкций опасаться не стоит.

Польза для поискового продвижения

Якорный текст не влияет на SEO напрямую, но косвенно — да. Он помогает пользователям, упрощая навигацию по странице, что положительно сказывается на поведенческих факторах. ПФ, в свою очередь — один из главных факторов ранжирования в поисковых системах.

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

Как якорные теги могут улучшить впечатление от вашей целевой страницы

Что происходит, когда вы бросаете якорь в воду?

Якорь держит лодку на месте, верно? У вас по-прежнему есть свобода перемещения на определенное расстояние от точки привязки в любом направлении, но независимо от того, в какую сторону вы идете, вы ограничены определенным радиусом.

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

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

Что такое тег привязки?

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

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

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

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

Что могут выделять теги привязки на целевых страницах после клика?

Важная копия

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

SocialMediaCompanies.com — еще один бренд с якорной ссылкой, которая направляет посетителей в нижнюю часть страницы. В этом примере они хотят, чтобы посетители обратили внимание на ключевые области, которые компания оценивает и оценивает:

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

Истории успеха клиентов

Размещение историй успеха клиентов и их отзывов — отличный способ предоставить посетителям убедительные социальные доказательства. Они укрепляют доверие и уверенность в вашем продукте или услуге и помогают направить их к конверсии.

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

Поскольку такого рода обзоры клиентов часто могут продать ваш продукт более эффективно, чем что-либо еще на странице, зачем рисковать тем, что ваши потенциальные клиенты пропустят их?

Варианты использования

Boardvantage немного отличается от предыдущих примеров. Здесь они определяют цель «Исследовать варианты использования» рядом с тегом привязки стрелки. Обратите внимание, как он окружен достаточным количеством белого пространства, чтобы выделить его. После нажатия посетители перенаправляются в раздел ниже сгиба, где компания выделяет основные функции и преимущества MeetX с минимальным текстом, короткими видеороликами и снимками экрана:

Этот конкретный раздел содержит основные точки продажи продукта, поэтому они хотели, чтобы посетители его видели. Умный ход от Boardvantage.

Дополнения к продуктам

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

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

Форма захвата потенциальных клиентов

Эта целевая страница Salesgenie после клика заполнена якорными тегами, каждый из которых направлен на то, чтобы посетители больше взаимодействовали со страницей. Каждая стрелка вниз отправляет людей дальше вниз по странице, а каждая оранжевая кнопка CTA направляет людей обратно вверх для заполнения формы:

Обратите внимание на кнопку CTA снова. Его ярко-оранжевый цвет привлекает внимание и использует привлекательный текст («бесплатно»), что, вероятно, приводит к большему количеству кликов. Когда посетители нажимают ее (или любую из совместных кнопок CTA), они возвращаются в верхнюю часть страницы, чтобы начать бесплатную пробную версию Salesgenie.

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

В нашем третьем примере кнопки CTA BambooHR выделяет свою кнопку CTA контрастным цветом, копия указывает, что демо-версия бесплатна, и есть даже стрелки, указывающие на него с обеих сторон:

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

Кнопка CTA

Есть много способов оптимизировать вашу кнопку CTA, но вы также можете создавать якорные ссылки, которые направляют посетителей прямо к ним. В приведенном ниже примере QuickBase компания создала навигацию по целевой странице после клика (три раздела внизу изображения), в которой все три ссылки являются тегами привязки. Когда потенциальные клиенты нажимают «История успеха» и «Что такое QuickBase», они перенаправляются в два разных раздела дальше по странице, в каждом из которых есть кнопка CTA:

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

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

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

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

Что такое якорная ссылка и как ее использовать?

Якорная ссылка — это ссылка, которая помогает перейти к содержимому той же страницы, к которой прикреплена якорная ссылка. Это уникальный идентификатор (идентификатор) , прикрепленный к блоку контента или определенному элементу. Чтобы добавить привязку, вы должны иметь возможность редактировать CSS элемента или иметь инструменты, позволяющие это делать.

В этой статье мы рассмотрим все, что вам нужно знать об якорных ссылках:

  • Что такое якорные ссылки?
  • Как создавать якорные ссылки?
  • Как создать якорные ссылки в WordPress?
  • Как создавать якорные ссылки в Visual Composer?
  • Когда использовать якорные ссылки?

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

Что такое якорная ссылка

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

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

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

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

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

С технической точки зрения анкерное звено состоит из двух частей. Первая часть — это сам якорь — уникальный идентификатор, который вы можете прикрепить к элементам вашей страницы. В CSS якорь представлен как id=»unique-id» и может использоваться как ссылка на элемент в CSS или JavaScript.

Вторая часть состоит из реальной ссылки. Разница в том, что URL-адрес состоит из символа решетки и вашего уникального идентификатора — #unique-id .

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

Первым делом нам нужно добавить к абзацу уникальный идентификатор, например, ‘полное описание’. Найдите элемент и добавьте id=»full-description» к открывающему тегу элемента.

 

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

Полное описание

 .

Готово? Поздравляем, ваша первая якорная ссылка добавлена ​​и работает.

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

Создание якорной ссылки в WordPress ничем не отличается.

Примечание: Мы будем использовать классический редактор WordPress с TinyMCE.

  1. Во-первых, нам нужно создать якорь на нашей странице:
  2. Переключитесь в текстовый режим TinyMCE;
  3. Перейдите к той части содержимого, к которой вы хотите прикрепить якорь;
  4. Добавить идентификатор с уникальным именем привязки (например, id=»имя-привязки») . Вы можете применить идентификатор к любому элементу вашего макета.

Теперь пришло время создать ссылку на созданную вами привязку:

  1. Выберите текст, который будет работать как ссылка, и нажмите «Выбрать/редактировать ссылку»;
  2. Вы увидите всплывающее окно для редактирования параметров ссылки;
  3. Добавьте решетку вместе с именем якоря, которое вы создали;
  4. Сохраните изменения.

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

Если вы хотите сделать ссылку на якорь из вашей навигации:

  1. Перейдите к Внешний вид — Меню в панели администратора WordPress ;
  2. Выберите, чтобы добавить новый раздел в ваше меню;
  3. Добавьте ссылку на целевую страницу;
  4. Добавьте решетку вместе с идентификатором элемента к вашей ссылке;
    Пример: https://visualcomposer.com/features/#design-options
  5. Сохраните изменения.

Если вы работаете с редактором Gutenberg, обязательно проверьте, какие блоки Gutenberg имеют атрибут идентификатора элемента. Хотя вы по-прежнему можете добавить привязку к текстовому блоку, наличие параметра id для элемента может расширить ваши возможности.

В остальном следуйте тем же принципам вставки ссылки с указанным решеткой и идентификатором элемента.

Как создавать ссылки привязки в Visual Composer

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

Хитрость в том, что каждый элемент Visual Composer имеет атрибут Element ID, доступный из коробки.

Чтобы добавить якорь к элементу или секции:

  1. Выберите элемент, к которому вы хотите «перейти» (он же пункт назначения) ;
  2. Открыть окно редактирования элемента;
  3. Добавьте уникальный идентификатор элемента (без пробелов) .

После того, как вы добавили идентификатор элемента, пришло время добавить якорную ссылку:

  1. Откройте окно редактирования для элемента, в который будет добавлена ​​якорная ссылка (например, основная кнопка) ;
  2. Нажмите «Выбрать URL»;
  3. Добавьте уникальный «Идентификатор элемента»;
    Примечание: обязательно используйте только буквы и цифры без пробелов.
  4. Выберите «Пользовательский» в раскрывающемся списке URL-адресов.

Вот и все. Вы создали якорную ссылку с помощью Visual Composer Website Builder.

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

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

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

Оглавление

Как и в книгах, легче перемещаться по статье с оглавлением.

Пример оглавления от InVision

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

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

Призыв к действию

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

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

Пример якоря призыва к действию от Elivi Hotels

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

Те же принципы можно применить к таблицам цен или формам заказов.

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

Целевые страницы и одностраничные макеты

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

Пример одностраничного сайта с анкором от Vegoshi

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

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

Прокрутите вверх

Хотя во всех приведенных выше примерах используется нисходящий подход, мы можем пойти в противоположном направлении. Помните случай, когда вы пролистали страницу вниз и поняли, что вверху что-то есть? Чтобы вернуться, нужно было пролистать все вверх…

Прокрутите вверх, пример с веб-сайта CN100

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