Добавить в корзинуПозвонить
Найти в Дзене

Сайт на HTML или самописная CMS: как добавить блок Содержание статей - за 3 минуты

Когда человек только начинает свой бизнес — он экономит на всём. Это нормально. Аренда, товар, реклама — деньги уходят быстрее чем появляются. И в этом списке расходов сайт кажется чем-то второстепенным. Ну есть и есть. Главное чтобы работал. И вот находится знакомый знакомого — или фрилансер с биржи — который говорит: сделаю недорого. Берёт заказ, пропадает на пару недель, потом показывает результат. Вроде выглядит нормально. Страницы открываются, телефон указан, форма заявки работает. Деньги заплачены, все довольны. Только вот один момент остался за кадром. Сайт сделан не на стандартной системе управления — а на чистом HTML или на какой-то самописной системе которую разработчик написал сам. Может объяснил это тем что так быстрее, или дешевле, или надёжнее. А может и вовсе не объяснял — просто сделал как умеет. Заказчик особо не вникал. Сайт работает — и ладно. Проходит время. Бизнес потихоньку растёт. Появляется понимание что на сайте надо что-то поменять. Может добавить новую страни
Оглавление

Когда человек только начинает свой бизнес — он экономит на всём. Это нормально. Аренда, товар, реклама — деньги уходят быстрее чем появляются. И в этом списке расходов сайт кажется чем-то второстепенным. Ну есть и есть. Главное чтобы работал.

И вот находится знакомый знакомого — или фрилансер с биржи — который говорит: сделаю недорого. Берёт заказ, пропадает на пару недель, потом показывает результат. Вроде выглядит нормально. Страницы открываются, телефон указан, форма заявки работает. Деньги заплачены, все довольны.

Только вот один момент остался за кадром. Сайт сделан не на стандартной системе управления — а на чистом HTML или на какой-то самописной системе которую разработчик написал сам. Может объяснил это тем что так быстрее, или дешевле, или надёжнее. А может и вовсе не объяснял — просто сделал как умеет.

Заказчик особо не вникал. Сайт работает — и ладно.

А потом что-то идёт не так

Проходит время. Бизнес потихоньку растёт. Появляется понимание что на сайте надо что-то поменять. Может добавить новую страницу. Может обновить прайс. Может добавить содержание к длинной статье в блоге — потому что статья выросла до серьёзного объёма и читатель теряется в ней как в лесу.

Казалось бы — мелкая задача. Но тут выясняется несколько неприятных вещей.

Разработчик который делал сайт — недоступен. Телефон не отвечает, в мессенджере тишина. Бывает. Люди меняют номера, уходят из фриланса, просто пропадают.

Обратиться к другому фрилансеру? Страшно. Непонятно кому доверять. Непонятно сколько это стоит. И главное — не каждый разработчик вообще возьмётся разбираться в чужом коде. Особенно если этот код написан наспех, без документации, на самописной системе которую понимал только автор. Проще снести всё и сделать заново. А это уже совсем другие деньги.

И вот предприниматель оказывается в ловушке.

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

А ещё бывает что код просто слетает. Обновился браузер, поменялось что-то на хостинге, кто-то случайно залез не туда — и часть сайта перестаёт работать как надо.

И снова та же история — непонятно к кому идти и сколько это будет стоить.

Конкретный случай с которым я столкнулся

Именно с такой ситуацией я недавно работал. Сайт на нестандартной системе управления. Есть блог со статьями. Содержание статей в шаблоне не предусмотрено — так вышло при разработке, никто об этом не подумал заранее.

Пока статьи были короткими — это никого не беспокоило. Но одна статья выросла до серьёзного объёма — подробный экспертный материал, много разделов, много информации.

Читатель заходит и видит сплошной текст без ориентиров. Чтобы найти нужный раздел — надо листать всё подряд. Кто-то листает. Большинство просто уходит.

Задача простая — добавить содержание с возможностью перехода к нужному разделу. Кликнул на пункт — и сразу оказался там где нужно. Без прокрутки, без поиска глазами.

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

Почему содержание в статье это не мелочь

Прежде чем рассказывать как я решил эту задачу — хочу объяснить почему это вообще важно.
Прежде чем рассказывать как я решил эту задачу — хочу объяснить почему это вообще важно.

Многие воспринимают Содержание как необязательную декорацию. На самом деле оно работает сразу в двух направлениях.

Первое — удобство для читателя

Человек приходит на страницу с конкретным вопросом. Видит содержание — сразу понимает есть ли здесь ответ и где именно его искать.

Переходит в нужный раздел. Не тратит время на листание. Не уходит раздражённый.

Время которое человек проводит на странице — один из сигналов для поисковиков. Чем дольше остаётся — тем лучше для продвижения сайта.

