Как правильно оформить текст статьи: гайд по верстке и разметке

Содержание

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

Внимание! Статья пригодится для новичков в копирайтинге: Америку мы здесь не откроем, но как сделать из «простыни» читабельный текст — подскажем.

Зачем нужно структурировать текст?

Мы упомянули выше «простыню» — так редакторы называют «сырой» текст, оформленный неправильно. В чем проблема таких статей и постов? Они могут быть отлично написанными, содержательными и полезными, но… их просто не смогут прочитать ни заказчик, ни посетители его сайта. Кроме того, их плохо оценят поисковые алгоритмы.

Проблема читаемости

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

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

Кстати, мы в основном говорим о традиционных информационных и SEO-статьях, но и посты в социальных сетях тоже подчиняются правилам верстки. Просто сравните:

«Всем привет! Весна уже совсем близко, и модницам пора пополнить свой гардероб. Только с 27 по 28 февраля в нашем магазине грандиозная распродажа: два товара по цене одного! Акция распространяется на три вида товаров. Туфли – от двух пар за 1999 рублей. Сумки – 2 штуки по 799 рублей. Солнечные очки – 500 рублей за 2 пары. Дополнительный бонус – семьям с детьми. Только у нас при покупке детской обуви – скидка 50%».

«Всем привет!

Весна уже совсем близко, и модницам пора пополнить свой гардероб.

Только с 27 по 28 февраля в нашем магазине грандиозная распродажа: два товара по цене одного!

Акция распространяется на три вида товаров:

Туфли — от двух пар за 1999 рублей.

Сумки — 2 штуки по 799 рублей.

Солнечные очки — 500 рублей за 2 пары.

Дополнительный бонус — семьям с детьми. Только у нас при покупке детской обуви — скидка 50%».

Если в первом варианте все предложения сливаются в одно полотно, во втором сразу можно зацепиться глазом за интересную для вас акцию. Покупателю нужны, к примеру, туфли. В предложении №1 он может не заметить, что на них тоже есть скидка. В варианте №2 читатель сразу обращает внимание на виды акционных товаров (благодаря списку), а также то, что акции две (отделены абзацем).

Дата проведения и цены выделены жирным шрифтом — это один из способов отметки важной информации. В соцсетях для этого используют еще и эмодзи — тоже своеобразный элемент верстки (цель: привлечь внимание к основным тезисам материала).

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

демонстрация содержимого контента;
привлечение внимания потенциального читателя;
упрощение поиска информации внутри текста благодаря разбивке на списки, смысловые разделы и подразделы.

Лояльность поисковиков

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

Так как поисковики не могут в полном смысле этого слова оценивать текст, они опираются на его структурированность и оформление:

«Машинный язык» html-разметки. В том числе наличие и количество заголовков и подзаголовков. По подпунктам статьи поисковые системы будут составлять мнение (часть мнения), насколько текст будет полезен для читателя и как точно ли он раскрывает тему материала.
Релевантность страниц сайта: правильное оформление и внедрение ключевых запросов в содержание тегов помогает статье немного продвинуться в ТОПе выдачи Яндекс и Гугл
Наличие абзацев и их объем.
Наличие прочих элементов верстки: нумерованных и маркированных списков, а также правильно расставленных тире и кавычек («лапки» и дефисы/среднее тире воспринимаются сервисами проверки как ошибка. А статьи с ошибками сильно теряют рейтинг в процессе ранжирования.

Многие копирайтеры считают, что «подчищением» и оформлением всех этих нюансов должны заниматься корректор, редактор или контент-менеджер. Но представьте ценность сотрудника, за которым не надо ничего доделывать — он сразу выдает готовую к публикации статью. Конечно, такие фрилансеры будут в приоритете для клиента, да и платить им будут больше (если договоритесь).

Стандартные правила оформления статей

На самом деле универсального рецепта не существует. Обычно у заказчиков есть внутренняя редакционная политика, в которой оговорены нюансы по количеству и размеру абзацев, наличию списков, размеру шрифта и т.д. В SEO-статьях эти требования вынесены в ТЗ, в том числе и количество и размеры подзаголовков.

Но есть общие правила, которые традиционно изучают на курсах верстки. В целом, они мало отличаются от университетских правил оформления курсовых и дипломных работ.

Предпочтение отдают классическим вариантам шрифта (Times New Roman, Arial, Tahoma). Смелые каллиграфические начертания считаются излишними даже в постах для соцсетей. Правило всегда одно: чем проще, тем лучше.
Размер шрифта варьируется от 11 до 14 pt (мы, например, используем Arial 12: очень удобно).
Не злоупотребляйте жирным шрифтом или курсивом — обычно уместность их использования озвучивает заказчик.
Традиционно текст выравнивают по левому краю или ширине. Межстрочный интервал при этом обычно используется в размере от 1,15 до 1,5. Второй вариант более «студенческий»: из опыта — проще читать и редактировать тексты с интервалом 1,15.
Максимально используйте списки и разбивайте текст на абзацы! Об этом мы поговорим подробнее чуть ниже.

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

Списки и абзацы

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

Главное правило: один абзац — одна законченная мысль.

Оптимальный размер — 250–500 символов (около 4 предложений средней величины). Такой объем позволяет сосредоточиться на содержании и не перегружает зрение.
Чтобы упростить читателю поиск нужного отрывка и превратить текст из «простыни» в оптимальный для прочтения материал, ставится отступ (пробел) после каждого абзаца и подзаголовка. В Гугл-документах это оформляется автоматически: раздел «межстрочный интервал» — поставить галочку на пункте «Добавить пробел после абзаца».
Не используйте студенческую «красную строку» (отступ перед новым абзацем) в статьях.

И это, пожалуй, все по абзацам. Переходим к спискам.

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

В видах списков и правиле оформления каждого из них легко запутаться. Нам очень помогает в этом случае пост коллеги — копирайтера и редактора:

«Всем привет, с вами злой редактор и добрые правила оформления перечней. Кратенько и доходчиво:

Если у вас где-то стоит точка (перед списком, после цифры в начале нумерованного, в конце пункта), дальше всегда идёт Прописная буква, едрить её.

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

Теперь по пунктуации, пупсики.

Простой список + запятые:

– жопа,

– жопа с ручкой,

– хрен с ложкой.

Список с более развернутыми пунктами + точка с запятой:

– большая красивая жопа в каменьях Сваровски с надписью «Юбилейная»;

– мини-жопка карманного формата с матовым покрытием.

Список с матьего огромными как русское поле пунктами + точка:

* Жопа высшего сорта «Символ бытия». Оформлена в стиле барокко с намеками на ранний романтизм. Ручная работа. Кирпичная кладка по канту.

* Жопа средней заунывности «Дедлайн текущий». Инкрустирована камнями в огород. Оборудована циферблатом и таймером обратного отсчета».

Небольшое уточнение: если (избави бог) вы в нумерованных списках ставите скобку после цифры, то пункты следует писать с маленькой буквы.

Тире и кавычки

В мире существуют два варианта написания кавычек: немецкие «лапки» (“ ”) и французские «елочки» (« »). Если первые употребимы только в рукописях, то вторые — как раз правильный вариант для статей на сайты и постов. Основная проблема в том, что «елочки» в Гугл-документах просто так не найдешь.

Важно! Не забывайте, что между кавычками и скобками пробел не ставится.

Путаница с дефисами и тире — тема отдельной беседы.

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

Лайфхак: На смартфонах все эти символы (как кавычки, так и тире) — в свободном доступе. Можно просто написать текст, а потом быстро поменять все через раскладку телефонной клавиатуры. Просто скачайте приложение «Гугл-документы» на смартфон.

Еще раз: те, кто считают, что типографика — дело редактора/корректора — правы. Но многие заказчики не могут похвастаться полностью укомплектованным штатом, а значит, заинтересованы в работнике, который выдает полностью готовый к публикации материал. Это не ваша обязанность, но ваше большое преимущество (особенно если вы не Даниил Шардаков или другие гуру копирайтинга).

Разметка Н1, Н2, Н3… (или теги)

Мы вынесли эту тему в отдельный раздел, так как новичков буквально вводит в ступор ТЗ с требованием о «наличии разметки H1–H6». Что же это за символы и что с ними делать?

Что такое разметка текста и для чего она

При формировании сайта используется HTML-разметка. Именно она формирует костяк будущей страницы. Внутри разметки используются теги — слова, заключенные в угловые скобки (< >), открывающие и закрывающие блок статьи. Они составляют код HTML и нужны для разделения текста на блоки, выделения списков, отметки нужных элементов и прочих видов форматирования. Без использования тегов документ выглядит «сырым», нечитабельным, и будет проигнорирован поисковыми системами.

Разметкой H1–H-6 выделяют содержимое заголовков, в соответствии с их иерархией и уровнем вложенного содержимого. Разметка заголовков выглядит следующим образом:

<H1> — заголовок первого уровня, название всего текста.
<H2> — заголовок второго уровня, или подзаголовок. Является вложением и выделяет смысловой раздел текста. В статье может быть использовано неограниченное количество H2, но не менее двух, в зависимости от размера.
<H3> — заголовок третьего уровня, подзаголовок более низкой иерархии – вложение к подзаголовку H2, содержащий смысловой блок, раскрывающий содержание H2, но требующий отдельного выделения.
H4-H6 — уровни с четвертого по шестой, исходя из логики уменьшающейся иерархии. Они используются редко, в основном для внедрения дополнительной или не самой важной информации в текст.

Это все прекрасно, но где их добывать? Спокойно! Знать код не нужно — все заголовки есть в гугл-документах. Ищете вкладку «Стили» и выбираете нужный вариант, начиная с «Заголовок 1» (=H1), и далее по цифрам.

Правила оформления

Для SEO-оптимизации разметка под кодом «H» очень важна. Фактически, это «лицо» вашего текста, первое, на что ориентируются роботы-поисковики и живые пользователи. Поэтому строго соблюдайте все правила оформления заголовков.

Заголовок H1 (название статьи) может быть только один!
После заголовка и любых подзаголовков точка не ставится.
Не используйте большое количество подзаголовков: это может усложнить процедуру проверки и расцениваться системой как спам. Обычно достаточно нескольких H2 и H3 (по необходимости).
Следите за уникальностью. Не делайте в тегах одинаковые названия.
Не выделяйте их вручную. Жирный шрифт, акцентирование с помощью цвета текста или курсива здесь неуместны. Просто выберите подходящий стиль в настройках.
Не используйте в подзаголовках ссылки: это «некомильфо» с точки зрения поисковых алгоритмов.
Строго соблюдайте иерархию заголовков – начиная с главного H1 и продолжая по понижению уровней. Например, нельзя использовать в статье H3, если предварительно не было H2.
Размер текста в заголовке должен быть не более 60 знаков, и ключ в нем должен находиться максимально близко к началу. Это упростит работу алгоритмам.
Не допускайте опечаток при прописке тега, иначе вас не заметят поисковики.

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

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

Бонус: как правильно писать числовые значения

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

Время и дата:

значение времени всегда пишется через двоеточие (11:45);
дата ставится в виде число-месяц-год и отделяется точками (11.01.2011 или 11.01.11);
если дата заключается в скобки, обозначение «г./год» рекомендуют опускать;
века пишут только римскими цифрами;
пробелы в пределах дат между цифрами не ставятся.

Значения и меры величин:

если в интервале чисел есть отрицательные и положительные значения (предваряющиеся знаками «+» и «-»), то вместо тире используют многоточие;
в диапазоне чисел, указывающем на интервал любых физических величин, само текстовое обозначение (меры веса, размера и т.д.) ставится только один раз — в конце перечня;
буквенное обозначение величины пишется в общепринятом сокращенном виде, и точка в конце не ставится;
значки градусов, единицы измерения в виде квадратных метров и любые знаки, располагающиеся на верхней линии шрифта, от сопутствующего слова пробелом не отделяются.

Телефоны:

номера телефонов пишутся в формате: значок «+», код страны, код города и собственно номер (для городских);
номера мобильных пишутся аналогично, но без указания кода города;
код страны, код города и сам номер отбиваются друг от друга пробелами;
внутри номера телефона цифры разбиваются на пары и разграничиваются дефисами;
если количество знаков нечетное, последняя группа объединяется в тройку: одну цифру оставлять не принято.

Если все требования вам показались слишком страшными — не переживайте! Это дело опыта.

Несколько статей — и вы уже автоматически отмеряете нужные абзацы, ставите теги и «неудобные» тире с кавычками. А если вам все еще непонятно, как же выглядит верстка — посмотрите на наш текст. Мы использовали здесь списки, подзаголовки и короткие абзацы — все, как доктор прописал.

И не забывайте читать наш блог и статьи в СМИ — мы искренне хотим помочь вам найти работу.

Ваш «Текстодром».