Основи HTML для копірайтера, або навіщо копірайтеру знати мову розмітки тексту

4

Під час тренінгів я завжди кажу слухачам, що хороший копірайтер зобов’язаний знати мову розмітки 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 побудований навколо одного поняття – тег. Тег вказує браузеру і пошуковій системі, які елементи Вашого тексту особливо важливі, а які — другорядними. Іншими словами, з допомогою тегів Ви говорите Яндексу і Гуглу: “Дивіться, моя стаття про особливості шлюбного періоду домініканських їжачків, і якщо люди будуть про це питати, приведіть їх до мене, тому що у мене про це багато корисної інформації”.

Для простоти розуміння тег можна порівняти з коробочкою, в яку Ви кладете слова. Наприклад, в одну коробочку Ви поклали заголовок і підписали, що це заголовок. В іншу — абзац. При цьому всередині однієї великої коробочки можуть перебувати інші, більш дрібні. Наприклад, в коробочці “абзац” у Вас може перебувати коробочка “текст, виділений курсивом” і “текст, виділений напівжирним”. Ідею Ви зрозуміли.

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

Ось приклад типової конструкції:

Ця конструкція буде напівжирної.

Тут — відкриваючий тег, а — закриває. Як бачите, вони майже ідентичні. Єдина відмінність – в похилій у межах закриваючого тега. І все. У візуальному редакторі або на інтернет-сторінці в браузері описана вище конструкція буде виглядати ось так:

Ця конструкція буде напівжирної.

Як бачите, принцип дуже простий. Відкриваючий і закриваючий теги – це коробочка, яка включає в себе слова або пропозиції та інформує про них браузеру і пошуковим системам приховану інформацію, яку читачі не бачать.

До речі, пошуковики, при грамотному використанні тегів, Вам будуть дуже вдячні. Так вони швидко розуміють, де і що у Вас в тексті знаходиться. Як результат — текст краще ранжується (знаходиться вище в результатах пошуку). Це особливо важливо, коли Ви ведете блог для пасивного заробітку чи розробляєте текст для сайту замовника.

Невелика наочна демонстрація

Пам’ятаєте, на початку я сказав Вам, що тексти можуть виглядати абсолютно однаково, але по-різному сприйматися пошуковими системами? Подивіться на два прикладу.

Преамбула: припустимо, у нас є текст, який просувається по запиту «Як правильно використовувати 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 (стиль). Він вказує браузеру, як правильно показувати елементи, укладені в тег. Подивіться, як це використовується на практиці:

Підзаголовок червоного кольору

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

Підзаголовок червоного кольору

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

Для пошукових систем підзаголовки дуже важливі. Тому переконайтеся, що вони містять ключові слова або їх синоніми.

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

Абзаци обрамляються в тег

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

До речі, коли Ви розміщуєте текст в WordPress або іншій популярній системі управління контентом, вручну тег

проставляти, як правило, не потрібно. Той же WordPress за Вас це робить автоматично.
Про внутрішньої оптимізації і ключових словах. В масивах тексту, укладених в тег

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

3. Виділення жирним або курсивом (теги strong і em)

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

Особисто мені не подобається, як виглядають виділені в тексті напівжирним ключові слова. Виглядає недоладно і без смаку. На зорі ведення блогу я робив виділення ключових слів напівжирним, щоб людям було простіше сканувати статті, але експеримент провалився. Тому тепер я при необхідності або виділяю ключові слова (не всі, а лише пару-трійку) тегом курсиву, або тегом , але з коригуванням стилю, щоб не було візуальних відмінностей з основним текстом.

4. Зображення (тег img)

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

Приклад використання:

І ось як виглядає картинка в інтерпретації браузером.

Нехай ця картинка тропіків принесе Вам позитив.

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

Ще два дуже важливих тегів, які роблять структуру тексту чіткої — це теги списків. Я настійно рекомендую їх використовувати, коли у Вас в статті йде перерахування однорідних елементів. Синтаксис дуже простий.

