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

Что-то новенькое

Ресурс потеряется среди огромного количества сайтов, если его контент — это трижды по девять раз перепечатанные статьи, картинки из «Яндекса» и популярные видео «Как правильно завязать галстук».

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

Добавьте инфографику, фотографии или картинки — мир интернета основан на визуальных образах, не полагайтесь только на хороший текст.

Это красиво

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

Абзацы. Берегите терпение читателя и помогайте: абзацы делают текст привлекательным и удобным для чтения. Тег для абзаца — <p>.

Заголовки. <h1> может быть только один. Поисковые системы обращают внимание заголовки, поэтому добавьте на страницу <h2>, <h3> — всего шесть видов заголовков.

Таблицы. Для чего? Например, чтобы сравнить цены или модели. HTML-код для создания таблицы:

• <table> — начало таблицы,
• <tr> — начало строки,
• <td> первая ячейка < /td> — первый столбец,
• <td> вторая ячейка </td> — второй столбец,
• </tr>— конец строки,
• </table>— конец таблицы.

Списки. Некоторую информацию удобнее расположить списком — маркированным и нумерованным. Составляя списки, мы снова заботимся о читателе и экономим его время на чтении «простыни». Коды: <ul>, <ol> и <li>. Тег <ol> используется для создания нумерованных списков.

<ol type="1"> — нумерация арабскими цифрами. Используется при отсутствии «Type»;

<ol type="A"> — заглавные буквы;

<ol type="a"> — строчные буквы;

<ol type="I"> — заглавные римские цифры;

<ol type="i"> — строчные римские цифры.

Индексы — смещение символов вверх или вниз, обычно применяется для написания единиц измерений. В HTML предусмотрены два тега: <sup> — для создания верхнего индекса и <sub> — для нижнего.

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

Номера телефонов и почта. Кликабельный номер телефона создаётся с помощью кода href="tel: ", а почта — href="mailto: ". Примеры:

• href="tel:+78124483822"
• href="mailto: info@lemonrain.ru"

Больше картинок

Не секрет, что самые активные пользователи интернета — визуалы, которым картинки помогают принять решение и сформировать доверие к ресурсу.

Изображения товаров, фото «до и после» для услуг, инфографика — простые идеи для картинок. Унифицируйте размер изображений. Маленькие картинки раздражают пользователей, большие долго загружаются и утяжеляют ресурс.

Вставить изображение поможет тег <img>. Используйте изображения до 1 000 px или до 60 Кбайт. Форматы — JPG и PNG (для прозрачного фона).

Оформление

Мы приветствуем команды, в которых работают корректоры и прочие граммар-наци. Даже, если вы не готовы вводить в штат дополнительную единицу, простые правила всё равно надо заучить.

• В тексте ставим кавычки «ёлочки».
• Знак % отбиваем от числа неразрывным пробелом.
• После заголовка не ставим точку.
• Названия на иностранных языках пишем без кавычек.
• Подписываем изображения, потому что не все из пользователей — экстрасенсы.
• В русском языке есть буква Е и буква Ё.
• Тире и дефис — это не одно и тоже. Дефис не отбивается пробелами, поскольку является частью слова.
• Если в конце пункта в маркированном списке стоит точка с запятой, то следующий пункт начинается со строчной буквы.

Надеемся, что статья пригодилась. Если возникли вопросы, пишите или звоните: мы любим поболтать.