Во время тренингов я всегда говорю слушателям, что хороший копирайтер обязан знать язык разметки 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.
Вариант текста №2 (с неправильной семантикой)
Плохая HTML-семантика для внутреннего SEO.
Видите? Хотя, казалось бы, текст один и тот же. Буквы одни и те же. Но эффективность решения задачи кардинально отличается. В разы. Вот что дает копирайтеру знание языка разметки HTML.
Второй вариант с неправильной разметкой встречается в 80% текстов новичков, потому что они зачастую копируют и вставляют тексты из MS Word или других текстовых редакторов.
Посмотрите, сколько “мусора” в коде (справа) будет, если я скопирую и вставлю аналогичный текст из редактора типа MS Word. Здесь точно так же нет никакой поисковой оптимизации, и позиции у такого текста будут плачевными.
Код при копировании текста из визуального редактора.
К слову, картинки для примеров выше я сделал в бесплатном онлайн-редакторе https://html-online.com. Используйте его или аналог, чтобы попрактиковаться. Очень полезная и удобная штука.
Основные теги в HTML
Теперь, давайте перейдем к основным тегам. В этой статье мы рассмотрим только те, которые обязательно должен знать копирайтер. Более подробную информацию Вы сможете найти по ссылкам в конце статьи.
1. Заголовок и подзаголовки (теги h1-h6)
Первый тег, а вернее набор тегов, который мы с Вами рассмотрим — это заголовки. В HTML заголовков всего шесть, и они идут по иерархии: от H1 до H6. Выглядят вот так.
Пример заголовка 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> |
|
Результат |
|
|
|
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. Как и обещал, вот несколько полезных ресурсов:
- Один из лучших онлайн-учебников по HTML (я учился именно по нему в свое время) — w3schools.com. Единственный его недостаток — он на английском.
- Один из русскоязычных аналогов: http://htmlbook.ru/html
- Яндекс и Google для предметного решения задач и поиска нужной информации
И еще, эту статью изумительно дополняют гостевые посты моего друга и коллеги, Антона Шабана:
