• 23.05.2020
• Екатерина Светцова

Если вы проанализируете сайты из Топа поисковой выдачи и посмотрите как оформлен контент, какие теги в контентной части используются, присутствует ли «мусор» в коде, если да, то в каком объеме, как в целом отформатирован текст, то увидите, что чаще в ТОПе, особенно по высококонкурентным фразам, находятся те сайты, которые аккуратно оформляют контент и имеют минимум «мусорного» кода. Я сейчас не говорю о коде в целом или об отдельных файлах JS или CSS, мусор в которых тоже желательно не иметь. Я говорю именно о коде в контенте, и как оформляется сама конкретная статья, услуга, товар, событие или что-нибудь другое (вы же понимаете, как никто, что шапка и футер к этому не относятся?).

Списки

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

Но эти же данные (вступление и однородные члены предложения или однородные придаточные предложения) мы можем представить в другом виде: выносим небольшое вступление и делаем список, в котором один цвет занимает одну строку:

Или так:

В первом случае, данные перечисляются через запятую в одной строке с обобщающим предложением и помещаются в блочный тег <p>. Семантически в html этот тег означает абзац, абзац некого текста, он может состоять из одного предложения, как в данном примере, или из нескольких. Во втором случае мы предполагаем, что данные оформлялись с помощью тега <p> и трех тегов </br> (перенос строки). В коде это выглядит так:

<p>Любимые цвета:</br>
- красный, </br>
- голубой, </br>
- фиолетовый.</p>

Черточка прописывалась нами каждый раз вручную и особой смысловой нагрузки для поисковика не несет, но нам, как пользователям, визуально понятно, что идет перечисление и его легко прочесть, гораздо удобнее, чем просто строку. К тому же первая часть предложения просматривается легче (обобщающее предложение), хотя мы его не подчеркиваем жирным и не оформляем отдельным тегом, например, тегом подзаголовка. Вообще, по правилам типографики обобщающее предложение не выделяется жирным, тогда как заголовкам не нужно двоеточие. Но, мы стремимся выделять обобщающие предложения для легкости сканирования текста пользователем.

Тот, кто изучает поведение пользователей на сайтах, знают, что в основном пользователи прочитывают выделенные визуально части текста: заголовки, подзаголовки, маркировочные или нумеровочные списки, выделение, цитаты, изображения и другое. И только заинтересовавшись, могут прочесть «скучные» абзацы. Поэтому крайне важно структурировать информацию. Но это еще не все. Поисковые системы тоже не против понимать структуру документа. И донести ее им мы можем, используя теги для каждого типа данных. В 1-ом и во 2-ом случае для поисковой системы наше предложение означает – абзац, который может состоять из одного или нескольких предложений. Но мы можем донести до нее, что у нас есть именно перечисления. Для этого мы должны использовать теги: <ul> или <ol>.

Тег <ol> означает упорядоченный нумерованный список, устанавливается последовательность или же его можно использовать тогда, когда вы хотите в дальнейшем ссылаться на элемент списка по номеру. Тег <ul> обозначает тоже список, но без фиксированного порядка, он называется – маркировочный список. Сейчас повсеместно используются точки (буллеты, маркер списка), хотя ранее в учебниках, книгах чаще использовались именно черточки (тире). В нашем примере лучше использовать тег <ul>. Если бы мы публиковали инструкцию, с последовательностью шагов, то правильнее использовать тег <ol>. Используя теги списков, нам уже не нужно самим проставлять черточки, точечки (маркированный список) или цифры (нумерованный список), это за вас сделает браузер. Но сами перечисления обрамляются тегами <li>, а <ul> или <ol> вставляются в начале списка и в конце.

Пример использования тега <ul>:

<p><b>Любимые цвета:</b></p>
<ul>
<li>Красный</li>
<li>Голубой </li>
<li>Фиолетовый</li>
</ul>

Пример использования тега <ol>:

<p><b>Любимые цвета:</b></p>
<ol>
<li>Красный</li>
<li>Голубой </li>
<li>Фиолетовый</li>
</ol>

Работа с заголовками

В SEO важное место занимает работа с заголовком и подзаголовками на странице. Я не зря слово «заголовок» применила в единственном числе потому как для одной страницы заголовок <h1> всегда один. Если наша статья хотя бы больше 1000 знаков мы используем и подзаголовки <h2>, а при больших объемах могут быть и <h3>, <h4>. Обычно уровня <h4> достаточно.

Вернемся к первому основному заголовку, есть 2 правила его использования (основные) и последнее 3-ее — желательное:

1. Он всегда один (для конкретной страницы, а не для сайта в целом).
2. Он находится всегда перед статьей, это как название книги, которую вы сейчас читаете или которая стоит у вас на полке.
3. Не использовать вместе с ним другие теги, например, <b> или <span>. Стили задавайте в CSS.

