Table of Contents - плагин виджет содержание статьи для лучшего продвижения


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


    Важно!!! Скрипт плагина подходит для всех платформ, например Blogger, WordPress, Joomla и др..

    Думаю каждый время от времени посещает сайт Википедии. С первого взгляда ничего необычного, сайт энциклопедии да и все. Все верно, это обычный сайт, но в его публикациях есть плагин, который отображает структуру публикаций и тем самым помогает читателю лучше понять о чем они и выбрать нужный раздел. Этот плагин называется ToC - Table of Contents - таблица содержания контента или просто содержание. В общем перед основной частью текста отображается таблица с основными разделами статьи, кликнув по названию нужного раздела браузер мгновенно выдает нам этот раздел. Демо плагина можете увидеть на этой странице.
    ToC плагин содержания пример Википедия.
    Подобная организация статьи весьма полезно сказывается на ее продвижении в поисковых системах. По-этому не стоит упускать возможность оформления постов с помощью этого виджета.

    Виджет Table of Contents

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

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

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

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

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

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

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

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

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

    1. Зайдите в панель управления, раздел "Шаблон".
    2. Сохраните резервную копию шаблона на всякий случай.
    3. Кликните по кнопке Изменить HTML
    4. Перед закрывающим тегом </head> добавьте следующий код:
           
    
    <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
            
    
    <script type='text/javascript'>              
    //<![CDATA[           
    //*************TOC plugin by MyBloggerTricks.com           
    function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           
    headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)           
    {gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
    //]]>              
    </script>
    


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

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

          
    
    /*####Automatic TOC Plugin by MyBloggerTricks####*/          
    .mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}           
    .mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}           
    .mbtTOC ul {list-style:none;}           
    .mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}           
    .mbtTOC a{color:#0080ff;text-decoration:none;}           
    .mbtTOC a:hover{text-decoration:underline; }
    .mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}           
    .mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}
         

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

    <div id="post-toc"><data:post.body/></div>

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

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

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

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

    <div class="mbtTOC"> 
        <button onclick="mbtToggle()">Содержание</button> 
        <ol id="mbtTOC"></ol> 
        </div>

    Скриншот в помощь:
    виджет плагин содержание статьи пример 1


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

    <script>mbtTOC();</script>

    Второй скриншот в помощь:
    виджет плагин содержание статьи пример 2

    Теперь публикуйте статью и наслаждайтесь результатом. 

    Поделиться

    Facebook TwitterGoogle+ Vkontakte

    Рекомендуем

    Table of Contents - плагин виджет содержание статьи для лучшего продвижения
    4/ 5
    Oleh

    10 Коммент.

    Оставить комментарий
    avatar
    Пепа Табакова
    марта 09, 2017 Этот комментарий был удален автором.
    avatar
    Пепа Табакова
    марта 09, 2017

    Почему у меня не получается?
    www.blogzablogove.com

    Ответить
    avatar
    Пепа Табакова
    марта 09, 2017 Этот комментарий был удален администратором блога.
    avatar
    Шаблоны для Blogger
    марта 09, 2017

    Вы точно сменили все встречающиеся в шаблоне теги: <data:post.body/> на
    <div id="post-toc"><data:post.body/></div>

    Ответить
    avatar
    Пепа Табакова
    марта 09, 2017

    Да, у меня два, сменила

    Ответить
    avatar
    Шаблоны для Blogger
    марта 09, 2017

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

    Ответить
    avatar
    viptransfer24
    июня 21, 2017

    Добрый день! Просмотрел html вдоль и поперек, не могу найти этот код !Использую ваш шаблон viena.Подскажите, пожалуйста, что мне делать!Спасибо!

    Ответить
    avatar
    viptransfer24
    июня 21, 2017

    т.е. вот этот код

    Ответить
    avatar
    viptransfer24
    июня 21, 2017

    Уже нашел!

    Ответить
    avatar
    Марк Корвин
    июня 21, 2017

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

    Ответить