Второе — поисковая оптимизация

Google и Яндекс любят структурированный контент. Содержание помогает поисковику лучше понять о чём страница и как она устроена. Кроме того в поисковой выдаче могут появиться быстрые ссылки прямо на отдельные разделы статьи. Это увеличивает кликабельность без каких-либо дополнительных затрат на рекламу.

И есть ещё один момент который часто упускают.

Хорошее содержание сразу показывает глубину и серьёзность материала. Человек ещё не прочитал ни строчки — но уже видит насколько статья проработана. Это доверие. А доверие в интернете сегодня стоит дорого.

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

Блок Содержание - это не просто список заголовков скопированных из текста. И думать так - это распространённая ошибка.

Правильное содержание это:

  • Понятные названия пунктов. Не технические заголовки из статьи а человеческие формулировки. Читатель должен сразу понять что найдёт в этом разделе.
  • Возможность перехода к каждому пункту. Кликнул — и моментально оказался там где нужно. Без прокрутки.
  • Расположение в самом начале страницы — до основного текста. Читатель видит его первым.
  • Разумный объём. 5-10 пунктов максимум. Больше — и содержание само превращается в ту же простыню от которой мы уходим.
  • Отражение реальной структуры материала. Основные разделы и подразделы. Человек должен сразу понять насколько глубокий материал перед ним.

Как это делается вручную — и почему это муторно

Если делать без инструментов — процесс выглядит так:

  1. Каждому заголовку в статье прописывается уникальный идентификатор прямо в коде страницы. Это технический маркер который говорит браузеру куда именно переходить по ссылке.
  2. В начале статьи создаётся список пунктов. Каждый пункт становится кликабельной ссылкой которая ведёт на соответствующий раздел через этот идентификатор.
Процедура повторяется для каждого раздела.

Звучит несложно.

Но когда разделов десять-пятнадцать — это уже реально утомительно. Нужно быть аккуратным чтобы не ошибиться в коде. Ошибка в одном символе — и ссылка не работает. Надо проверять каждый пункт вручную.

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

Как я решил это за 3 минуты

Устанавливать плагин ради одной статьи — сразу отмёл этот вариант. На нестандартной системе управления плагинов может вообще не быть. А если и есть — они могут в любой момент что-то сломать. Риск не оправдан.

Скинул структуру статьи в ИИ, поставил задачу — получил готовый код содержания с переходами к каждому разделу. Заменил статью на сайте. Проверил каждый пункт. Всё работает.

3 минуты вместо получаса ручной работы. Вот и весь секрет. Никакой магии — просто правильный инструмент для правильной задачи.

А содержание можно ещё и прокачать

Базовый список пунктов с переходами — это только начало. Содержание можно превратить в реально сильный инструмент удержания читателя на странице.

Фиксированное содержание следует за читателем при прокрутке страницы. Не нужно возвращаться наверх чтобы перейти в другой раздел. Особенно удобно на длинных материалах.

Активный пункт при прокрутке показывает читателю где именно в статье он находится прямо сейчас. Как навигатор — всегда понимаешь своё положение в тексте.

Сворачиваемое содержание скрыто по умолчанию и раскрывается по клику. Не занимает место на странице и не пугает объёмом с первых секунд. Особенно хорошо работает на мобильных устройствах где экран ограничен.

Содержание с иконками и визуальными акцентами превращает скучный список в профессионально оформленный элемент страницы. Сразу другой уровень восприятия — сайт выглядит дороже и серьёзнее.

Содержание с кратким описанием раздела добавляет под каждым пунктом небольшую подсказку о чём этот раздел. Читатель ещё не перешёл — а уже понимает найдёт ли там ответ на свой вопрос.

Всплывающее превью при наведении — навёл курсор на пункт и появилось краткое превью раздела. Редко встречается на обычных сайтах но выглядит очень солидно. Такое можно увидеть на крупных документационных ресурсах.

Всё это реализуется через код. С помощью ИИ — за считанные минуты. И каждая такая доработка делает страницу удобнее для читателя и сильнее в глазах поисковиков.

Кому это особенно актуально

Таких сайтов — на HTML и самописных системах — существует немало. И владельцы этих сайтов часто оказываются в ситуации когда любая нестандартная задача превращается в проблему. Разработчика нет, плагинов нет, фрилансеру доверять страшно, а переделывать всё заново дорого.

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

Сталкивались с такой ситуацией?

Есть сайт на котором что-то давно нужно поправить но непонятно к кому обратиться? Напишите в комментариях — разберём вместе.

Понравилась статья?

Подписывайтесь на канал — здесь только практика, реальные кейсы и честные результаты без воды.