Подзаголовок <h2> структурно вкладывается в <h1>, он как раздел в вашей книге. Подзаголовок <h3> вкладывается в <h2> и он не может идти следом за <h1>. Например, на вашем сайте есть страница со статьей: «Уход за домашними животными». Это как вы поняли — <h1>. После заголовка идет некоторое вступление – тег <p>, возможно что-то еще, например, <ul> или <ol>, если есть цитата, то мы используем <blockquote> и так далее. После, у нас идет подзаголовок <h2>: «Уход за собаками». Далее текст. После, подзаголовок третьего уровня: «Уход за шпитцами», текст. Еще один: «Уход за терьерами», текст. После мы возвращаемся к подзаголовку второго уровня: «Уход за кошками». После текста вступления – заголовок третьего уровня: «Уход за ангорскими кошками», здесь мы описываем сложности или легкости ухода за кошками данной породы. Далее, еще один подзаголовок того же уровня: «Уход за мейнкунами». И так далее. Структурно это будет выглядеть как оглавление книги:

<h1>Уход за домашними животными</h1>
    <h2>Уход за собаками</h2>
        <h3>Уход за шпитцами</h3>
        <h3>Уход за терьерами</h3>
    <h2>Уход за кошками</h2>
        <h3> Уход за ангорскими кошками</h3>
        <h3>Уход за мейнкунами</h3>

В отличие от книги здесь нет номеров страниц, но если мы имеем дело с большим текстом (лонгридом), нам не помешают якорные ссылки, которые ведут не на отдельную страницу, как при обычной ссылке, а на часть документа, как на одностраничниках. Одностраничники еще называют лендингами, хотя в первоначальном контексте лендинг — не есть одностраничник, а есть — продающая страница, посадочная страница и эта страница необязательно должна быть на сайте единственной.

Как стало понятно из описания выше, структура текста должна быть логичной, использование заголовков и подзаголовков только с целью визуального эффекта — неверный подход. Иногда один и тот же тип подзаголовка используется слишком часто, не неся его предназначения, например, когда выделяются важные мысли из абзаца. Чтобы что-то выделить, лучше использовать другие теги, например, выделения жирным, курсивом или используйте атрибут class в тегах <p> или <div>, прописав стиль отображения в файле CSS.

Мусор в коде

«Мусор» в коде может встречаться и в правильных тегах, например, когда вы вставили тест из Microsoft Word в визуальный редактор админки вашего сайта. Некоторые системы управления контентом автоматически не очищают код от лишних стилей. Поэтому мусор всегда нужно проверять или заполнять все теги вручную самим в режиме редактора. В некоторых админках этот режим называется: Текст или Html. Лишний код обычно состоит из атрибута <style> или тега <span>. Атрибут <style> использовался ранее и в настоящее время считается невалидным. Ранее в него помещалось дополнительное оформление текста: шрифт, цвет текста, размер, выравнивание, отступы и другое, сейчас мы все это убираем в отдельный файл – CSS, который подключается в <head>, и наш код становится меньше, а красота оформления от этого ничуть не страдает. К тому же стили применяются ко многим областям документа — задав шрифт в 16 px для тега <p> весь шрифт, помещенный в этот тег, будет иметь такой размер, и нет нужды прописывать размер для каждого тега опять и опять. Это как мы видим, не только красиво, но и удобно. Хотя я встречала, когда стили не выносились в отдельный файл, а прописывались в самом документе. Я не советую так делать. Старайтесь сократить код в html документе, чтобы ваш контент был не зернышком в пшеничном поле, а цветком в аккуратной клумбе.

На скриншоте мы видим атрибут style для тега <p> и подзаголовков, а также использование в подзаголовков дополнительный вложенный тег <strong>

Изображения

Вопрос: Какой текст сейчас обходится без изображений?

Ответ: Спамный текст.

Именно так считают поисковые системы. Поэтому нужно обязательно их добавлять, не забывая про адаптивность. Иногда в десктопе картинка отображается в меньшем формате, тогда как на планшете растягивается. И если вы загрузили маленькое изображение, исходя из соображений – какой размер показывается на компьютере, такое и грузим, и не более, чтобы картинка не подгружалась слишком долго, на мобильном устройстве вы можете получить или растянутую некачественную картинку, или слишком не красиво выровненное изображение, обтекаемое тонкой струйкой контента. Грузить малые изображения, ориентированные на десктоп было весьма верным подходом лет 5 назад, когда мобильными устройствами пользовались единицы. Но сейчас есть проблема адаптивности. Поэтому, проверяйте, как отображается ваш контент на всех устройствах.

Формат изображений

Лучше всего минимизировать использование формата PNG, так как такие изображения много весят, являются тяжелыми. Когда вам нужно изображение без фона, используйте формат SVG. Также все иконки используйте в этом формате, чтобы на смартфонах они были четкими, без мутностей. Это может показаться странным, но для смартфонов иногда нужно использовать картинки в большем размере и в лучшем качестве. Но если капнуть глубже – вполне объяснимо.

Атрибуты для изображений

Всем SEO-специалистам известен атрибут <alt=” ”>, который присутствует во всех чек-листах и рекомендуется в срочном порядке к заполнению. Прописывайте его, конечно, но не мусорите в нем ключевыми словами. Если на картинке изображена собачка, лежащая на травке, не пишите в <alt> — грумер недорого спб. Описывайте в данном атрибуте только то, что там действительно изображено, чтобы не переспамить и не попасть под фильтр.

