Когда мы выбираем книгу в книжном магазине, смотрим в каком переплете книга, удобно ли будет ее читать, какой типографический шрифт и обязательно просматриваем в начале описание, о чем пишется в книге, суть произведения, в каком жанре написан. И конечно смотрим на оглавление, сколько глав в издании, сколько страниц. Это дает нам понять нужна нам эта книга, будем ли мы её читать или после покупки будет пылиться на полочке в библиотеке.
 |
| Рис.Как сделать краткое содержание статьи на сайте |
Так же и в интернете, по моему мнению, к каждой длинной статье с множеством ключевых запросов должно быть оглавление. Посетитель зайдя по запросу в считанные минуты глазами обязан найти то за чем он пришел.
Как известно скрипты, виджеты, гаджеты и плагины очень грузят сайт, и html страницы открываются медленно. Всего должно быть по минимуму, особенно в самом начале ведения сайта и если ваш сайт на https
. Любой сторонний виджет или скрипт может нарушать безопасное соединение.
Как сделать краткое содержание статьи на сайте
На сайте или блоге желательно все делать вручную. Сегодня мы научимся делать оглавление (содержание, меню) для каждой публикации собственными силами без применения дополнительных нагрузок, только с помощью html.
Пример подсмотрела у любимого мною блоггера Дмитрия, за что ему огромное спасибо за доступные и хорошие уроки. Его сайт у меня в панели закладок вверху браузера:)
К примеру на сайте статья про бегущую строку в html, я знаю как вставить бегущую строку на сайт и какой тег создает бегущую строку, но совсем не ведаю как вставить картинку в бегущую строку. Когда я захожу на такую длинную запись, нет надобности читать весь текст, я зашла по конкретному вопросу. В содержании я нажимаю на тот пункт который меня интересует и получаю быстрый ответ на свой запрос. Безусловно это уменьшает время посещения посетителя на сайте, но поисковики, особенно Яндекс любит, когда запись имеет оглавление к статье с красивыми и понятными ЧПУ.
Или же мне задали вопрос по конкретному запросу и я могу смело найти статью и кинуть ссылку на нужный раздел в статье.
Как делаю я cсылки внутри страницы. Для примера использую статью «Как закрепить запись вверху ленты».
Собрала ключевые слова в Яндекс вордстат или в условно платном сервисе Мутаген. Вставила все ключи и хвосты в запись, обязательно в html редакторе как список. Перед публикацией подготавливаю и редактирую статьи в программе Notepad++ или WordPad.
Беру список ключей
<li>Закрепить запись на WordPress</li> <li>Как закрепить запись в фейсбук</li> <li>Как закрепить запись в вк в группе</li> <li>Как закрепить чужую запись на стене вконтакте</li> <li>Как закрепить твит вверху ленты в Твиттере</li> <li>Как закрепить сообщение на главной странице в Blogger (Blogspot)</li>
И чуточку ниже вставляю те же ключи, но обрамляю их в заголовки, открывающими и закрывающими тегами h2 - h6. Возможно у вас заголовки и подзаголовки в статье прописываются одним тегом.
Заголовки и подзаголовки.
<h2>Закрепить запись на WordPress</h2> <h3>Как закрепить запись в фейсбук</h3> <h4>Как закрепить запись в вк в группе</h4> <h5>Как закрепить чужую запись на стене вконтакте</h5> <h6>Как закрепить твит вверху ленты в Твиттере</h6>
Человеческий мозг мощнее любого компьютера, вот воистину божественное создание, но и он дает иногда сбои и что бы его не перегружать я всегда держу на компьютере в отдельном файлике такую вот конструкцию:
<a href="URL статьи # kлюч латыницей">Название ключа</a>
<h2 id="kлюч латыницей">Название ключа</h2>
Первый код это якорь, то-есть ссылка с якорем, которая содержит символ # (решетка) или еще его называют хештег с английского hashtag. После хеш-тэга прописывается идентификатор (атрибут id).
При щелчке по такой ссылке браузер прокрутит окно страницы к нужному месту где находится элемент с атрибутом id, перезагрузка страницы и текста не произойдет.
Второй код это закладка с уникальным именем идентификатором, куда после нажатия на раздел в статье вас перебросит.
Вот так должно выглядеть в записи:
Содержание статьи: <li><a href="https://yablogger.info/kak-zakrepit-publikaciyu-na-glavnoj-stranice.html# zakrepit-zapis-na-wordpress">Закрепить запись на WordPress</a></li> <li><a href="https://yablogger.info/kak-zakrepit-publikaciyu-na-glavnoj-stranice.html# zakrepit-zapis-v-fejsbuk">Как закрепить запись в фейсбук</a></li> <li><a href="https://yablogger.info/kak-zakrepit-publikaciyu-na-glavnoj-stranice.html# zakrepit-zapis-v-gruppe-v-kontakte">Как закрепить запись в вк в группе</a></li> <li><a href="https://yablogger.info/kak-zakrepit-publikaciyu-na-glavnoj-stranice.html#zakrepit-chuzhuyu-zapis-na-stene-vkontakte">Как закрепить чужую запись на стене вконтакте</a></li> <li><a href="https://yablogger.info/kak-zakrepit-publikaciyu-na-glavnoj-stranice.html# zakrepit-tvit-vverhu-lenty-v-tvittere">Как закрепить твит вверху ленты в Твиттере</a></li> Заголовки и подзаголовки статьи. <h2 id="zakrepit-zapis-na-wordpress">Закрепить запись на WordPress</h2> <h3 id="zakrepit-zapis-v-fejsbuk">Как закрепить запись в фейсбук</h3> <h4 id="zakrepit-zapis-v-gruppe-v-kontakte">Как закрепить запись в вк в группе</h4> <h5 id="zakrepit-chuzhuyu-zapis-na-stene-vkontakte">Как закрепить чужую запись на стене вконтакте</h5> <h6 id="zakrepit-tvit-vverhu-lenty-v-tvittere">Как закрепить твит вверху ленты в Твиттере</h6>
Список ссылок вставляем в начало записи после первого абзаца или после первого заголовка. Там уж сами решите какой список у вас будет маркированный или нумерованный. Можно вставить список в красивую рамочку или в таблицу.
Как сделать содержание статьи в WordPress
Еще очень интересный и быстрый способ создать оглавление статьи на сайте без плагина.
В записи открываем вкладку Визуально, вставляем все ключевые слова списком в то место где будет оглавление, в статье эти же ключи выделяем заголовками и подзаголовками.
Далее редактируем список, выделяем первый пункт списка и на панели инструментов нажимаем на скрепку (икона вставки ссылок). В открывшемся окошке жмем на шестеренку и настраиваем ссылку. В следующем окне Введите адрес назначения (URL) в графу URL вставляем якорь ссылки-хештег и идентификатор.
#soderzhanie-stati-vordpress-po-zagolovkam
Или запись может быть такая:
#1, #2, #3 и так далее.
Не обязательно после решетки должен быть ключ на латинице, в уроке описываю как это делаю я. Ключи могут быть короткими или вообще после хеш-тэга можно прописывать META-тег Keywords.
К примеру основной адрес этой статьи
https://yablogger.info/kak-sdelat-soderzhanie-stati-na-sajte.html
А если мы добавим после хэш-тега мета тег keywords, что в переводе значат ключевые слова, то ЧПУ будет выглядеть так:
https://yablogger.info/kak-sdelat-soderzhanie-stati-na-sajte.html#primer
https://yablogger.info/kak-sdelat-soderzhanie-stati-na-sajte.html#kak-sozdat
Или например еще так:
https://yablogger.info/belye-tapochki.html#kupit
На мой взгляд - для поисковых роботов это намного привлекательнее и понятнее чем просто циферки в конце.
Далее переходим в html редактор на вкладку текст, находим в статье подзаголовки и перед каждым вставляем такой код.
<a id="kлюч латыницей"></a>
или так
<a id="1"></a>
Вот так легко делается краткое содержание публикации внутри статьи в html. Будут вопросы задавайте их в комментариях!
Будь вместе с Я Блоггер
