Рубрики
Основы копирайтинга

Основы HTML для копирайтера, или зачем копирайтеру знать язык разметки текста

Во время тренингов я всегда говорю слушателям, что хороший копирайтер обязан знать язык разметки HTML. Хотя бы на базовом уровне. После этой фразы как минимум у половины слушателей появляется выражение недоумения на лице: “Зачем?! Копирайтер же пишет тексты!”. А вот затем.

Дело в том, что вопреки распространенному мнению, копирайтеры высокого уровня не только пишут тексты, но и решают массу других задач:

  • Запускают Email-рассылки,
  • Отправляют красивые коммерческие предложения с замером эффективности
  • Проводят внутреннюю поисковую оптимизацию, чтобы написанные тексты были выше в поиске
  • Заводят и развивают свой блог, наконец. И много, много других задач.

К слову, за такие задачи клиенты платят большие деньги. Например, стоимость настройки и запуска кампании Email-маркетинга варьируется от 50 до 130 тысяч рублей ($800-2000). Хороший текст, который выбивается в ТОП поисковых систем стоит от 2 до 5 тыс. рублей. Но чтобы решать такие задачи, нужно знать HTML. Хотя бы на базовом уровне.

Собственно, поэтому я и решил написать эту статью. В ней я хочу дать Вам базу по языку разметки HTML, а также сопроводить ее полезными ссылками для более глубокого изучения (если будет желание). По-хорошему, HTML на базовом уровне осваивается за 2-3 дня, однако в плане окупаемости временных инвестиций ему нет равных. Готовы? Тогда устраивайтесь поудобнее, мы начинаем!

Структурная “тройчатка” текстов в интернете

У 99% размещенных в интернете текстов есть три типа структуры. Смысловая – структура подачи информации. Нас она сегодня не интересует. Подробнее о ней можно прочитать в этой статье. Визуальная – это то, как текст видит читатель. К этому типу относятся шрифт, подборка изображений, размер подзаголовков, оформление выносок и цитат и т.д. Очень важный аспект, но и он сегодня вне поля нашего внимания.

Наконец, третий тип структуры – семантическая. Это то, как видит Ваш текст браузер и поисковые машины (Яндекс, Google). Именно о ней мы сегодня и поговорим. Более того, от семантической структуры в интернете напрямую зависит визуальная структура. Но обо всем по порядку.

Первое, что Вам нужно понимать: визуально одна и та же статья (или коммерческий текст), с разной семантической структурой может либо находиться в ТОПе поисковой выдачи, и привлекать массу трафика, либо быть аутсайдером и просто висеть на задворках интернета, предаваясь забвению. Хотя текст, буквы одни и те же.

HTML и семантическая структура текста

За семантическую структуру отвечает как раз язык текстовой разметки HTML (расшифровывается как Hyper Text Markup Language – язык разметки гипертекста, или текста, размещенного в интернете). К слову, именно с его помощью поисковые машины понимают, какие слова и фразы в Вашей публикации особенно важны, и по каким запросам читателям нужно показывать Ваш материал. Это называется внутренняя поисковая оптимизация. Кроме того, язык HTML вместе с таблицами стилей (CSS) говорит браузеру, как правильно отображать Ваш текст. Но этот момент мы сегодня рассматривать тоже не будем, потому что к работе копирайтера он имеет косвенное отношение. В конце статьи я дам ссылки, где можно получить больше информации.

Вопреки распространенному заблуждению язык HTML – это не язык программирования. Кстати, именно из-за этого заблуждения многие гуманитарии его боятся, как огня. Почем зря.

Вы можете возразить, мол, зачем копирайтеру вообще знать HTML? Вон, вокруг столько классных визуальных редакторов! Отвечаю: один и тот же текст, правильно сверстанный в HTML и сделанный в визуальном редакторе могут радикально отличаться по эффективности. У первого будет идеальная внутренняя оптимизация, а у второго с высокой долей вероятности в коде будет много “мусора”, и акценты на словах, скорее всего, будут расставлены неверно. Чуть ниже я сделаю Вам наглядную демонстрацию, потерпите немного.

HTML для копирайтера: основы

Ах да, еще один важный момент. То, что Вы изучите HTML, вовсе не означает, что Вам придется отказаться от привычных визуальных редакторов. Просто после изучения этой статьи, Вы будете знать, на что стоит обратить внимание при верстке, чтобы тексты были более эффективными.

