Как сделать содержание в статье на сайте или блоге и улучшить навигацию
Современное оформление статьи на сайте, это не просто расставление стилистических тегов и добавление картинок, но и правильная и понятная навигация. Поэтому, к вопросу о том как сделать содержание в статье, нужно подойти серьезно.
Ниже подготовил самое важное, что нужно знать по материалу. Так что, переходите к изучению материала и внедряйте в свои сайты и блоги.
Создание содержания в статье на сайте
Красиво оформленное содержание или оглавление статьи на сайте либо блоге, несет в себе сразу две важные вещи:
- Улучшается навигация по статье. Читатель понимает что где находится и, уже на этапе изучения содержания, знает какой именно раздел его интересует.
- Улучшаются SEO показатели. Материалы с оглавлением котируется гораздо выше, чем без них.
Навигация по сайту делается при помощи якорных ссылок. Поэтому, сначала разберемся как они работают и где применяются.
Как сделать якорную ссылку HTML тегами
Существует два элемента:
- Якорь. Помечается место в документе, куда будем ссылаться.
- Якорная ссылка. Ссылка, указывающая на якорь.
Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.
Исходя из этого, первое что нужно сделать для правильной навигации по сайту, разметить статью якорями. Делается это следующим образом, находим кусок текста (обычно это заголовки либо изображения) и добавляем код:
Тем самым, мы пометили заголовок «Как сделать якорную ссылку HTML тегами» идентификатором «id=»soderzhanie-v-state-na-sajte-1-1″».
После этого, устанавливаем якорную ссылку. Она добавляется при помощи тега «а» с хештегом в атрибуте «href».
В результате, получаем ссылку в статье на интересующий блок.
Кроме того, якорная ссылка может содержать в себе не только адрес текущей статьи, но и адрес другой web-страницы. К примеру:
То есть, при помощи HTML, мы указали, что хотим перейти на страницу «https://wamotvet.ru/webmaster/soderzhanie-v-state-na-sajte.html» к «якорю soderzhanie-v-state-na-sajte-1-1».
Надеюсь с этим все понятно, потому что буду переходить дальше, к теме статьи. Если остались вопросы, либо перечитайте материал, либо задайте свой вопрос в комментариях.
Пример HTML и CSS кода для создания навигации по статье
Переходим к теме материала, а именно будем создавать содержание в статье нашего сайта.
Долго думал как интереснее написать этот раздел и не придумал ничего лучше, как просто показать то, что делаю я.
Перед написанием любой статьи, сразу составляю содержание. В моем случае, содержания бывают как одноуровневые, так и многоуровневые. Здесь нужно смотреть на такие пункты как:
- информаю которую хочешь рассказать;
- последовательность раскрываемого материала.
К примеру для этой статьи, мое содержание (оглавление) выглядит так:
Далее, создаю копию этих же пунктов и переделываю их в заголовки <H2> и <H3>.
После этого, мне остается разметить код на якоря и якорные ссылки:
Кстати, я не добавляю теги вручную, это было бы очень долго. Ускорить работу поможет добавление нужных кнопок в текстовый редактор WordPress. Детально, процесс описывался здесь.
Вот, в принципе, и все. Содержание в статье создано, якоря расставлены, ссылки присутствуют. Осталось наполнить материал контентом и опубликовать для читателей.
Оглавление с плавной прокруткой страницы
Считаю что тема: «Как сделать содержание в статье на сайте или блоге» раскрыта в полной мере. И все же, не хотелось бы на этом останавливаться, а дать читателю нечто большее.
Как уже говорилось выше, навигация по статье сайта, это не просто красиво, но еще и эффективно. При помощи небольших манипуляций, вебмастер может постараться увеличить время пребывания посетителя на своем сайте.
Увеличение времени посещения сайта посетителем, благоприятно сказывается на поведенческих факторах. Что в будущем, приводит к лояльности со стороны поисковых систем.
Прокрутку от якорной ссылки к якорю, можно сделать не молниеносной, а плавной. На этом вебмастер выиграет доли секунд, но этого может хватить для поисковиков. Да и сам посетитель будет приятно удивлен анимацией на сайте.
Добавьте javascript в код сайта, либо вызовите его при помощи <link> из другого файла.
После этого, навигация по статье сайта будет плавной. Пример реализации, можно посмотреть здесь: https://jsfiddle.net/Kilnart/37wyce01/1/.
На этом все. Из этого материала вы должны были понять как сделать содержание в статье сайта или блога и улучшить навигацию. Внедряйте знания в свои проекты и удачи вам. Остались вопросы, пишите в комментариях.
Создание оглавления статей на сайте с помощью JavaScript
Процесс написания скрипта для формирования оглавления из тегов <h2> представим в виде следующих шагов:
1. Создадим HTML обёртку для оглавления и присвоим её переменной tpl :
Плейсхолдер {{contents}} впоследствии заменим на HTML код оглавления.
2. Объявим переменную contents с помощью ключевого слова let и присвоим ей в качестве значения пустую строку:
В эту переменную мы будем собирать HTML код оглавления.
3. Создадим переменную elHeaders и поместим в неё все найденные теги <h2> в элементе с классом article :
Для выбора элементов используется метод querySelectorAll() .
4. Сформируем HTML код оглавления на основе <h2> :
В этом коде для перебора выбранных <h2> используется метод forEach() . Внутри forEach() мы сначала устанавливаем заголовку <h2> значение атрибута id , если у него его конечно нет. После этого формируем URL и сохраняем его в переменную url . Затем добавляем к значению переменной contents элемент оглавления.
5. Вставим HTML содержимое оглавления внутрь <aside> перед первым элементом с помощью метода insertAdjacentHTML :
Конечный HTML получим взяв значение переменной tpl , в которой {{contents}} заменим на содержимое переменной contents .
В итоге мы получим следующий код на чистом JavaScript для автоматической генерации содержания статей:
Подсветка пунктов оглавления по мере прокрутки страницы
В предыдущий скрипт дополнительно добавим ещё функционал для выделения активного элемента содержания, т.е. пункта, показывающего пользователю, где он сейчас находится на странице.
Отметку активного пункта в оглавлении будем выполнять посредством добавления класса active .
Код на чистом JavaScript:
В этом коде определение активного пункта по мере прокрутки страницы основано на обработке события scroll .
В обработчике мы сначала получаем число пикселей, на которые пользователь прокрутил текущий документ и сохраняем это значение в переменную scrollTop . На следующей строке получаем все заголовки <h2> , расположенные в элементе с классом article .
После этого объявляется переменная headerId и присваивается ей пустая строка. В эту переменную будет сохраняться значение атрибута id тега <h2> , который в данный момент изучает пользователь:
Далее с помощью цикла for перебираются заголовки и высчитывается среди них тот в котором сейчас находится пользователь. Значение id найденного <h2> сохраняется в переменную headerId :
Затем у элементов с классом active удаляется этот класс:
Завершаем код установкой класса active элементу <li> . Для этого выбирается <a> с атрибутом href значение которого заканчивается на #${headerId} . После этого получаем родительский элемент и устанавливаем ему класс active :
Скрипт для создания многоуровневого оглавления
Изменим скрипт, приведённый выше, для генерирования многоуровневого меню на основе тегов <h2> , <h3> и <h4> :
Многоуровневое меню с выделением активных пунктов
Для выделения оглавления при нахождении пользователя в соответствующем разделе необходимо в скрипт добавить ещё следующий код:
Как сделать оглавление к статье на сайте в html
Когда мы выбираем книгу в книжном магазине, смотрим в каком переплете книга, удобно ли будет ее читать, какой типографический шрифт и обязательно просматриваем в начале описание, о чем пишется в книге, суть произведения, в каком жанре написан. И конечно смотрим на оглавление, сколько глав в издании, сколько страниц. Это дает нам понять нужна нам эта книга, будем ли мы её читать или после покупки будет пылиться на полочке в библиотеке.
 |
