Поле «Оглавление (SEO)» для InstantCMS 2

Поле «Оглавление (SEO)» для InstantCMS 2

Поле автоматически генерирует интерактивное оглавление на основе заголовков второго, третьего и четвёртого уровней (h2, h3, h4) в основном контенте статьи. Подходит для улучшения навигации, повышения удобства чтения и усиления SEO-сигналов за счёт структурированной разметки и корректного использования якорных ссылок.

Почему это важно в 2025 году?

Согласно последним исследованиям и докладам (включая материалы от GoGetLinks и Google), якорные ссылки (#anchor) играют всё более заметную роль в современном SEO:

• Google может использовать якоря для отображения «jump links» — прямых ссылок на конкретные разделы страницы прямо в поисковой выдаче.
• В условиях роста AI Overview (ранее SGE) Google всё чаще цитирует точные фрагменты текста, особенно если они:находятся под чётким заголовком,
  имеют уникальный идентификатор (id),
  структурированы и релевантны поисковому запросу.
  
• Хотя внешняя ссылка вида example.com/page#section передаёт вес всей странице, а не фрагменту, наличие якоря повышает шансы попадания этого фрагмента в сниппет или AI-ответ.

Таким образом, правильно построенное оглавление не только улучшает пользовательский опыт, но и увеличивает видимость контента в ИИ-выдаче и традиционном поиске.

Основные возможности

• Автоматическая генерация оглавления При включённой опции поле анализирует контент статьи и строит оглавление из указанных тегов заголовков.
• Гибкая настройка источника заголовков Вы можете выбрать, из каких HTML-тегов (h2, h3, h4) формировать оглавление. По умолчанию используются h2 и h3.
• Минимальное количество заголовков Оглавление появляется только если в тексте найдено заданное минимальное число заголовков (по умолчанию — 2). Это предотвращает появление пустых или бесполезных блоков.
• Интерактивная кнопка-переключатель Оглавление скрыто по умолчанию и отображается по клику на кнопку с настраиваемым текстом (например, «Содержание»).
• SEO-разметка Schema.org (JSON-LD) При включённой опции добавляется структурированная разметка в формате application/ld+json, соответствующая стандарту Schema.org для типа Article. Включает поле tableOfContents с полным списком разделов и якорными ссылками.
• Семантическая HTML-разметка Оглавление оформлено как элемент nav с атрибутами aria-label и itemscope, что улучшает доступность и понимание структуры страницы поисковыми системами.
• Безопасная генерация якорей Для каждого заголовка создаётся уникальный и читаемый идентификатор на основе его текста с поддержкой кириллицы и латиницы — что критически важно для корректной работы jump links.

Практическая польза для SEO и AI Overview

• Улучшает шансы попадания в «jump to»-сниппеты — Google может показывать прямые ссылки на разделы в результатах поиска.
• Повышает релевантность фрагментов для ИИ-агрегаторов — AI Overview чаще цитирует структурированные, помеченные якорем блоки.
• Усиливает внутреннюю навигацию — пользователи и роботы быстрее находят нужную информацию, что положительно влияет на поведенческие метрики (время на странице, глубина просмотра).
• Поддерживает best practices от Google — официальные рекомендации советуют использовать именованные якоря для идентификации разделов.

Технические особенности

• Поле не хранит данные в базе (тип text, но значение не сохраняется — генерация происходит динамически).
• Не индексируется для поиска (параметр allow_index отключён).
• Полностью совместимо с InstantCMS 2.
• Поддерживает многоязычность и корректно обрабатывает спецсимволы.

Настройки поля (в админке)

1. Автоматически генерировать оглавление — вкл/выкл.
2. Минимальное количество заголовков — от 1 и выше.
3. Теги заголовков для оглавления — выбор из h2, h3, h4 (мультивыбор).
4. Текст кнопки — например, «Содержание», «Оглавление» и т.п.
5. Добавить SEO разметку — вкл/выкл JSON-LD по Schema.org.

Установка поля

1. Распакуйте архив
2. Залейте файлы из архива по FTP
3. Добавьте стили в вашу тему в файл CSS (например в /templates/modern/css/theme.css) #toc-container { position: fixed; left: 20px; top: 50%; transform: translateY(-50%); z-index: 9999; } .toc-button { background: #0c5cd5; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; font-size: 0.9rem; box-shadow: 0 2px 10px rgba(0,0,0,0.2); transition: all 0.3s ease; white-space: nowrap; } .toc-button:hover { background: #0056b3; transform: scale(1.05); box-shadow: 0 4px 15px rgba(0,0,0,0.3); } .toc-content { background: white; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); margin-top: 10px; max-height: 70vh; overflow-y: auto; min-width: 250px; display: none; } .toc-wrapper { padding: 15px; } .toc-header { font-weight: bold; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; font-size: 1.1em; } .toc-list { list-style: none; padding: 0; margin: 0; } .toc-item { margin: 5px 0; padding: 0; } .toc-item a { text-decoration: none; color: #333; display: block; padding: 8px 12px; border-radius: 3px; transition: all 0.2s ease; } .toc-item a:hover { background: #f8f9fa; color: #007bff; } .level-2 a { padding-left: 10px; } .level-3 a { padding-left: 25px; } .level-4 a { padding-left: 40px; } @media (max-width: 768px) { #toc-container { left: 10px; top: 20px; transform: none; } .toc-content { position: fixed; left: 10px; top: 70px; right: 10px; max-height: 50vh; max-width: calc(100% — 20px); } }

Для кого это поле?

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

Поле полностью автономно, не требует внешних зависимостей и легко интегрируется в любую тему InstantCMS. Идеально подходит для тех, кто хочет улучшить UX, SEO и шансы на попадание в ИИ-выдачу «из коробки».

​

Оригинал записи на нашем сайте: Поле «Оглавление (SEO)» для InstantCMS 2