Нумерований список
Ненумерованний список

  • Елемент №1
  • Елемент №2
  • Елемент №3
    • Елемент №1
    • Елемент №2
    • Елемент №3

    Результат

  • Елемент №1
  • Елемент №2
  • Елемент №3
    • Елемент №1
    • Елемент №2
    • Елемент №3

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

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

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

    За великим рахунком, використання таблиць опціонально, але якщо Ви освоїте його, то отримаєте величезну перевагу, не кажучи про можливості розміщувати складний технічний контент.

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

    Якщо звичайні теги — це “коробочки”, на яких написано, як повинні структурно відображатися ті чи інші елементи, то тег
    — це цілий контейнер. Наприклад, я використовую такі контейнери, щоб робити виноски у вигляді блоків для розрідження текстової маси. Наприклад так.

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

    8. Тег span

    Цей тег нічого не значить для SEO. І якщо Ви в нього укладіть текст, нічого не станеться. Його має сенс використовувати для додання фрагменту тексту якихось додаткових властивостей. Наприклад, ця рядок підкреслено, тому що я уклав її в тег span з наступним атрибутом:

    ця рядок підкреслено, тому що я уклав її в тег span з наступним атрибутом

    9. Тег br

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

    . При верстці контенту в WordPress практично не використовується.

    10. Тег hr

    Цей тег) особисто я дуже люблю. З його допомогою ставиться горизонтальна розділова лінія. Це особливо корисно, коли Ви хочете розрідить контент виноскою. Наприклад, так.

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

    11. Посилання (тег a)

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

    Посилання на головну сторінку блогу Shard-copywriting.ru

    І ось як виглядає результат:

    Посилання на головну сторінку блогу shard-copywriting.ru

    Висновок

    У цій статті я зробив базовий огляд основних тегів і пояснив, чому копірайтер повинен знати HTML. Звичайно, без цих знань можна і обійтися, особливо коли з Вами в команді працює тлумачний верстальник. Однак якщо Ви запускаєте власний проект чи плануєте в майбутньому освоювати Email-маркетинг, то ці знання дуже зіграють Вам на руку.

    Звичайно, в одній статті буде недостатньо. І, так, доведеться шукати більше інформації і практикуватися, щоб освоїти HTML. Тут як в будь-якій суміжній сфері: потрібен час і терпіння. З іншого боку, це весело! Особливо з урахуванням того, що зараз є багато конструкторів, які в режимі реального часу показують Вам, що у Вас виходить. Плюс, освоєння HTML не займає багато часу: від декількох днів до тижня (якщо підійти до питання серйозно).

    У будь-якому випадку, тепер Ви знаєте, що таке HTML, та як він може бути корисний. А в мене на сьогодні все, побачимося в наступних статтях.

    Пробуйте! У Вас все вийде!

    Щиро Ваш, Данило Шардаков.

    P. S. Як і обіцяв, ось кілька корисних ресурсів:

  • Один з кращих онлайн-підручників з HTML (я вчився саме за нього в свій час) — w3schools.com. Єдиний його недолік — він англійською.
  • Один з російськомовних аналогів: http://htmlbook.ru/html
  • Яндекс і Google для предметного вирішення завдань і пошуку потрібної інформації
  • І ще, цю статтю дивовижно доповнюють гостьові пости мого друга і колеги, Антона Шабана:

  • МЕГА-ПОСТ: SEO-тексти для сайту, або як написати правильно оптимізований текст
  • ГІГА-ПОСТ! SEO-аналіз тексту: 11 інструментів для копірайтера

    20 ударних прийомів роботи з текстами, копірайтинг, які я використовую для вирішення завдань
    [Відео] Що таке конверсія, і чому вона нічого не значить

    Вам сподобаються

    Що таке LSI копірайтинг, тексти та запити: простими…

    Як написати лист подяки: зразок, шаблон…

    Як правильно написати оголошення про продаж для дошок…

    Конкурентні переваги компанії: види, як знайти…