Делаем навигацию по статье

Автор: | Рубрика: Создание и ведение сайта | Обновлено: 2015-03-14 | Создано:
Просмотров: 1931
как сделать содержание со ссылками для статьи

Здравствуйте!

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

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

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

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

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

 

Обращаю Ваше внимание, что не нужно ставить символ # в якорь.

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

Ознакомиться с примером работы такой навигации по статье Вы можете на этой странице. Чтобы как-то выделить данный блок я его выделила как цитату и использовала маркированный список.

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

С уважением, Виктория – блог inetsovety.ru

Поделиться ссылкой на пост в соц. сетях
Получать уведомления о новых статьях на e-mail
Комментариев: 13 к статье "Делаем навигацию по статье"
  • Иван Зелинский 2014-08-06 в 22:53

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

    Ответить
  • Мозгунова Ирина 2013-12-15 в 13:04

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

    Ответить
    • seomodern 2013-12-15 в 15:52

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

      Ответить
      • Мозгунова Ирина 2013-12-31 в 09:48

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

        Ответить
        • seomodern 2013-12-31 в 12:49

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

          Ответить
  • seomodern 2013-10-25 в 15:39

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

    Ответить
  • alf2012 2013-10-10 в 22:16

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

    Ответить
    • Анна 2013-10-11 в 09:08

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

      Ответить
  • Julija 2013-10-08 в 09:12

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

    Ответить
  • Надежда Введенская 2013-10-06 в 22:32

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

    Ответить
  • Лариса Галаган 2013-10-05 в 06:56

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

    Ответить
  • Лучший 2013-10-04 в 20:09

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

    Ответить
  • Анна 2013-10-04 в 15:37

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

    Ответить
Оставить комментарий
Нажмите, чтобы отменить ответ.

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