Изображения выводятся на страницу с помощью тега img. Адрес, где лежит изображение на сервере задается атрибутом src. Это выглядит так:

<img src=”https://svettsova.com/wp-content/themes/rooma/images/logotip.png” >

Альт прописывается внутри тега img:

<img src="https://svettsova.com/wp-content/uploads/2020/05/skrin-t.jpg" alt="Скриншот сообщения Джона Мюллера">

Если вы хотите, чтобы изображение было кликабельно, нужно тег img поместить внутри тега <a> (тег для ссылки).

<a href="https://svettsova.com"><img src="https://svettsova.com/wp-content/uploads/2020/05/skrin-t.jpg" alt="Скриншот сообщения Джона Мюллера"></a>

Атрибуты: align (выравнивание изображения справа, слева или по-центру), height (высота изображения), width (ширина изображения) лучше всего не использовать. Прописывайте такие данные в CSS-файле, используя атрибут class. Внутри этого атрибута задается произвольное название класса:

class="izobrazhenie"

А в CSS к этому названию прописываются стили, например:

. izobrazhenie  {
    float: right;
    margin: 6px 0 6px 20px;
}

Подпись к изображениям

В газетах, вы, скорее всего, не раз встречали подписи к картинкам или фотографиям. В html это тоже можно сделать, причем так, чтобы поисковая система понимала – подпись относится к конкретной картинке. Зачем сообщать такую информацию поисковой системе? Это позволит вашим изображениям ранжироваться в поиске по картинкам, трафик с картинок тоже бывает и иногда – существенным.

Для реализации подписи вам нужно использовать <figure> и <figcaption>. Само описание задается в <figcaption>.

Код:

<figure>
<img src="https://svettsova.com/wp-content/uploads/2019/10/sezonnost-poiska1.png" alt="График сезонности поисковой активности по запросу плитка">
<figcaption>Сезонность поисковой активности в строительной области</figcaption>
</figure>

Изображение:

В <figure> можно поместить несколько изображений, но <figcaption> (описание) только один.

Другие теги

Термин

Для терминов, основных понятий, глоссариев и иногда даже для вопрос-ответов используются свои теги: <dl>, <dt>, <dd>.

<dl> — основной контейнер, в него вкладывается <dt>, <dd>. <dl> в блоке один, тогда как <dt>, <dd> может быть несколько.

Пример текста:

Что такое title –

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

Что такое description –

это краткое описание html документа. Отображается в коде.

Код:

<dl>
<dt>, Что такое title</dt>  <dd>это тег, которые содержит в себе название документа, отдельной страницы сайта. Его можно увидеть в открытом окне браузере или в сниппете поисковой выдачи.</dd>.
<dt>Что такое  description</dt> <dd>это краткое описание html документа. Отображается в коде.</dd>.
</dl>

Термин, который в тексте встречается впервые

Тег <dfn> выделяет слово, как новое определение. Очень часто такое встречается в научной литературе. Стандартное выделение – курсив.

Пример текста:

Title – заголовок браузера, не должен полностью совпадать с тегом <h1>

Код:

<dfn>Title</dfn> – заголовок браузера, не должен полностью совпадать с тегом <h1>

Ссылка

Куда же в интернете без ссылок, а? Тег <a>, как и многие теги, обязательно имеет пару – ставится вначале и в конце. В атрибут href вставляется ссылка, на которую пользователь перейдет при клике. Полностью код выглядит так:

<a href="сюда вставляется ссылка" >Этот текст кликабельный</a>

Аббревиатура

Прописывается так: <abbr>. С помощью атрибута Title вы можете задать расшифровку термина, которая появляется при наведении на аббревиатуру.

Пример текста:

URL – адрес, указатель ресурса.

Код:

<abbr title="Uniform Resource Locator">URL</abbr>  – адрес, указатель ресурса.

Курсив

Старый добрый курсив реализуется тегом <i>. Особого смысловое значение не имеет.

Важный фрагмент текста

Тег <em>. Стандартно браузер выделяем фрагмент, заключенный в этот тег курсивом. Но в CSS мы можем задать что-то иное, чтобы были разные варианты визуального оформления.

Короткая цитата

Тег <q> помечает фрагмент текста как цитату. Отображается курсивом с кавычками. Может использоваться вместе с атрибутом cite, который указывает на автора цитаты (источник).

<p><q>Мороз и солнце; день чудесный.</q> стихотворение <cite>А.С.Пушкина</cite></p>

Большая цитата

Если ваша цитата большого объема, то используйте лучше тег: <blockquote>

Выделение жирным

У выделения жирным есть два способа в реализации: тег <b> и тег <strong>. Второй способ предпочтительнее.

Подчеркивание

Тег <u>. Сейчас подчеркивание ассоциируется с ссылками, поэтому лучше их не использовать в других местах текста.

Форматируйте ваш текст не только для посетителей вашего сайта, но и для поисковых систем. Спасибо за внимание!