Наполнение сайта контентом. Рекомендации по оформлению страниц сайта.

Эффективно для поисковой оптимизации и удобно для пользователей.
Наиболее важные моменты, на которые надо обратить внимание при наполнении сайта контентом, а также на стадии проектирования функционала сайта.

1. Заголовок

Обязательно наличие одного заголовка <h1>
(формат Заголовок 1 или в коде <h1>Текст заголовка</h1>)

*Обратите внимание:
Иногда заголовок формата <h1> генерируется автоматически из названия страницы, если это предусмотрено при разработке сайта и прописано в стилях.

Как проверить есть ли заголовок формата <h1> уже на странице?

  • Нажать ctrl+U на открытой проверяемой странице;

  • Открылся код сайта, где надо найти нужный тег.

  • Нажать ctrl+F и в поисковую строку вписать <h1>.

  • Заголовок найден? Если он отвечает требованиям: оставить и использовать в тексте заголовки меньшего уровня. Не подходит – переписать. Не найден – можно и нужно использовать.

2. Подзаголовок

(формат Заголовок 2 или в коде <h2>Текст заголовка</h2>)

3. Текст

Наполнение сайта текстом:

  • Разбить на смысловые абзацы.

  • По возможности их озаглавить по смыслу (<h3>Текст заголовка</h3>)

  • Часть текста надо структурировать, например, добавив абзацы, нумерованные/маркированные списки.

  • Использовать единое оформление с сайтом (шрифт, размер текста, цвет заголовков и текста).

  • Использовать максимум 3 цвета в тексте.

4. Добавить изображения в текст

  • Размер изображений (для привью - небольших изображений в тексте - лучше использовать изображения, оптимизированные по размеру). В следующем пункте будет описано, как это сделать. Например, подойдет программа irfanview (бесплатная и быстро обрабатывает сразу много изображений). С помощью неё можно быстро уменьшать изображения.

  • Название изображения - alt и title у изображений.

  • Изображения по возможности сделать одинакового размера по ширине и выравнивание по одному (чаще левому) краю, чтобы не было эффекта "забора".

  • Изображения должны быть внутри сайта (нельзя размещать ссылку на картинки, находящиеся на других сайтах)

5. Оптимизация изображений

  • Адрес изображения должен быть статичен и не меняться.

  • Описание картинок могут формироваться из прилегающего к ним текста или атрибутов alt и title тега <img>.

Пример:
alt - Текст из атрибута alt используется для отображения текстового описания, пока изображение еще не загружено или, когда его показ отключен в настройках браузера.
title картинки - для отображения текстовой подсказки при наведении на картинку курсора мыши.

  • Изображения должны быть оптимального размера. Уменьшенные копии (привью) самые легкие, при нажатии на них открывается другое изображение большего размера/качества

  • Название изображения - понятное, описывающее предмет (напр., nazvanietovara.jpg)

6. Добавить, если необходимо, видео на страницу

Закачивать видео не надо на сервер! Лучше предварительно добавить видео в свой канал.
Копируем в YouTube ссылку и вставляем в код страницы (источник - в системе администрирования сайта).

7. Призыв к действию

Добавить Контакты, Звоните и Мы подскажем и т.п.
Или ссылка на продвигаемую страницу (не цикличные).

8. Таблицы

Оформляются с границами, текст выравнен по краям (чаще: текст слева, цифры справа).

9. Ссылки

  • внутри сайта

Размещать 1-3 ссылки со страницы на другие страницы для упрощения навигации пользователя.
Например, если новость о поступлении нового товара - ссылку на товар/подраздел, если описание чего-либо обобщенного - ссылку на каталог и т.п.

  • на внешние источники

Если нужно разместить ссылку на другой сайт (например, грузоперевозчика, партнера или производителя), то ссылку необходимо добавить мета-тег nofollow 
Например, <a href="адрессайта" rel="nofollow">Текст ссылки</a>

 

Таким образом, основное, что должен использовать специалист по наполнению сайта:

 

  • Заголовки

  • Структурированный и единообразно аккуратно оформленный текст и таблицы

  • Изображения / Видео

  • Ссылки для навигации (+закрытые на внешние источники)

  • Призывы к действию

Наполнение сайта контентом должно быть информативно для пользователей и повышать показатели конверсии, а также помогать поисковым роботам правильно индексировать информацию.

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

Лучше применять хотя бы часть из рекомендаций, чем ничего. Придерживайтесь задачи сделать удобный, понятный и полезный сайт для пользователей, используя инструменты веб-мастеров и предложенный алгоритм наполнения страниц сайта текстом.