Приветствую вас на блоге ИнетСоветы.ру! Этот пост я хочу посвятить теме "Как сделать навигацию по статье или как создать меню для перехода к интересующей читателя части статьи." Возможно не все поняли о чем я говорю, тогда, чтобы было понятно посмотрите на следующий скрин.
На сайт Википедии, я думаю, Вы заходили хоть раз в жизни. Там на каждой странице есть вот такой блок содержания статьи:
Использовать такую навигацию в статье нужно тем, кто пишет длинные статьи с подзаголовками. Многие заметили, что такая навигация оказывает положительный результат на ранжировании статьи в поисковой выдаче. Каждая ссылка в меню позволяет переместиться непосредственно к той части документа, в заголовке которой использован якорь.
Рекомендую к прочтению "Структура статей и правильное оформление".
В коде это реализуется несложно. К каждому подзаголовку добавляется якорь (метка). Наглядный пример реализации:
Предположим, что в статье использовано 3 заголовка h2.
- заголовок h2 №1
- заголовок h2 №2
- заголовок h2 №3
В нужном нам месте статьи (обычно после вступительного абзаца) добавляем меню код меню. Обратите внимание, что нужно перейти на вкладку Текст в редакторе.
<a href="#1">заголовок h2 №1</a> <a href="#2">заголовок h2 №2</a> <a href="#3">заголовок h2 №3</a>
Мы добавили обычный список ссылок с анкорами. В качестве анкоров у наших ссылок выступают фразы скрывающиеся за заголовок h2 №1, 2, 3.
В качестве адреса ссылки у нас используются #1, 2, 3.
Каждому заголовку добавляем якорь со своим номером. Для первого заголовка это будет id="1". И так далее.
<h2 id="1">заголовок h2 №1</h2> <h2 id="2">заголовок h2 №2</h2> <h2 id="3">заголовок h2 №3</h2>
Обращаю Ваше внимание, что не нужно ставить символ # в якорь.
Если Вы сделали все правильно, что после клика по ссылке в содержании, Вас переместит на ту часть статьи, на которую Вы поставили якорь.
Чтобы как-то выделить данный блок css оформление блока и оформляйте списком.
Важно! Чтобы не было дублирования контента на странице и переспама ключевыми словами, закройте содержание в тэги
<!--/noindex-->тут текст<!-- /noindex -->
А Вы используете у себя на сайте такую навигацию внутри статей? Пишите в комментариях.
Спасибо за познавательный, полезный материал. Нужно попробовать сделать жизнь своих читателей удобной
Воспользуюсь.
Для очень длинных статей, конечно, вполне оправданно часть материала прятать за ссылку. Но мне кажется, лучше разделить большую статью на несколько маленьких и оформить её обычным способом.
Мне тоже кажется, что лучше статьи разбить на несколько — дополнительная статья и страница не помешают. Но случаи разные бывают. Не зря такая возможность существует.
Да, возможно, автор после нескольких отдельных статей, решил написать, например, обзорную статью, вот тогда и потребуется данный метод.
Мне кажется, в таком случае будет уместно написать обзорную статью и сослаться на нее в предыдущей в виде новости или дополнения.
Лучше планировать заранее и обзорную статью статью опубликовать раньше детальных статей.
Никогда не задумывался о создании содержания. Изначально не совсем понял из статьи, как это сделать. Пришлось смотреть исходный код страницы, чтоб увидеть и понять, как это реализуется на самом деле. Все равно спасибо за статью.
Также можно ссылаться на определенное место в другой статье прописывая в теге ссылки ее полный URL#имя, а самой другой статье ставить на место, куда надо перейти, тэг
То есть якорь ставить?
действительно, очень полезно для длинных статей с подзаголовками )
В принципе, очень похоже на то, что делаешь в обычном Word. Я сначала подумала, что это не так актуально для блога. Но посмотрела ваш пример — очень хорошо и к месту эта функция. Возьму и себе на заметку.
Да, статья просто супер, Виктория все объяснила доступным языком. Мне кажется для пользования сайтом это удобно читателям, не нужно тратить время на ту часть информации, которая не нужна.
Спасибо, не знал как якоря в коде ставить!
Супер! Как раз то, о чем я только сегодня подумала и не знала, как это сделать! Виктория, как вовремя ваша статья!!!