Якорные ссылки — это не та тема, которая часто обсуждается, но я добился отличных результатов благодаря им. Сегодня рассмотрим, как создавать их в WordPress. Также расскажу, почему вам стоит начать их использовать. Якорные ссылки помогут улучшить пользовательский опыт, сделать навигацию по длинному контенту намного проще и даже дадут небольшое преимущество в Google.
- Что такое якорные ссылки?
- Пример якорной ссылки
- Плюсы и минусы якорных ссылок
- Переход между якорными ссылками
- Как вручную создать якорные ссылки в WordPress
- Шаг 1
- Шаг 2
- Шаг 3
- Как создавать якорные ссылки в WordPress с помощью плагина
- Добавление якорных ссылок с помощью плагина
- Добавление оглавления с помощью плагина
- Автоматическое добавление якорных ссылок в заголовки с помощью плагина
- Как создать якорные ссылки в WordPress с помощью Gutenberg
- Шаг 1
- Шаг 2
- Заключение
Что такое якорные ссылки?
Якорные ссылки, также называемые ссылками меню перехода или оглавления, — это линки, которые мгновенно переводят вас на определенную часть страницы (или внешний ресурс). Для указания места назначения якоря обычно используется элемент A (называя его с помощью атрибута name) или любой другой (здесь применяется атрибут ID). Оба метода полностью соответствуют стандартам W3C.
Пример якорной ссылки
Если все еще не понимаете, что такое якорные ссылки, не волнуйтесь. Смотрите пример изображения ниже. Я использую их в каждом из этих элементов маркированного списка. При нажатии на них вы переходите непосредственно к заголовку H2, который имеет это содержимое. Якорные ссылки используются в любом месте, например в тексте, изображениях и заголовках H1-H6.
На многих сайтах они применяются только для создания оглавления в начале длинных постов. Если знаете немного CSS, можете проявить креативность и придать им более стильный вид, как я сделал на своих лендингах.
На других сайтах их может не быть, вместо этого они используются в заголовках, что позволяет делиться ссылками на конкретные разделы.
Плюсы и минусы якорных ссылок
Вот несколько плюсов и минусов, которые следует учитывать при использовании якорных ссылок на вашем ВордПресс-сайте.
Плюсы
Одно из самых главных преимуществ якорных ссылок — создание лучшего пользовательского опыта при просмотре сайта. Это особенно актуально, когда речь идет о длинных статьях. Я публикую много такого контента (4 000 слов), и прокрутка может стать мучением. Применение якорных ссылок позволяет человеку мгновенно перейти к интересующему его разделу. Пусть ваши пользователи быстрее находят то, что им нужно.
Использование якорей в заголовках позволяет делиться прямыми ссылками на различные разделы статьи. Это очень удобно для социальных сетей и даже команд поддержки. Якорные ссылки полезны в статьях базы знаний, чтобы направить пользователя именно на тот шаг по устранению неполадок, который ему необходимо выполнить. Отделы продаж также могут применять их для более быстрого ответа на запросы.
Когда речь заходит о страницах выдачи поисковых систем, результаты всегда могут варьироваться в зависимости от того, что на них отображается. Однако я неоднократно видел, как якорные ссылки (меню переходов) появлялись на сайтах SERP, потому что я использовал их в своих статьях. Это замечательно, так как они, по сути, дают еще одну строку текста для вашего органического листинга. Якоря также помогут повысить CTR, поскольку пользователь может увидеть что-то связанное с его запросом, чего не было указано в метаописании или хедере.
Якоря могут применяться и для других целей, например, для ссылки «вернуться к началу», которую использует Википедия вместе со своими цитатами или сносками.
Минусы
Хотя я считаю, что плюсы определенно перевешивают минусы, вот несколько недостатков, которые вы, возможно, захотите учесть.
Якорные ссылки или оглавление могут снизить среднее время пребывания посетителя на сайте. Потому что они переходят сразу к нужной информации, а не читают всю статью. Однако если сразу же порадуете посетителя, это, возможно, приведет к тому, что он подпишется на рассылку или начнет изучать то, что вы продаете. Так что это можно рассматривать как «за» , так и «против».
Якорные ссылки влияют на доходы от рекламы. Посетители, переходящие сразу к определенному разделу, могут сократить количество показов и кликов. Сайты, которые в значительной степени полагаются на рекламу, возможно, захотят провести A/B-тестирование с использованием якорных ссылок и оглавления.
Если меняете домены или вам нужно добавить 301 редирект, важно отметить, что идентификатор фрагмента (#) никогда не отправляется на сервер. Это может усложнить ситуацию, если в дальнейшем будете менять якорные ссылки. Есть способы обойти это с помощью JavaScript, но это отнюдь не простая задача.
Переход между якорными ссылками
Вы также можете подумать об изменении перехода между якорными ссылками. По умолчанию якоря внезапно переходят к идентификатору, расположенному дальше по странице. Некоторых это раздражает. Вы можете изменить этот переход, чтобы он был плавным. Именно так я делаю в этом блоге. Можете использовать бесплатный плагин Page scroll to id, или добавить на свой сайт некоторые CSS, например scroll-behavior: smooth;.
Существует несколько различных способов создания якорных ссылок в WordPress.
Как вручную создать якорные ссылки в WordPress
Первый способ создать якорные ссылки в ВордПресс — сделать это вручную с помощью HTML в каждом из постов. Давайте добавим одну, чтобы вы могли увидеть, как они работают.
Шаг 1
Создайте текст для ссылки и добавьте к нему гиперссылку, как вы обычно делаете это для любой другой.
Шаг 2
Вместо того чтобы привязывать ее к URL, посту или странице, вы присвоите ей имя якоря. URI, обозначающие их, содержат символ «#», за которым следует наименование. Можете назвать его как угодно, хотя обычно я рекомендую делать его коротким и связанным с реальным названием заголовка.
Если посмотрите на текстовый вид (HTML), то это выглядит следующим образом:
<a href="#manually-create-anchor-links-wordpress">Как вручную создать якорные ссылки в WordPress</a>Вот пример всех якорных ссылок, которые можно использовать:
<ul>
<li><a href="#manually-create-anchor-links-wordpress">Как вручную создать якорные ссылки в WordPress</a></li>
<li><a href="#anchor-links-wordpress-plugin">Как создавать якорные ссылки в WordPress с помощью плагина</a></li>
<li><a href="#anchor-links-wordpress-gutenberg">Как создавать якорные ссылки в WordPress с помощью Gutenberg</a></li>
</ul>Шаг 3
Далее добавьте ID в заголовок, на который будет переходить якорная ссылка. Для этого нужно переключиться на текстовый вид (HTML) в редакторе WP. В заголовке, в данном случае в H2, добавьте ID вместе с именем якоря, которое выбрали в шаге 2. Они должны быть абсолютно одинаковыми, чтобы ссылка работала.
Как создавать якорные ссылки в WordPress с помощью плагина
Не хотите каждый раз работать с HTML-кодом? Не волнуйтесь, есть несколько бесплатных плагинов ВордПресс, с помощью которых вы можете легко добавить якорные ссылки и даже оглавление к каждому посту.
Добавление якорных ссылок с помощью плагина
Один из самых простых способов создания якорной ссылки — это бесплатный плагин TinyMCE Advanced. Он, по сути, добавляет дополнительную функциональность редактору с помощью кнопок быстрого доступа. На момент написания этой статьи плагин имеет более 2 миллионов активных установок с рейтингом 4,5 из 5 звезд.
Шаг 1
После установки и активации плагина зайдите в свою статью и создайте гиперссылку на якорный текст. Вместо того чтобы привязывать ее к URL, посту или странице, присвойте ей имя якоря с символом # перед ним.
Шаг 2
Выделите заголовок, к которому хотите его привязать. Затем нажмите «Вставить» в верхней части и выберите «Якорь». Эта кнопка появляется в редакторе благодаря плагину TinyMCE Advanced.
Шаг 3
Введите имя якоря, которое дали ему в Шаге 1 и нажмите «ОК». Этот плагин экономит время, потому что не нужно покидать визуальный редактор. Если делаете это вручную с помощью HTML, то придется постоянно переходить к коду.
Добавление оглавления с помощью плагина
Возможно, вы хотите еще больше ускорить процесс. Если делаете много длинного контента и желаете включать в свои статьи оглавление (списки якорных ссылок/переходное меню), то стоит воспользоваться плагином для этого.
Одно из лучших бесплатных расширений — Easy Table of Contents. Этот плагин автоматически генерирует якорные ссылки для ваших заголовков и позволяет вставить оглавление в любое место поста с помощью простого шорткода. На момент написания этой статьи он имеет 30 000+ активных установок с рейтингом 4,5 из 5 звезд.
Шаг 1
После установки и активации плагина есть несколько параметров, которые вы, вероятно, захотите изменить. Их можно найти в разделе «Настройки → Оглавление».
- Опция «Включить поддержку» позволяет выбрать, в каких типах публикаций вы хотите использовать оглавление. Скорее всего, это вариант «Пост».
- Затем можете выбрать, как вставлять оглавление — вручную или автоматически. Я рекомендую первый способ, если посты часто меняются.
- Опция «Показывать, когда» позволяет определить, сколько заголовков должно быть в публикации, прежде чем появится оглавление. Например, вы, вероятно, не захотите, чтобы оно было в короткой статье. Поэтому лучше всего сделать не менее четырех или более заголовков.
Шаг 2
Чтобы сделать оглавление вручную, просто вставьте шорткод [ez-toc] в то место, где хотите, чтобы оно отображалось в посте.
После этого оглавление будет автоматически создано для всех заголовков в посте.
Вы также можете внести дополнительные изменения в настройки, касающиеся того, что должно отображаться, исключений, внешнего вида и т.д. Например, в конце постов всегда есть заголовок «Заключение». Можете внести его в список исключений в настройках, чтобы он не попадал в оглавление.
Еще один плагин, на который стоит обратить внимание, — Shortcode Table of Contents. Это более новое расширение на рынке, разработанное Джеймсом Кемпом.
Автоматическое добавление якорных ссылок в заголовки с помощью плагина
Хотите просто автоматически добавлять якорные ссылки во все заголовки? Тогда стоит обратить внимание на бесплатный плагин WP Anchor Header. Он добавит якорные ссылки во все ваши H1-H6.
Это очень простой плагин, в нем нет никаких настроек. Установите его, активируйте, и все готово. Каждый заголовок автоматически получит имя якоря (производное от его названия), и даже маленький значок, который появляется при наведении курсора. Это позволяет посетителям увидеть, что там есть ссылка, которую они могут скопировать, если захотят.
Как создать якорные ссылки в WordPress с помощью Gutenberg
Шаг 1
Выделите заголовок в блоке Gutenberg и нажмите на «Дополнительно» с правой стороны. Вы увидите возможность добавить HTML-якорь.
Шаг 2
Если хотите поставить на него линк, просто создайте гиперссылку в тексте якоря. Вместо того чтобы привязывать ее к URL, посту или странице, присвойте ей имя с символом # перед ним.
Заключение
Как видите, существует множество способов добавления якорных ссылок в WordPress. Некоторые из них проще, чем другие.
Если публикуете много длинного контента, это даст возможность посетителям сразу же перейти к нужной им информации. Я также видел, как якорные ссылки помогают получить «переход к меню» в SERP, что увеличивает CTR в органических листингах.