| Рис.Как сделать краткое содержание статьи на сайте |
Так же и в интернете, по моему мнению, к каждой длинной статье с множеством ключевых запросов должно быть оглавление. Посетитель зайдя по запросу в считанные минуты глазами обязан найти то за чем он пришел.
Как известно скрипты, виджеты, гаджеты и плагины очень грузят сайт, и html страницы открываются медленно. Всего должно быть по минимуму, особенно в самом начале ведения сайта и если ваш сайт на https
. Любой сторонний виджет или скрипт может нарушать безопасное соединение.
Как сделать краткое содержание статьи на сайте
На сайте или блоге желательно все делать вручную. Сегодня мы научимся делать оглавление (содержание, меню) для каждой публикации собственными силами без применения дополнительных нагрузок, только с помощью html.
Пример подсмотрела у любимого мною блоггера Дмитрия, за что ему огромное спасибо за доступные и хорошие уроки. Его сайт у меня в панели закладок вверху браузера:)
К примеру на сайте статья про бегущую строку в html, я знаю как вставить бегущую строку на сайт и какой тег создает бегущую строку, но совсем не ведаю как вставить картинку в бегущую строку. Когда я захожу на такую длинную запись, нет надобности читать весь текст, я зашла по конкретному вопросу. В содержании я нажимаю на тот пункт который меня интересует и получаю быстрый ответ на свой запрос. Безусловно это уменьшает время посещения посетителя на сайте, но поисковики, особенно Яндекс любит, когда запись имеет оглавление к статье с красивыми и понятными ЧПУ.
Или же мне задали вопрос по конкретному запросу и я могу смело найти статью и кинуть ссылку на нужный раздел в статье.
Как делаю я cсылки внутри страницы. Для примера использую статью «Как закрепить запись вверху ленты».
Собрала ключевые слова в Яндекс вордстат или в условно платном сервисе Мутаген. Вставила все ключи и хвосты в запись, обязательно в html редакторе как список. Перед публикацией подготавливаю и редактирую статьи в программе Notepad++ или WordPad.
Беру список ключей
И чуточку ниже вставляю те же ключи, но обрамляю их в заголовки, открывающими и закрывающими тегами h2 — h6. Возможно у вас заголовки и подзаголовки в статье прописываются одним тегом.
Заголовки и подзаголовки.
Человеческий мозг мощнее любого компьютера, вот воистину божественное создание, но и он дает иногда сбои и что бы его не перегружать я всегда держу на компьютере в отдельном файлике такую вот конструкцию:
Первый код это якорь, то-есть ссылка с якорем, которая содержит символ # (решетка) или еще его называют хештег с английского hashtag. После хеш-тэга прописывается идентификатор (атрибут id).
При щелчке по такой ссылке браузер прокрутит окно страницы к нужному месту где находится элемент с атрибутом id, перезагрузка страницы и текста не произойдет.
Второй код это закладка с уникальным именем идентификатором, куда после нажатия на раздел в статье вас перебросит.
Вот так должно выглядеть в записи:
Список ссылок вставляем в начало записи после первого абзаца или после первого заголовка. Там уж сами решите какой список у вас будет маркированный или нумерованный. Можно вставить список в красивую рамочку или в таблицу.
Как сделать содержание статьи в WordPress
Еще очень интересный и быстрый способ создать оглавление статьи на сайте без плагина.
В записи открываем вкладку Визуально, вставляем все ключевые слова списком в то место где будет оглавление, в статье эти же ключи выделяем заголовками и подзаголовками.
Далее редактируем список, выделяем первый пункт списка и на панели инструментов нажимаем на скрепку (икона вставки ссылок). В открывшемся окошке жмем на шестеренку и настраиваем ссылку. В следующем окне Введите адрес назначения (URL) в графу URL вставляем якорь ссылки-хештег и идентификатор.
Или запись может быть такая:
Не обязательно после решетки должен быть ключ на латинице, в уроке описываю как это делаю я. Ключи могут быть короткими или вообще после хеш-тэга можно прописывать META-тег Keywords.
К примеру основной адрес этой статьи
А если мы добавим после хэш-тега мета тег keywords, что в переводе значат ключевые слова, то ЧПУ будет выглядеть так:
Или например еще так:
На мой взгляд — для поисковых роботов это намного привлекательнее и понятнее чем просто циферки в конце.
Далее переходим в html редактор на вкладку текст, находим в статье подзаголовки и перед каждым вставляем такой код.
Вот так легко делается краткое содержание публикации внутри статьи в html. Будут вопросы задавайте их в комментариях!
levashove
Иногда в посте с большим объёмом текста удобно сделать оглавление с ссылками для быстрого перехода к нужному разделу. Это довольно не сложно реализуется, что я и продемонстрировал в этом посте, да и инструкции с примерами очень и очень быстро находятся в любом поисковике. Но так уж устроен человек, что ему легче спросить. Вот и я получил в личку несколько вопросов о том, какой код нужно использовать для таких переходов. Отправлять в гугл не стал, объяснил, а сегодня решил написать небольшой пост.
В HTML такая функция называется "якорь". Это закладка с уникальным именем на определенном месте веб-страницы.
Так мы пишем код оглавления.
А потом по тексту делаем ссылки на разделы:
Я не особо заморачивался и просто присвоил номера разделам. Вы же можете придумать уникальные имена на латинице. Главное в коде оглавление не забывать писать знак # перед именем.
Можно пойти дальше и по тому же принципу сделать возвращение к оглавлению или просто кнопочку «ВВЕРХ».
У якорей есть ещё несколько очень интересных возможностей, но для создания оглавления вам хватит и этих тегов.