1. Структурна "тройчатка" текстів в інтернеті
2. HTML і семантична структура тексту
3. HTML для копірайтера: основи
4. Що таке тег, і навіщо він потрібен копірайтер
5. Невелика наочна демонстрація
6. Варіант тексту №1 (з правильною семантикою)
7. Варіант тексту №2 (з неправильною семантикою)
8. Основні теги в HTML
9. 1. Тема і підзаголовки (теги h1-h6)
10. Підзаголовок червоного кольору
11. 2. Абзац (тег p)
12. 3. Виділення напівжирним або курсивом (теги strong і em)
13. 4. Зображення (тег img)
14. 5. Нумеровані і ненумеровані списки (ol, ul)
15. 6. Таблиця (теги table, tr, td)
16. 7. Контейнери (тег div)
17. 8. Тег span
18. 9. Тег br
19. 10. Тег hr
20. 11. Посилання (тег a)
21. висновок

Під час тренінгів я завжди кажу слухачам, що хороший копірайтер зобов'язаний знати мову розмітки 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>

результат

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, і як він може бути корисний. А у мене на сьогодні все, побачимося в наступних статтях.

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

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

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

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

І ще, цю статтю дивовижно доповнюють гостьові пости мого друга і колеги, Антона Шабана:

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