Краткое содержание (оглавление) в статье с кликабельными ссылками-якорями – очень полезная плюшка, как для читателей, так и для владельца блога.
Такое меню в статьях вы, наверное, уже неоднократно встречали у меня на SEO Блоге Лентяйки и на других сайтах. Сложно ли сделать такую фишку? Очень просто!
Содержание статьи решает сразу несколько задач.
- Читатель с первого взгляда может понять, о чем статья, и решит ли она его проблему.
- Читателю удобно перемещаться по смысловым блокам текста.
- Внимание посетителя может зацепить какой-нибудь пункт меню в оглавлении, и он задержится на странице.
- В содержании статьи можно использовать ключевые фразы, под которыми продвигается статья. Нередко фрагмент краткого содержания попадает в сниппет поисковой выдачи. И смотрится он там очень эффектно!
Все очень просто. У меня на рабочем столе компьютера хранится текстовый файл с кодами, которыми я часто пользуюсь.
Там хранится код для вывода содержания статьи. Вот он.
?| 1 2 3 4 5 6 7 8 9 |
<ol id="sod">Содержание
<li><a href="#1"> Пункт меню 1</a></li>
<li><a href="#2"> Пункт меню 2</a></li>
<li><a href="#3"> Пункт меню 3</a></li>
<li><a href="#4"> Пункт меню 4</a></li>
<li><a href="#5"> Пункт меню 5</a></li>
<li><a href="#6"> Пункт меню 6</a></li>
<li><a href="#7"> Пункт меню 7</a></li>
</ol>
|
Я его просто вставляю в начале статьи в редакторе WordPress в режиме HTML. При переключении между визуальным редактором и HTML редактором он никуда не пропадает.
Вместо «пункт меню 1» и «пункт меню 2» я просто пишу подзаголовки статьи. Если нужно, то удаляю лишние пункты оглавления или добавляю новые.
Потом рядом с подзаголовками я ставлю якоря, чтобы при клике на ссылку читатель переместился к нужному подзаголовку.
Код якоря рядом с подзаголовком такой:
?| 1 |
<a name="1"></a>
|
Просто вставляю этот код якоря перед той строчкой, к которой хочу перенести читателя моего повествования.
Из чего состоит этот код содержания статьи? Он представляет собой HTML запись, служащую для вывода списка с цифрами.
Как это дело воплотить через плагины или какую взять тему для сайта, читайте в статье...
Вступите в группу, и вы сможете просматривать изображения в полном размере
Это интересно
+1
|
|||
Комментарии временно отключены