Правильное наполнение сайта помогает ранжировать ресурс в поисковых системах, а пользователям ориентироваться и находить релевантный контент.
Ресурс потеряется среди огромного количества сайтов, если его контент — это трижды по девять раз перепечатанные статьи, картинки из «Яндекса» и популярные видео «Как правильно завязать галстук».
Поговорите по душам с целевой группой, выясните, какая информация необходима для принятия решения. Если пользователю нужны сертификаты, пишите о сертификатах; если доставка — пишите, где и как.
Добавьте инфографику, фотографии или картинки — мир интернета основан на визуальных образах, не полагайтесь только на хороший текст.
Перед тем, как создавать текстовые страницы и добавлять статьи, изучите правила форматирования.
Абзацы. Берегите терпение читателя и помогайте: абзацы делают текст привлекательным и удобным для чтения. Тег для абзаца — <p>.
Заголовки. <h1> может быть только один. Поисковые системы обращают внимание заголовки, поэтому добавьте на страницу <h2>, <h3> — всего шесть видов заголовков.
Таблицы. Для чего? Например, чтобы сравнить цены или модели. HTML-код для создания таблицы:
Списки. Некоторую информацию удобнее расположить списком — маркированным и нумерованным. Составляя списки, мы снова заботимся о читателе и экономим его время на чтении «простыни». Коды: <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: ". Примеры:
Не секрет, что самые активные пользователи интернета — визуалы, которым картинки помогают принять решение и сформировать доверие к ресурсу.
Изображения товаров, фото «до и после» для услуг, инфографика — простые идеи для картинок. Унифицируйте размер изображений. Маленькие картинки раздражают пользователей, большие долго загружаются и утяжеляют ресурс.
Вставить изображение поможет тег <img>. Используйте изображения до 1 000 px или до 60 Кбайт. Форматы — JPG и PNG (для прозрачного фона).
Мы приветствуем команды, в которых работают корректоры и прочие граммар-наци. Даже, если вы не готовы вводить в штат дополнительную единицу, простые правила всё равно надо заучить.
Надеемся, что статья пригодилась. Если возникли вопросы, пишите или звоните: мы любим поболтать.