Например, Вы сможете оформлять текст в визуальном редакторе, а затем переключиться в режим HTML и явно задать нужные теги или скорректировать те или иные атрибуты. Что касается меня, то я в этом плане консерватор, и свои тексты на блоге всегда верстаю сам в HTML. Без помощи каких-либо визуальных инструментов. Отчасти поэтому мои статьи неплохо ранжируются по многим запросам.

Так, с прелюдией вроде все. Теперь переходим к немного занудной, но очень важной части.

Что такое тег, и зачем он нужен копирайтеру

Весь язык разметки HTML построен вокруг одного понятия – тег. Тег указывает браузеру и поисковой системе, какие элементы Вашего текста особенно важны, а какие — второстепенны. Другими словами, с помощью тегов Вы говорите Яндексу и Гуглу: “Смотрите, моя статья об особенностях брачного периода доминиканских ежиков, и если люди будут об этом спрашивать, приводите их ко мне, потому что у меня об этом много полезной информации”.

Для простоты понимания тег можно сравнить с коробочкой, в которую Вы кладете слова. Например, в одну коробочку Вы положили заголовок и подписали, что это заголовок. В другую — абзац. При этом внутри одной большой коробочки могут находиться другие, более мелкие. Например, в коробочке “абзац” у Вас может находиться коробочка “текст, выделенный курсивом” и “текст, выделенный полужирным”. Идею Вы поняли.

Теги бывают трех видов: открывающие, закрывающие и одинарные. Открывающие теги ставятся в начале слова или конструкции (абзаца, таблицы и т.д.), а закрывающие теги ставятся в конце. Одинарные теги существуют сами по себе и не требуют закрытия.

Вот пример типовой конструкции:

<strong>Эта конструкция будет полужирной.</strong>

Здесь <strong> — открывающий тег, а </strong> — закрывающий. Как видите, они почти идентичны. Единственное отличие – в наклонной черте у закрывающего тега. И все. В визуальном редакторе или на интернет-странице в браузере описанная выше конструкция будет выглядеть вот так:

Эта конструкция будет полужирной.

Как видите, принцип очень прост. Открывающий и закрывающий теги – это как коробочка, которая включает в себя слова или предложения и передает о них браузеру и поисковым системам скрытую информацию, которую читатели не видят.

К слову, поисковики, при грамотном использовании тегов, Вам будут очень благодарны. Так они быстро понимают, где и что у Вас в тексте находится. Как результат — текст лучше ранжируется (находится выше в результатах поиска). Это особенно важно, когда Вы ведете блог для пассивного заработка или разрабатываете текст для сайта заказчика.

Небольшая наглядная демонстрация

Помните, в самом начале я сказал Вам, что тексты могут выглядеть совершенно одинаково, но по-разному восприниматься поисковыми системами? Посмотрите на два примера.

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

Вариант текста №1 (с правильной семантикой)

Текст с правильной семантикой для внутреннего SEO

Текст с правильной семантикой для внутреннего SEO.

Вариант текста №2 (с неправильной семантикой)

Плохая HTML-семантика для внутреннего SEO

Плохая HTML-семантика для внутреннего SEO.

Видите? Хотя, казалось бы, текст один и тот же. Буквы одни и те же. Но эффективность решения задачи кардинально отличается. В разы. Вот что дает копирайтеру знание языка разметки HTML.

Второй вариант с неправильной разметкой встречается в 80% текстов новичков, потому что они зачастую копируют и вставляют тексты из MS Word или других текстовых редакторов.

Посмотрите, сколько “мусора” в коде (справа) будет, если я скопирую и вставлю аналогичный текст из редактора типа MS Word. Здесь точно так же нет никакой поисковой оптимизации, и позиции у такого текста будут плачевными.

Код при копировании текста из визуального редактора

Код при копировании текста из визуального редактора.

К слову, картинки для примеров выше я сделал в бесплатном онлайн-редакторе https://html-online.com. Используйте его или аналог, чтобы попрактиковаться. Очень полезная и удобная штука.

Основные теги в HTML

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

1. Заголовок и подзаголовки (теги h1-h6)

Первый тег, а вернее набор тегов, который мы с Вами рассмотрим — это заголовки. В HTML заголовков всего шесть, и они идут по иерархии: от H1 до H6. Выглядят вот так.

Заголовки в HTML

Пример заголовка H1 в HTML.

