SEO, заработок в Интернете, блоггинг, работа в компьютерных программах

Как сделать навигацию по отдельно взятой статье?

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

Навигация в Википедии

Навигация в Википедии

Поисковые системы отлично относятся к хорошо структурированным материалам. Давно замечено, что наличие подобной навигации по статье даёт дополнительные плюсы при ранжировании документа. Как правило, подобным приёмом пользуются в достаточно объёмных статьях с несколькими подзаголовками. Ссылки из такого мини-меню указывают на эти подзаголовки и позволяют перемещаться по странице.

В коде это реализуется с помощью так называемых якорей (закладок). Тут всё очень просто. К примеру у нас есть статья с подзаголовками:

  • подзаголовок 1
  • подзаголовок 2
  • подзаголовок 3

Сначала делаем само меню. Для этого просто прописываем ссылки на подзаголовки такого вида:

<a href="#name1">подзаголовок 1</a>

<a href="#name2">подзаголовок 2</a>
<a href="#name3">подзаголовок 3</a>

Подзаголовок 1,2,3 — это анкоры ссылок, которые будут видны пользователям.

Теперь нам нужно установить в статье якоря (name1, name2, name3), куда эти ссылки будут вести. Допустим у нас подзаголовки обёрнуты в H3:

<h3>подзаголовок 1</h3>
...........
<h3>подзаголовок 2</h3>
...........
<h3>подзаголовок 3</h3>
...........

Дописываем подзаголовкам метки (якоря), то есть добавляем id="name..." указанные в меню.

<h3 id="name1">подзаголовок 1</h3>
..........
<h3 id="name2">подзаголовок 2</h3>
..........
<h3 id="name3">подзаголовок 3</h3>

Теперь каждая ссылка из меню будет вести туда, где указан её якорь (name1, name2, name3). Якоря можно добавлять в любое место статьи, не обязательно в подзаголовки. Названия якорей (name1, name2, name3) можно выбирать любые, главное, чтобы они совпадали с параметром name="#..." указанным в ссылках нашего меню.

Подписка на новые статьи. Введите e-mail:

Понравилась статья? Следи за новостями блога по Лента RSS RSS или в Обновления блога на Twitter Twitter !
Вернуться на Главную страницу
Комментарии (13)
  1. Геннадий

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

  2. Антон

    В сообщениях или в статьях?

  3. Геннадий

    В статьях.

  4. Антон

    Я бы советовал не пренебрегать этим. Мои статьи у которых есть такое меню — все в топе. Например та же самая статья про логотип. Другие уже не помню по названиям.

  5. Геннадий

    Я это понимаю. Учту.

  6. Антон

    Попробуй.

  7. Олег

    Можно еще без id делать, просто в нужное место вставлять ссылку (a name="name1"), ну ты понял. Так вот, как лучше делать или параллельно, главное результат?

    Кстати, заметил, что-то сегодня у многих трафик просел, выходные что-ли? У меня вообще хостинг хочет сайт отключить из-за чрезмерной нагрузки (или бабло срубить хотят). Вроде проверяю скорость, все нормально. Удалил несколько плагинов и виджетов, настроил кеширование, почистил базу данных — все равно нагрузка намного выше допустимой, это при том, что траф упал уже на 300-400 посетителей. Случаем, не знаешь, что еще предпринять?

  8. Олег

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

  9. Антон

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

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

    А кто заставляет в каждом подзаголовке использовать ключ тем более в прямом виде?

  10. Олег

    Это они меня перекинули на карантин, дали неделю на исправление. Ускоряю, как могу, а нагрузка только растет. Вчера было 1135.49 cp, это в 22 раза выше нормы. Такое разве может быть, при моей скорости сайта?

    Ключи не обязательно, но в любом случае они встречаются в подзаголовках.

  11. Антон

    У меня средняя нагрузка за 7 дней составляет 15.54 CP

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

  12. Олег

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

  13. Мухаммад

    Когда изучал html помню что-то подобное было. Теперь вспомнил, если не забуду применю, спасибо.

Ваш комментарий