Создание сайтов и текст: структура, штампы, оформление и редактор

Создание сайтов и текст идут вместе, но в выдаче их разделили: двадцать девять страниц из тридцати рассказывают, как собрать сайт, и только одна — как написать для него текст. А на практике именно текст тормозит запуск чаще всего: дизайн готов, вёрстка готова, а на месте описания услуг — «рыба». Ниже — как написать текст для сайта по структуре, что убрать из него в первую очередь (с проверкой прямо в статье), пример текста до и после, как текст выглядит на странице — выравнивание, ширина строки, текстовые поля, — и где набирать код и текст, включая Sublime Text.

Тридцать страниц поиска: про текст — одна

Я разобрал тридцать страниц, которые поиск показывает по запросу «создание сайтов текст».

Тринадцать страниц — общие инструкции «как сделать сайт», девять — уроки HTML, где «текст» — это теги абзацев и заголовков. Пять — ИИ-конструкторы, которые обещают «грамотный текст» автоматически. Две — конструктор и эссе. И одна статья на Хабре — о том, как генерировать тексты для сайта нейросетью.

Запросы при этом разные: «текст для создания сайта», «готовый текст», «пример текста», «sublime text», «выравнивание текста», «текстовое поле», «текст предложения по созданию сайта». За ними три задачи — написать содержание, оформить его на странице и выбрать редактор, где всё это набирать. Разберём по порядку.

Почему текст — самое долгое в создании сайта

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

• Факты есть только у вас. Цены, сроки, состав услуг, примеры работ, гарантии — копирайтер или нейросеть их не придумают.
• Текст пишут в последнюю очередь. Сначала дизайн, потом «вставим текст» — и макет приходится переделывать под реальную длину абзацев.
• «Рыба» выглядит прилично. Пока на странице «Lorem ipsum» или «Здесь будет описание услуги», кажется, что сайт почти готов.

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

Создание структуры сайта: текст начинается с плана

Текст для создания сайта в интернете отличается от текста буклета: его не читают подряд, а сканируют глазами в поисках ответа. Поэтому сначала — структура страницы, потом слова.

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

Проверьте свой текст: что убрать в первую очередь

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

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

Создание сайтов: пример текста до и после

Цифры в примере «после» условные — подставьте свои. Важна схема: кто вы, где работаете, сколько сделали, сколько стоит, сколько длится, какие гарантии. Готовый текст для создания сайта, скачанный из интернета, этого не даст: он про чужую компанию. Плюс поисковики видят такие тексты как копии и не ранжируют их.

Сколько текста нужно странице

Создание текста для веб-сайта начинается с вопроса объёма, и единого ответа нет. Страница услуги, которая продвигается в поиске, обычно содержит от двух до пяти тысяч знаков: меньше — не хватает места ответить на вопросы, больше — читатель теряется. Лендинг под рекламу может обойтись тысячей-двумя знаков, если в нём есть цена, состав и форма. Статья в блоге — от пяти тысяч и выше, если тема того требует. Ориентир простой: текст заканчивается, когда на все вопросы клиента есть ответ, а не когда набрано нужное число знаков.

Текст для сайта и нейросеть

Единственная статья о текстах в выдаче — о том, как генерировать их нейросетью «и никто не заметит». Нейросеть действительно помогает: быстро набросать структуру, переформулировать, сократить, проверить ошибки. Но она не знает ваших цен, сроков и случаев из практики. Текст, сгенерированный без фактов, получается тем самым «текстом про индивидуальный подход». Рабочая схема: факты пишете вы, нейросеть помогает с формой, а вы проверяете каждую цифру.

Текст и поиск: ключевые слова без переспама

Текст для сайта должен находиться в поиске, но это не значит, что в нём нужно десять раз повторить «ремонт ванной Москва недорого». Поисковики давно понимают синонимы и смысл, а за неестественные повторы понижают страницу. Рабочий подход другой: главный запрос — в заголовке страницы и в первом абзаце, близкие формулировки — в подзаголовках, а остальной текст отвечает на вопросы, которые задают люди с этим запросом. Если в тексте есть цены, сроки, состав работ и ответы на частые вопросы, нужные слова появятся в нём естественно.

• Один главный запрос на страницу — не пытайтесь одной страницей закрыть все услуги.
• Заголовок H1 и тег title — с главным запросом, но написаны для человека.
• Подзаголовки — как вопросы или ответы: «Сколько стоит», «Что входит», «Сроки».
• Перечитайте вслух: если фраза звучит как робот, её стоит переписать.

Как текст выглядит на странице

Второй смысл запроса «текст при создании сайта» — оформление. Даже хороший текст плохо читается, если строки слишком длинные, межстрочный интервал тесный, а выравнивание по ширине растягивает пробелы.

Создание сайтов: выравнивание текста по ширине выглядит аккуратно в печати, но на экране, особенно узком, браузер растягивает пробелы между словами, и в тексте появляются «реки». Для основного текста на сайте используйте выравнивание по левому краю, по центру — только для коротких заголовков и подписей. Попробуйте сами.

CSS-код под примером можно скопировать в стили своего сайта: max-width в единицах ch задаёт ширину строки в символах, и это проще, чем подбирать пиксели под каждый шрифт.

