Делаем навигацию по статье, прописывая якоря в подзаголовки

Как сделать удобную навигацию по длинной статье

Реферальные банеры

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

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

Как сделать навигацию по статье. Ставим якоря для ссылок.

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

Рекомендую к прочтению "Структура статей и правильное оформление".

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

Предположим, что в статье использовано 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 -->

А Вы используете у себя на сайте такую навигацию внутри статей? Пишите в комментариях.

Понравилась статья? Поделиться с друзьями:
Как заработать деньги в интернете
Комментарии: 14
  1. Иван Зелинский

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

  2. Мозгунова Ирина

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

    1. seomodern

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

      1. Мозгунова Ирина

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

      2. seomodern

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

      3. Люся

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

  3. seomodern

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

  4. alf2012

    Также можно ссылаться на определенное место в другой статье прописывая в теге ссылки ее полный URL#имя, а самой другой статье ставить на место, куда надо перейти, тэг

    1. Анна

      То есть якорь ставить?

  5. Julija

    действительно, очень полезно для длинных статей с подзаголовками )

  6. Надежда Введенская

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

  7. Лариса Галаган

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

  8. Лучший

    Спасибо, не знал как якоря в коде ставить!

  9. Анна

    Супер! Как раз то, о чем я только сегодня подумала и не знала, как это сделать! Виктория, как вовремя ваша статья!!!

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности. Комментарий появится после проверки. Комментарии, содержащие спам и ненормативную лексику будут удалены!

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.