HTML-теги для форматирования web-текстов

Мало кто из заказчиков просит копирайтеров оформлять текст с помощью HTML-тегов. Но если все же такое требование появится в одном из ТЗ, по которому вам придется работать, у вас будет возможность показать свой профессионализм.

Итак, заголовок статьи – заголовок первого уровня, в каждом тексте он – единственный. Обозначается так:

<h1> Название статьи </h1>

(<h1> - открывающий тег, </h1>- закрывающий)

Подзаголовков второго, третьего и остальных уровней (всего их 5 – от H2 до H6) может быть сколько угодно. Обозначаются они так:

<h2> Подзаголовок второго уровня </h2>

<h3> Подзаголовок третьего уровня </h3>

И так далее – до 6-го.

Точка в конце заголовков и подзаголовков НЕ СТАВИТСЯ.

Ключевые слова в тексте оформляют тегами <strong> и <em>. Первый выделяет текст жирным, второй - курсивом:

1. текст <strong> ключевое слово </strong> текст

2. текст <em> ключевое слово </em> текст

Можно вместо <strong> использовать тег <b>, а вместо <em> – тег <i>, хотя они считаются устаревшими и могут не отображаться в некоторых современных браузерах. Есть и другое различие между этими парами тегов: <b> и <i> выполняют визуальное выделение текста, а <strong> и </em> указывают на его важность.

Для форматирования абзацев используются теги <p>:

<p> текст абзаца</p>

Для списков существует вот такая html-разметка:

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

<ol>

<li>элемент списка</li>

<li>элемент списка</li>

<li>элемент списка</li>

</ol>

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

<ul>

<li>элемент списка</li>

<li>элемент списка</li>

<li>элемент списка</li>

</ul>

Итак, если заказчик просит вас оформить текст с помощью html-разметки, ваша работа в итоге должна быть выполнена примерно так:

Есть способ существенно упростить создание html-разметки вашей статьи. Можно использовать онлайн-сервис, который позволит не только правильно оформить текст, но и получить его html-код.

Сервис для правильного форматирования текста

http://www.artlebedev.ru/tools/reformator/

В Реформаторе можно форматировать статью, получая правильный код. К тому же, он преобразовывает кавычки “ ” в «», а короткое тире – в длинное —.

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

• Обычный параграф – это обычный шрифт, без какого-либо форматирования.
• Заголовок – первым там стоит заголовок h1, вторым – заголовок h2 и третьим – h3.
• Ненумерованный список – будет создан маркированный список.
• Нумерованный список – создается список элементов под номерами 1, 2, 3 и так далее.
• Цитата – выделенная часть текста обрамляется тегами цитирования.
• Ссылка – выделяете нужную строчку, нажимаете «Ссылка», в появившееся окошко вводите ссылку.
• Выделенный – жирный шрифт.
• Выделенный – курсив.

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

Теперь выделите текст полностью (проще всего поставить курсор в поле для ввода текста и, удерживая клавишу Ctrl, нажать клавишу A).

Справа вверху на панели форматирования нажмите «Типографить», затем снова выделить все и «Очистить HTML».

В нижней части панели есть кнопка «Исходный HTML». Нажмите её, и свой отформатированный текст увидите в формате HTML-разметки. Выделить все – копировать. Готово!

Изучив основы форматирования текстов для web-сайтов и получив базовые знания по использованию html-разметки, вы как SEO-копирайтер обретёте значительное преимущество перед своими конкурентами. А это – ещё один шаг к успешной деятельности фрилансера.

Title и мета-данные

Конечно, копирайтеру не обязательно знать о том, что такое мета-данные и зачем они используются на сайтах… если это не SEO-копирайтер, претендующий на звание профессионала.

Итак, мета-данные – это «данные о данных» или «информация об информации». Если бы, к примеру, кто-нибудь решил создать некую тематическую таблицу web-страниц, самыми информативными сведениями были бы именно мета-данные и title каждой из них.

Мета-данные страницы сайта – это:

· description (описание)

· keywords (ключевые слова)

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

Title

Тайтл – заголовок страницы (не путать с заголовками статей на странице). Отображается как заголовок окна браузера, в котором открывается сайт.

Вот так, например, показывает тайтл страницы Mozilla Firefox:

Если навести курсор на вкладку Google Chrome, можно полностью прочитать тайтл web-документа:

А вот так показывается title в браузере Opera:

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

Тайтл должен отображать информацию о содержании страницы и быть привлекательным для интернет-пользователей (подробнее об этом читайте в параграфе «Сниппеты»).

Некоторые SEO-оптимизаторы рекомендуют создавать тайтлы до 70 символов, до 12 слов (для Google) или максимум 80 символов и 15 слов (для Яндекса). Однако, в выдаче обоих этих ПС очень трудно найти тайтлы длиннее 65 символов. Поэтому оптимальным размером тайтла можно считать 40-65 символов с пробелами.

Description

Чтобы Яндекс взял description в сниппет, нужно выполнять следующие рекомендации:

· описание для страницы не должно превышать 220 символов;

· ключевое словосочетание желательно вписывать дважды (первый раз – в прямом вхождении, второй – в разбавленном, морфологическом или с использованием синонимов).

Дескрипшин, как и тайтл, должен привлекать пользователей, побуждая их перейти из поиска на сайт.

Если на сайте мета-данные description не заполнены или же включают данные, не релевантные поисковым запросам, Яндекс «вырвет» со страницы кусок текста, в котором есть вхождения запроса. И не факт, что это будет самая привлекательная часть контента…

Поэтому либо пишем привлекательный и оптимизированный под нужные запросы дескрипшин, либо готовим для Яндекса один абзац текста (желательно, в самом начале документа), в котором будут соблюдены все вышеописанные условия. Но нужно учесть, что роботы ПС Google негативно относятся к непрописанным meta description.

Keywords

Keywords (ключевые слова) – это список запросов, по которым продвигается страница веб-ресурса. Как и другие мета-данные, кейвордс вносятся в код страницы и предназначаются для передачи данных о ней поисковым роботам.