Как писать статьи: оптимизация и оформление
Здравствуйте, читатели блога Webvim. Не знаете как правильно писать статьи для сайтов и блогов в интернете? Не беда! Сегодня я расскажу про правила оформления текста, которые использую сам. SEO оптимизация позволяет поисковым системам лучше понимать содержание статьи и повышает шанс занять высокие позиции в выдаче. Без правильной разметки действие других факторов ранжирования будет сведено к минимуму. Итак, разделим их на две части: логическую и визуальную. Логическая — передает смысл, визуальная — делает текст удобным для читателя.
Заголовки
Заголовки служат для разделения статьи на смысловые блоки как для читателя, так и в качестве seo оптимизации для поисковиков. Это теги h1 — h6. Я использую только h1, h2 и h3, дробить текст больше — не было необходимости.
- h1 — основное название статьи;
- Не более 1 тега h1 на страницу;
- Для подзаголовков используем h2 и h3;
- Соблюдаем иерархию (внутри h3 не может появиться h2 и т. д.);
- В конце заголовка точку не ставим;
- После каждого заголовка идут минимум 2 абзаца.
Рекомендую использовать в заголовках ключевики, по которым продвигаем статью, естественно, в разумных пределах.
Не забываем про визуальное оформление заголовков в статье. Читатель, глянув на текст, должен сразу их заметить:
- Используем разный размер шрифта: чем выше по уровню заголовок, тем больше шрифт;
- Делаем отступ от заголовка. Он не должен сливаться с текстом;
Списки
Если мы перечисляем 3 и более предметов — рекомендую использовать списки. Они бывают нумерованные (ol) и ненумерованные (ul). Намного чаще использую вторые.
Согласитесь, вариант со списком выглядит лучше.
Еще одна частая ошибка блогеров — использование вместо списка обычных абзацев с символами тире или минуса. Визуально это еще можно переварить, но для SEO — это полный ноль!
Если кратко, то:
- Не пишем тире и минус для маркеров, маркеры появятся автоматически;
- В конце каждого пункта в списке ставим точку с запятой, кроме последнего — там точка;
- Делаем отступ от самого списка (ul) не меньше, чем у абзацев.
Ссылки
Правила оформления ссылок в тексте еще проще: сделайте так, чтобы читатель понял что это ссылка. Как ссылки выглядят у меня:
- Выделена цветом отличным от цвета текста (пример ссылки);
- Ссылка реагирует на наведение (меняет цвет, появляется/исчезает подчеркивание);
- Не использую подчеркивание для других элементов.
Последний пункт напрямую к ссылкам не относится, но крайне важен! Еще с тех времен, когда все ссылки имели подчеркивание, у пользователей в подсознании заложено, что клик по любому элементу с подчеркиванием перенесет нас на другую страницу, т. е. это активный элемент. Сейчас часто встречаю сайты, на которых подчеркнуты заголовки — убирайте! Этим вы вводите своего читателя в заблуждение, да и визуально это утяжеляет текст.
На современных сайтах встречал ссылки без подчеркивания, просто выделенные цветом — хотя, по мнению некоторых гуру ссылка обязана быть подчеркнута, я допускаю такое оформление.
Абзацы
Вроде что может быть проще абзацев, но, судя по тем сайтам, что я редактирую на работе — это частая ошибка. Порой текст вообще не разбивают на абзацы. Еще чаще отступ между двумя абзацами делают с помощью пустой строки.
- Разбиваем весь текст на абзацы;
- Делаем отступ между ними с помощью стилей css.
Картинки
Что делаем с картинками:
- Оптимизируем их для web;
- Добавляем описание к картинке alt и title — это привлечет посетителей с поиска по картинкам;
- Задаем отступ картинке, чтобы она не соприкасалась с текстом.
Длинный текст без картинок выглядит монотонно, не заставляйте посетителя засыпать за чтением.
Эти простые правила применимы как к автономным блогам, так и к сервисам Livejournal, Blogger и подобным.
P. S. Если я забыл про какой-то элемент — напишите мне об этом, я добавлю. Удачи вам!
Надо же, много полезного узнала. Оказывается, делаю ошибки в оформлении. По поводу абзацев и тире учту, частенько так делаю. Только вот небольшая ремарка, решать вам, конечно. Шрифт ведь тоже имеет значение, вот сейчас пишу и кажется, что делаю ошибки, а сам текст приходится перечитывать из-за плохой его видимости. Учтите это для себя). Спасибо, репост).
Здравствуйте, Гузель.
Вам плохо виден шрифт в комментариях? Проверял в разных браузерах при верстке — везде читаемо. Буду еще тестить, спасибо за замечание.
Алексей, я просто пишу вам, как читатель. Вот у вас шрифт с засечками. Он красивый, необычный, конечно, но для чтения не очень удачный, вот о чём я). Вот, например, буква «Е» — это то ли «О», то ли «С». Смотрите сами, конечно, но мне лично читать неудобно, напряжно).
Спасибо что предупредили, буду думать как решить проблему. Не могли бы вы прислать скриншот как у вас выглядит текст?
Мне еще нравятся блоки с содержанием для длинных постов. Удобно переходить к нужной информации в один клик. Разумеется, когда пост длинный.