Виджет содержание статьи или как создать быстрые ссылки

Виджет содержание статьи или как создать быстрые ссылки

Виджет содержание статьи (table of contents) поможет структурировать статью и тем самым облегчить ее взаимодействие с пользователем. Кроме этого Table of Contents создает быстрые ссылки в поиске Google, что повышает CTR (показатель кликабельности), простыми словами у сайта будет больше визитов из поиска

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

Как сделать быстрые ссылки в поиске Google

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

  1. В описании сниппета (мета тег Description)
  2. Под описанием сниппета, мелкого шрифта в один ряд
  3. Под описанием сниппета, по отображению напоминают заголовок статьи

Быстрые Ссылки в описании сниппета Те линки, которые формируются в описании ведут на саму статью, перед читателем отображается определенный раздел (абзац) данной статьи. Такого типа ссылки можно воссоздать используя специальный виджет, который называется Table of Contents - содержание статьи. На картинке ниже отображен результат его работы:

Почему так? Все просто, если главное меню использует JavaScript, тогда ссылки будут мелкими, а если не использует, тогда ссылки будут крупными.

Быстрые ссылки в поиске Yandex

С Яндексом будет немного сложнее, потому что он не реагирует на виджет "Содержание статьи" и с его помощью уже не получиться сделать тоже самое, что и в Google. Но Яндекс тоже формирует быстрые ссылки, пока что я видел их только для главной страницы своего сайта. Отображались они похожим образом, как и в Гугле, только не под сниппетом, а над Заголовком статьи. Еще есть одна фишка с заголовками в Яндексе, думаю вам будет интересно с ней ознакомиться в этой статье ищите абзац под названием: Как работают заголовки в поиске Яндекса.

Видео по теме:

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

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

Виджет Table of Contents

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

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

Как работает виджет Table of Contents

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

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

Особенности плагина для отображения содержания статьи

  • Создан на чистом JavaScript - всего 10 строк
  • Легкий и быстрый
  • SEO дружественный
  • Добавляет уникальный идентификатор для каждой секции статьи отдельно
  • Создает упорядоченный список
  • Включает кнопку отображения содержания (спрятать или показать)
  • Показывает выбранный раздел
  • Легко устанавливаемый
  • Адаптивный

Как установить виджет Table of Contents в блог на blogger

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

  1. Зайдите в панель управления, раздел "Шаблон".
  2. Сохраните резервную копию шаблона на всякий случай.
  3. Кликните по кнопке Изменить HTML
  4. Перед закрывающим тегом </head> добавьте следующий код:

Если в своих статьях вы используете для заголовка тег H3, а не H2, тогда в коде замените H2 на H3, нужные участки выделены красным цветом.

5. Следующим делом найдите в шаблоне тег: ]]></b:skin> и перед ним добавьте код:

6. И наконец последний шаг. Найдите тег <data:post.body/> может встречаться в шаблоне несколько раз, нужно заменить каждый встречающийся на тег следующего содержания:

7. Теперь сохраните шаблон.

Активация виджета "содержание статьи" в постах

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

1) Расположение виджета в посте. Лучше всего добавлять виджет после первого абзаца статьи. Для этого в редакторе сообщения переключитесь на вкладку HTML и вставьте следующий код:

Скриншот в помощь:

2) Активация плагина. Чтобы плагин заработал и начал отображаться в статье, нужно на той же вкладке HTML в самом конце статьи добавить код:

📎📎📎📎📎📎📎📎📎📎