Как верстать блок «Содержание» на страницах сайтов СМИ

Рассказываем, зачем нужен блок с оглавлением статьи и как правильно его организовать.

Зачем нужно «Содержание»

Удобство читателей

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

Быстрые ссылки в поисковой выдаче

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

Ранжирование частей статьи

Еще в 2020 году «Гугль» представил систему ранжирования фрагментов, когда пользователям на их запросы отдается сразу нужная часть статьи. Косвенно блок содержания стимулирует роботов к подобным действиям. Отследить такой трафик можно с помощью страниц входа и фильтра по поисковым системам. Среди обычных сетевых адресов увидите, в том числе, версии с решеткой.

Работа с «Содержанием» в админке

Автоматический подход

Используется в текстовых редакторах вроде «Гугль Документов»: мы вставляем блок содержания, настраиваем, какого уровня подзаголовки должны отображаться (например, только <h2>), и далее он формируется самостоятельно.

Преимущества:

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

Недостатки:

• Если статья очень большая, может выглядеть громоздко (либо потребуются дополнительные настройки для отдельных материалов).
• Не получится использовать короткие фразы для пунктов списка, будут автоматически дублироваться подзаголовки.
• Не получится использовать ключевые слова в якорях, так как фразы после символа решетки будут формироваться либо очень длинной транслитерацией, либо технически (#heading1 вместо #definition или #opredelenie).

Полуавтоматический подход

Отнимает немного времени у редактора/бильда при вёрстке материала, однако дает необходимую гибкость, чуть лучше для SEO и не требует серьёзного пересмотра макета со стороны дизайнера. С точки зрения админки, за основу рекомендуем брать логику базового редактора TinyMCE.

У редакции появляются новые кнопки «Якорь» и «Содержание». «Якорь» можно вставить в любое место статьи и назначить ему название, которое в дальнейшем будем выводиться в списке-навигации.

«Содержание» вставляется в статью один раз, обычно в начале. Таким образом редактор указывает, где именно этот блок увидят читатели.

Пользовательский сценарий:

1. Редактор доходит до подзаголовка, который хочет использовать в навигации.
2. Перед ним вставляет якорь, присваивает ему значение: «Определение».
3. Таким же образом расставляет другие якоря, например: «Преимущества» и «Риски».
4. Редактор возвращается к началу статьи и решает добавить содержание после второго абзаца, когда заканчивается смысловая подводка.
5. Пользователь сохраняет статью. Админка автоматически формирует блок содержания в нужном месте статьи, которые состоит из трех пунктов. Каждый из них ведет на один из якорей: #opredelenie, #preimushchestva, #riski.

При желании можно отказаться от кнопки «Содержание» и отображать блок автоматически в фиксированной позиции, если в статье есть хоть один якорь. Однако такой подход обычно требует доработки макета статьи дизайнером.

Вёрстка блока «Содержание»

Внешний вид — на усмотрение дизайнера.

1. Вёрстка через нумерованный список <ol><li>.
2. Блок находится в исходном коде, то есть приходит с сервера и отображается даже с выключенным джаваскриптом.
3. В списке используются относительные ссылки, завёрстанные через <a></a> с помощью якорей.
4. Если кто-то поделился ссылкой с хэштегом, то при загрузке такой страницы браузер должен отправлять пользователя на соответствующий раздел статьи.
5. При клике на пункт из навигации экран пользователя должен прокручиваться таким образом, чтобы якорь оказался выше области видимости. Грубо говоря, нужно проследить, чтобы после клика пользователь попадал туда, куда мы хотим, и контент у него не обрезался.
6. Содержимое хэштегов должно формироваться транслитерацией с дефисами: «Определение термина» превратится в opredelenie-termina.

Дополнительные технические требования

Компактный вид на мобильных устройствах

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

Интерактивный индикатор текущей позиции на ПК

На ПК же, наоборот, удобно, когда блок движется за пользователем и отображает текущее расположение пользователя. Однако для этого требуется реализация автоматического подхода (или комбинации).

Секционный тег <nav> или ARIA-роль для доступности

К SEO напрямую не относится, но при прочих равных не лишним будет пометить функциональное назначение этого блока с помощью ARIA роли-ориентира (см. MDN или «Доку»). Либо верстаем блок через <nav>.

<nav aria-label="Навигация по статье">
  <ol>
    <li>
      <a href="#defenition">Определение</a>
    </li>
    <li>
      <a href="#benefits">Польза</a>
    </li>
    <li>
      <a href="#risks">Вред</a>
    </li>
  </ol>
</nav>