При этом обратите внимание: заголовок H1 в тексте может быть только один (название статьи). H2 — это подзаголовки в статье. Их может быть сколько угодно. H3 — это подзаголовки подразделов и т.д. На практике я, как правило, не использую подзаголовки ниже H4. Просто потому что не размещаю в интернете материалы, в которых было бы оправдано использование всей цепочки иерархии.

Еще один важный момент, который Вам нужно запомнить. У каждого тега могут быть атрибуты — дополнительная информация, которая передается браузеру или поисковым системам.

Например, есть такой атрибут style (стиль). Он указывает браузеру, как правильно отображать элементы, заключенные в тег. Посмотрите, как это используется на практике:

<h3 style="color:red;">Подзаголовок красного цвета</h3>

Результат будет выглядеть вот так:

Подзаголовок красного цвета

Забегая вперед, все стили браузер применяет либо по умолчанию, либо в соответствии со специальными, т.н. каскадными таблицами стилей (CSS). Если в двух словах, это такой документ, в котором прописано, как должны визуально отображаться все теги по умолчанию.

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

2. Абзац (тег p)

Абзацы обрамляются в тег <p> (открывающий и закрывающий). C помощью этого тега и атрибутов Вы можете задавать отступы сверху и снизу или центрировать текст на странице. Плюс, абзацы важны для поисковых систем.

К слову, когда Вы размещаете текст в WordPress или другой популярной системе управления контентом, вручную тег <p>проставлять, как правило, не нужно. Тот же WordPress за Вас это делает автоматически.

О внутренней оптимизации и ключевых словах. В массивах текста, заключенных в тег <p> ключевые слова должны быть распределены по возможности равномерно. Остерегайтесь переспама, иначе эффект поисковые системы могут наложить санкции.

3. Выделение полужирным или курсивом (теги strong и em)

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

Лично мне не нравится как выглядят выделенные в тексте полужирным ключевые слова. Смотрится аляповато и безвкусно. На заре ведения блога я делал выделения ключевых слов полужирным, чтобы людям было проще сканировать статьи, но эксперимент провалился. Поэтому теперь я при необходимости либо выделяю ключевые слова (не все, а лишь пару-тройку) тегом курсива, либо тегом <strong>, но с корректировкой стиля, чтобы не было визуальных различий с основным текстом.

4. Изображения (тег img)

Картинки играют особую роль при верстке статьи. У них есть два скрытых атрибута, которые влияют на SEO. Этот атрибуты alt (альтернативный текст, который показывается в ситуациях, когда изображения отключены, должен содержать ключевые слова) и title (заголовок изображения, показывается, если навести на картинку курсор мыши, тоже должен содержать ключевые слова). Тег <img> является одиночным и не имеет закрывающего аналога.

Пример использования:

<img src="https://shard-copywriting.ru/wp-content/uploads/2016/11/tropics.jpg" alt="Красивая картинка тропиков" title="Красивая картинка тропиков" />

И вот как выглядит картинка в интерпретации браузером.

Красивая картинка тропиков

Пусть эта картинка тропиков принесет Вам позитив.

5. Нумерованные и ненумерованные списки (ol, ul)

Еще два очень важных тега, которые делают структуру текста четкой — это теги списков. Я настоятельно рекомендую их использовать, когда у Вас в статье идет перечисление однородных элементов. Синтаксис очень простой.

Нумерованный список Ненумерованный список
<ol>

<li>Элемент №1</li>

<li>Элемент №2</li>

<li>Элемент №3</li>

</ol>

<ul>

<li>Элемент №1</li>

<li>Элемент №2</li>

<li>Элемент №3</li>

</ul>

Результат

  1. Элемент №1
  2. Элемент №2
  3. Элемент №3
  • Элемент №1
  • Элемент №2
  • Элемент №3

6. Таблица (теги table, tr, td)

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

За размещение таблиц отвечают четыре тега (table, th, tr, td), но механика их более сложная. Посмотрите примеры и подробное объяснение на этой странице (англ.).

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

7. Контейнеры (тег div)

Если обычные теги — это “коробочки”, на которых написано, как должны структурно отображаться те или иные элементы, то тег <div> — это целый контейнер. Например, я использую такие контейнеры, чтобы делать выноски в виде блоков для разрежения текстовой массы. Например так.

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

8. Тег span

