Поле «Оглавление (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 и шансы на попадание в ИИ-выдачу «из коробки».

​