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

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

С одной стороны, лишние плагины утяжеляют ваш сайт и не всегда сохраняют стабильную работу после обновлений.

Якорь в HTML — Якорь в редакторе Gutenberg — Якорная ссылка для перехода на другую страницу

Однако с плагинами проще управляться. Смотрите: если ваш сайт работает в нескольких версиях (для стационарных ПК, для мобильных устройств, с турбо-страницами…), то ссылки для каждой из них надо делать отдельно. Иначе получится смешение версий: человек жмет на якорь мобильной страницы и оказывается в подходящем (по смыслу) разделе — но на странице для ПК. Разделять версии вручную довольно трудоемко. А подходящий плагин, по идее, должен автоматически следить, чтобы ничего не смешивалось.

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

Якорная ссылка в HTML

Торопитесь? Вот скрин-шпаргалка:

***

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

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

Примерно так:

Закрывается этот тег как обычно, с косой чертой </a>. Между открытием и закрытием помещаем текст из «Содержания статьи», на который станут кликать пользователи. Сугубо технически этот текст не требуется, то есть конструкция <a href= «#1» ></a> тоже будет работать — но как люди поймут, куда здесь нажимать? Поэтому пишем так: <a href= «#1» >Глава первая</a>. С текстом.

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

• <a href= «#1» >Глава первая</a>
• <a href= «#2» >Глава вторая</a>
• <a href= «#3» >Глава третья</a>

***

Теперь отметьте в статье то место, куда уводит ваша якорная ссылка. То есть точку, где окажется пользователь после клика. Ее нужно пометить тегом, содержащим id= «1» , id= «отправляемся туда» или что-то вроде этого. В кавычках вставлена изначальная уникальная метка, уже без решетки.

***

Важно: id — это не самостоятельный тег, а так называемый атрибут, который нужно прицепить к какому-нибудь тегу. К любому:

<a id= «1» >якорь разместится в некоей произвольной точке текста</a>

<strong id= «1» >якорь на слово в тексте, написанное жирным шрифтом</strong>

<em id= «1» >якорь на слово или фразу, выделенную курсивом</em>

<h2 id= «1» >якорь на подзаголовке второго уровня</h2>

Вот как они будут выглядеть, если убрать лишние пробелы от кавычек и позволить Вордпрессу отобразить все прописанное:

***

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

Вот сюда, в точку между красным и зеленым:

<></>

Пример использования — и «красивый» результат поисковой выдачи

Но лучше ставить якоря на подходящие по смыслу ключи или подзаголовки. Потому что это нравится поисковым системам. Вот, например, скрин результатов выдачи Гугла, в котором мой сайт оказался с меткой «Перейти к разделу PayPal» и короткой ссылкой.

***

***

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

***

Польза от якорных ссылок (ищем подход к поисковым роботам)

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

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

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

Апдейт (про Турбо)

Если вы пользуетесь технологией «Турбо-страницы» от Яндекса, то обратите внимание: якорные ссылки работают корректно, когда ведут на подзаголовок h1-h6. В прочих случаях могут уводить пользователя с турбо-страницы на ее же полную версию.

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

Апдейт 2 (про Гутенберг)

Обратите внимание! В новых версиях Вордпресс в редакторе Гутенберг появился соответствующий функционал. Можно ставить якоря мышкой. Однако и описанный «олдскульный» метод также остается работающим.

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

Готово 🙂 Работает только в редакторе Гутенберг.

Дополнение-2022

После очередного обновления редактора поле «Дополнительно» для HTML-якоря стало доступным для любых блоков (даже не обязательно текстовых, можно крепить на картинки). Это очень удобно и здорово.

Только учитывайте, что для поисковых роботов важна структура страницы. С SEO-позиций якорь на подзаголовке очевидно выигрывает у якоря на обычном абзаце. Да, ссылка закрепится именно на_блок, на весь абзац, а не на отдельное предложение, фразу или слово. Если хотите на фразу — то делайте через HTML, в режиме редактирования кода.

Якорная ссылка для перехода на другую страницу

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

Получится конструкция «сайт страница #раздел» — и она будет работать.

---

Материал оказался полезным?

Вы можете оставить отзыв: допустим, на Яндексе

…задонатить на общее развитие: 2200 1502 3464 1659

+ WMZ + Z304447781806

…задать возникшие вопросы, добавить свои мысли или покидать яблоками.

Приходите еще 🙂