Этот тег ничего не значит для SEO. И если Вы в него заключите текст, ничего не произойдет. Его имеет смысл использовать для придания фрагменту текста каких-то дополнительных свойств. Например, эта строка подчеркнута, потому что я заключил ее в тег span со следующим атрибутом:

<span style=”text-decoration:underline;”>эта строка подчеркнута, потому что я заключил ее в тег span со следующим атрибутом</span>

9. Тег br

Тег <br /> не имеет закрывающей части и используется, чтобы перейти на новую строку. Двойное использование тега разделяет абзацы пустой строкой. Используется редко и только в тех случаях, когда нет автоматической вставки тега <p>. При верстке контента в WordPress практически не используется.

10. Тег hr

Этот тег (<hr />) лично я очень люблю. С его помощью ставится разделительная горизонтальная линия. Это особенно полезно, когда Вы хотите разредить контент выноской. Например, так.


Выноски — хороший способ сделать акцент на ключевой мысли и при этом разредить текст.


11. Ссылки (тег a)

Ссылки очень важны для SEO. Особенно когда Вы развиваете свой блог. Грамотная перелинковка играет Вам на руку. За ссылки отвечает тег <a>. Открывающий тег ставится в начале текста ссылки (анкора), а закрывающий — в конце. В открывающем теге всегда должен быть прописан атрибут href — адрес, на который ссылка ведет. Например, вот так:

<a href="https://shard-copywriting.ru">Ссылка на главную страницу блога Shard-copywriting.ru</a>

И вот как выглядит результат:

Ссылка на главную страницу блога shard-copywriting.ru

Заключение

В этой статье я сделал базовый обзор основных тегов и объяснил, почему копирайтер должен знать HTML. Конечно, без этих знаний можно и обойтись, особенно когда с Вами в команде работает толковый верстальщик. Однако если Вы запускаете собственный проект или планируете в будущем осваивать Email-маркетинг, то эти знания очень сыграют Вам на руку.

Конечно, одной статьи будет недостаточно. И, да, придется искать больше информации и практиковаться, чтобы освоить HTML. Здесь как в любой смежной сфере: нужно время и терпение. С другой стороны, это весело! Особенно с учетом того, что сейчас есть много конструкторов, которые в режиме реального времени показывают Вам, что у Вас получается. Плюс, освоение HTML не занимает много времени: от пары дней до недели (если подойти к вопросу серьезно).

В любом случае, теперь Вы знаете, что такое HTML, и как он может быть полезен. А у меня на сегодня все, увидимся в следующих статьях.

Пробуйте! У Вас все получится!

Искренне Ваш, Даниил Шардаков.

P.S. Как и обещал, вот несколько полезных ресурсов:

  1. Один из лучших онлайн-учебников по HTML (я учился именно по нему в свое время) — w3schools.com. Единственный его недостаток — он на английском.
  2. Один из русскоязычных аналогов: http://htmlbook.ru/html
  3. Яндекс и Google для предметного решения задач и поиска нужной информации

И еще, эту статью изумительно дополняют гостевые посты моего друга и коллеги, Антона Шабана:

  1. МЕГА-ПОСТ: SEO-тексты для сайта, или как написать оптимизированный текст правильно
  2. ГИГА-ПОСТ! SEO-анализ текста: 11 инструментов для копирайтера

Автор: Даниил Шардаков

Инженер, интернет-маркетолог, копирайтер, писатель, преподаватель. Практик. Автор книги "Копирайтинг с нуля".

================
ВАЖНО! Теперь все бесплатные курсы, задачи и другие материалы есть в Telegram: https://t.me/shardcopy. Подпишитесь, чтобы они были у Вас всегда под рукой в телефоне!
================

24 ответа к “Основы HTML для копирайтера, или зачем копирайтеру знать язык разметки текста”

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

Ответить

Дошел до конца статьи и внизу появилось окошко со ссылкой на статью «Конкурентные преимущества компании». Очень символично, ведь изучив основы HTML, можно предлагать не просто разработку текстов, но и размещение их на сайте заказчика. А это минимум +30% к стоимости работы) Хотя чаще и все +100%) Или предлагаешь вообще размещение сделать бесплатно, но при этом стоимость 1 текста ниже 1 тысячи рублей ставить нет смысла. Это я сейчас про работу с бизнесом, естественно, говорю.

Не в качестве рекламы, но он себя еще добавлю про онлайн изучение HTML в игровой форме на сайте HTML Academy. Мне он очень помог прокачать свои навыки. А любителям кошек будет вдвойне приятнее там учиться)