Текстовое поле на сайте

Ещё один «текст» в запросах — создание сайтов с текстовым полем: поля, в которые посетитель сам вводит текст. Для одной строки — имени, телефона, почты — используют <input> с правильным типом: type="tel" откроет на телефоне цифровую клавиатуру, type="email" — клавиатуру с «@». Для сообщения в несколько строк — <textarea>. Обязательно подпись над полем, а не только серый текст внутри: подсказка-плейсхолдер исчезает, как только человек начал печатать, и он забывает, что вводил.

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

Создание текстового сайта: когда картинки не нужны

Есть и буквальный смысл запроса — создание текстового сайта, где почти нет графики: справочник, личный блог, документация, сайт-резюме. Одна из страниц выдачи — эссе на Хабре о «простом веб-сайте» как раз об этом. У таких сайтов есть плюсы, которые стоит знать и бизнесу: они открываются мгновенно даже при слабой связи, их легко читать с любого устройства, и поисковики хорошо их понимают. Для текстового сайта особенно важна типографика — именно ей посвящён инструмент выше.

Где набирать: Sublime Text и другие редакторы

Строки для создания сайта — HTML, CSS, тексты страниц — набирают в редакторе кода. Создание сайта в Sublime Text — классический вариант: лёгкий и быстрый редактор с подсветкой синтаксиса, множественными курсорами и быстрым поиском по всем файлам проекта. Его можно скачать бесплатно для пробы; за постоянное использование разработчик просит купить лицензию. Создание сайта на Sublime Text не отличается от любого другого редактора: создаёте папку проекта, файл index.html, пишете код и открываете файл в браузере.

• Sublime Text — быстрый и лёгкий, хорош для небольших проектов и правок.
• VS Code — бесплатный, с огромным числом расширений: подсказки, проверка ошибок, предпросмотр.
• Блокнот — чтобы понять принцип; для работы неудобен: нет подсветки и подсказок.

Sublime Text для создания сайтов удобен и для работы с текстами: в нём легко найти и заменить фразу во всех файлах сразу — например, обновить телефон или цену на всех страницах статичного сайта.

Как ищут тексты для сайта: короткие ответы

• «Текст для создание сайта», «текст к создания сайтов». Ищут, что писать на страницах. Начните со структуры из шести блоков и проверьте черновик на штампы.
• «Набор текста создание сайта». Набирать тексты удобнее в обычном редакторе документов, а в код вставлять готовое — так проще проверять орфографию.
• «Sublime text создание сайтов». Редактор кода для HTML и CSS — раздел выше.
• «Создание сайтов текстовое поле». Поля ввода input и textarea — раздел о текстовых полях.

Текст задания и текст предложения

Два последних «текста» из запросов — деловые. Текст задания на создание сайта — это ТЗ: что должен делать сайт, какие страницы, какие функции, кто готовит тексты. Главное в нём — целевое действие посетителя и список материалов, которые даёт заказчик. Текст предложения по созданию сайта пишет исполнитель: в нём должны быть понимание задачи заказчика, состав работ, срок, цена и пример похожей работы, а не перечень технологий и «индивидуальный подход».

И в ТЗ, и в предложении отдельной строкой стоит указать, кто пишет тексты для страниц и к какому сроку. Это та строка, из-за которой сайты чаще всего не запускаются вовремя, — поэтому её стоит согласовать первой.

Перед публикацией: проверка за десять минут

1. Факты. Цены, сроки, телефоны, адреса — совпадают с реальными и одинаковы на всех страницах.
2. Штампы. Прогоните текст через проверку выше и замените подсвеченное на конкретику.
3. Телефон. Откройте страницу на мобильном: абзацы не длиннее 4–5 строк, списки читаются.
4. Орфография. Ошибка в заголовке бьёт по доверию сильнее, чем кажется.
5. Призыв. В конце страницы понятно, что сделать дальше, и это действие работает.

У меня есть простое правило: я не начинаю дизайн, пока не увижу текст хотя бы главной страницы. Сначала заказчики удивляются, потом благодарят. Когда текст готов, сразу понятно, сколько блоков на странице, где нужны фото, а где таблица цен. Когда текста нет, дизайн рисуется «под рыбу» — и потом его переделывают, потому что реальный абзац в три раза длиннее.
— Александр Рожков

Итог

Текст — самая долгая часть создания сайта, поэтому начинать стоит с него, а не с дизайна. Пишите по структуре: заголовок с сутью, цена и срок, что входит, примеры, вопросы, призыв. Убирайте штампы и заменяйте их фактами — проверка в статье подсветит их автоматически. На странице текст выравнивайте по левому краю, строку держите в 45–75 знаков, интервал — около 1,5. Набирать код и тексты удобно в Sublime Text или VS Code. А в ТЗ и предложении всегда пишите, кто готовит тексты и к какому сроку.

Если нужен сайт с текстами, которые читают, — условия на странице создания сайтов.

Александр Рожков

Вебмастер · SEO-специалист · 15+ лет · 200+ проектов

Частный вебмастер в Москве. 200+ сайтов под ключ, 15+ лет опыта. Создаю сайты, настраиваю SEO и рекламу лично — без субподрядчиков.

О себе