Ответить

Да………. Озадачили.
Спасибо. Будем покорять новые горизонты.

Ответить

Может я что-то пропустил, но все эти тэги автоматически проставляются в редакторе админки. Основы HTML, конечно, надо знать, только не уловил, какая здесь практическая польза?

Ответить
  1. Иерархия заголовков автоматически не проставляется
  2. Сами заголовки автоматически не проставляются, если их явно не определять в визуальном редакторе
  3. Теги Alt и Title для картинок не проставляются автоматически. Тег Title тот же WordPress вообще не ставит.
  4. Атрибуты не проставляются автоматически
  5. Во многих редакторах админок многие вещи нельзя сделать, например, построить таблицу.
  6. Выноски и контейнеры, как правило, нельзя сделать силами админки. Только через шорткоды или HTML.
  7. При копировании материала из Word семантика нарушена (зато мусора — хоть отбавляй).
  8. Многих тегов в визуальном редакторе просто нет.
  9. Прочитайте еще раз блок про визуальные редакторы.
Ответить

Гостевые посты Антона Шабана. Первая ссылка с ошибкой. Хочется почитать.

Ответить

Воу-воу-воу, точно! Спасибо за замечание. Ссылку поправил.

Ответить

Добрый день, Даниил! Большое спасибо за информативную и полезную статью. Давно собираюсь разобраться с HTML. Вот теперь и начну, потому что без этого не обойтись.

Ответить

«висеть на затворках интернета»- опытный копирайтер, а язык не знает!! Нет такого слова — «затворки» По-русски — задворки!

Ответить

Кошмар!!! Какая вопиющая безграмотность! Вы абсолютно правы! Срочно, срочно, лишить всех титулов и публично выпороть!

А опечатку поправил, спасибо.

Ответить

Даниил, может, стоит сделать форму «сообщить об ошибке» по ctrl-enter, как у многих СМИ и блогов? Сэкономило бы ваше время, как мне кажется.

Ответить

Даниил, ваша статья на редкость проста для понимания и информативна. Так получилось, что по необходимости я взялся за сопровождение сайта и заинтересовался всем, что с этим связано. Естественно, без знаний грамотно ничего не сделаешь. Но ваше «наставление» как бальзам на душу.
Удачи вам и спасибо!!!

Ответить

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

Ответить

Круто Даниил. Очередное искреннее благодарю в Ваш адрес. Рад что наткнулся на Ваш сайт в начале покорения интернета. И кажется начал понимать, почему именно на Ваш. Удачи и Позитива!

С почтением, Владимир.

Ответить
Ключевые слова в тексте: как правильно вставить в статью | Копирайтинг c Шардаковымпишет:

[…] У подобных перечислений есть еще еще одна сильная черта: при грамотном подходе и форматировании они образуют хорошую логическую структуру текста с иерархическими подзаголовками. Узнайте об этом больше из статьи «Зачем копирайтеру знать HTML«. […]

Ответить

Спасибо. очень интересно и, вроде как, на первый взгляд все понятно. Но! Я гуманитарий и отсюда вопрос, может быть совсем глупый — я эти коды сама должна проставлять? Или это делает программа какая-нибудь? И в какой программе тогда лучше набирать текст, чтобы он сразу же шел с правильными кодами? Если, конечно, такое есть.

Ответить

Нина, у меня тот же глупый вопрос. И второй почти такой же. Теперь в Ворде не набирать текст?..

Ответить

Как выход есть программы-оптимизаторы , они чистят то , что конвертировано из ворда. Но доводить последнии штрихи приходится лично.
Это не единственный способ. Я раньше пользовался специальным html-редактором , за которым не приходилось исправлять.

Ответить

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

Ответить

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

Ответить

Даниил, ссылка на русскоязычный аналог по изучению HTML не открывается.

Ответить

Вооот, теперь я наконец поняла, зачем год назад учила HTML на курсах, и буду оттачивать неподкрепленные опытом знания в дальнейшем!) Как же классно, что я вас нашла, Даниил!

Ответить

Здравствуйте Даниил! Спасибо за информацию.

Ответить

Даниил, здравствуйте!
Спасибо за полезную информацию) Это оказалось даже интересно :)
Вопрос: тег style front-size необходимо использовать для всех заголовков?

Ответить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *