Создание текста для SEO-продвижения: верстка и стилистика|Parsing Services

В статье мы рассмотрим оптимизацию кода и контента на сайтах интернет-магазинов. Поговорим об HTML-тегах, влияющих на SEO-оптимизацию и USABILITY при написании текста. А также дадим методику для создания продающего SEO-текста в категориях товаров.

Что такое HTML и его теги.

HTML – это язык гипертекстовой разметки страниц. Тег – это элемент web-страницы, заключенный в угловые скобки. Теги бывают двух видов: закрывающиеся (<тег>содержимое</тег>) и не закрывающиеся (<тег>).

Закрывающиеся теги делятся на два подвида: блочные и строчные. Блочные теги по умолчанию имеют ширину 100% и растянуты на всю страницу. Текст, написанный в блочном html-теге, автоматически имеет перенос на другую строчку. Самые популярные теги:

<div>Безымянный блок</div>

<p>Абзац</p>

<h1>Главный заголовок веб-страницы</h1>

<title>Название вкладки</title>

<blockquote>Цитата</blockquote>

У строчных тегов нет переносов и их ширина равна ширине текста внутри элементов. Самые популярные строчные теги:

<span>Безымянный строчный тег</span>

<a href = “https://www.site.ru”>Ссылка на другую страницу</a>

<strong>Текст в жирном шрифте</strong>

<em>Текст в курсиве</em>

<abbr title = “расшифровка аббревиатуры”>Аббревиатура</abbr>

Встречаются теги, которые не закрываются. У них внутри нет содержимого, закрывающийся тег не нужен. Самые популярные:

<br> - перенос на новую строчку в браузере

<hr> - прямая горизонтальная черта

<img src = “ссылка на фото” alt = “альтернативный текст”> - подключение фотографии к странице

У каждого тега есть обязательные и необязательные атрибуты – это дополнительные свойства html-тегов.

<тег1 атрибут1 = “значение” атрибут2 = “значение” … атрибутN = “значение”>Содержимое</тег1>

<тег2 атрибут1 = “значение” атрибут2 = “значение” … атрибутN = “значение”>

Выше были приведены примеры с тегами A, ABBR и IMG. У некоторых тегов атрибуты обязательные.

<a href = “ссылка на страницу”>описание ссылки</a>

А для некоторых тегов – необязательные атрибуты. Например, добавление красной строки в абзац через атрибут style. Тут используется команда text-indent из каскадной таблицы стилей CSS. Отступается 30 пикселей от левого края.

<p style = “text-indent: 30px”>Абзац</p>

Есть еще одна группа атрибутов, влияющих на перехват JavaScript-событий – это обработчики событий (в нашем примере onclick). Например, при нажатии на кнопку мы можем вызвать команду alert и вывести окно с сообщением.

<button onclick = “alert(‘Сообщение’);”>Кнопка</button>

Для более детального изучения HTML-языка читайте соответствующую литературу.

Объектная модель (DOM) HTML-документа по версии HTML5.

Объектная модель документа (DOM) – это скелет веб-страницы, состоящий из иерархии html-тегов. Схему покажем ниже.

Теги HEAD (мета-данные) и BODY (тело веб-страницы) являются потомками корневого тега HTML. Элементы TITLE, META, LINK - потомки тега HEAD. Теги NAV (навигация), HEADER (шапка страницы), MAIN (главное) и FOOTER (подвал) являются потомками тега BODY.

Расположение остальных элементов веб-страницы располагаются в четырех областях тега BODY - в навигации, в шапке, в главном и в подвале страницы. Такое расположение элементов благоприятно скажется на алгоритмах ранжирования в поисковой системе.

Ни в коем случае не рекомендуется использовать вместо тегов NAV, HEADER, MAIN и FOOTER конструкции с тегами DIV.

<div class = “nav”>Навигация страницы</div>

<div class = “header”>Шапка страницы</div>

<div class = “main”>Главное содержимое страницы</div>

<div class = “footer ”>Подвал страницы</div>

Безымянный тег DIV не несет никакой нагрузки на поискового робота. Я встречал на практике сайты, которые написаны на одних DIV и SPAN. Даже основные SEO-заголовки H1, H2 и H3 были в тегах DIV. Когда я поправил верстку в шаблонах страниц, на сайте появился трафик.

Метаданные, влияющие на SEO-продвижение.

К метаданным относятся все теги, которые являются потомками тега HEAD. Сначала расскажем о двух тегах, содержимое которых видят пользователи в поисковой системе. Эти теги составляют так называемый сниппет.

Сниппет – это заголовок вкладки + краткое описание страницы, которые располагаются в выдаче поисковой системы (SERP).

Заголовок вкладки состоит из поискового запроса определенной частоты + коммерческое предложение.

<title>Поисковый запрос + коммерческое предложение</title>

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

<title>Кроссовки Adidas Tensaur RUN 2.0 K, размер 38 – купить в интернет-магазине Lamoda</title>

До знака “тире” у нас идет поисковый низкочастотный запрос, а после – коммерческое предложение.

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

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

<title>Кроссовки Adidas – купить в интернет-магазине Lamoda</title>

А для товарной группы “кроссовки” будет высокочастотный запрос.

<title>Кроссовки – купить в интернет-магазине Lamoda</title>

Поисковые системы рекомендуют для тега TITLE использовать 10 – 70 символов текста с пробелами. В большинстве случаев так не получается, потому что используется на конце коммерческий хвост. Если заголовок страницы слишком большой, то поисковая система урежет его. Тем не менее, использование слова “купить” может значительно увеличить вам конверсию на сайте.

Конверсия K – это отношение покупок одного товара S к общему объему переходов пользователей на страницу Q. И чем она больше, тем выше у Вас процент продаж.

K = S/Q * 100

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

S = -(Q_{n - 1}/2) * (e^-(z²/2) * cos(Q_{n - 1}) - 1) = log₂ Q, где 0 ≤ z ≤ 1

Откуда, Q_n-1 – это количество переходов на страницу за предыдущий месяц, z – математическое ожидание, рекомендуется от 0.37 до 0.99 использовать.

Прогнозируемый параметр S является информационной энтропией от параметра Q и вычисляется по неявной формуле Хартли:

S = log₂ Q, где Q = 2^S

Прогнозируемая конверсия К будет равна отношению прогнозируемого S к 2^S или log₂ Q к Q.

K = S/2^S * 100 = log₂ Q/Q * 100

Наш числовой фильтр – это мощный инструмент прогнозирования SEO-трафика. Он нашел применение в нашей основной деятельности - в парсинге сайтов и даже в экономических расчетах денежных средств.

Рассмотрим другой тег, являющийся элементом сниппета – это DESCRIPTION. Мета-описание включает в себя поисковый запрос из тега TITLE + короткое описание страницы.

Поисковые системы рекомендуют заполнять содержимое атрибута content от 160 до 300 символов. В коротком описании страницы рекомендуется упомянуть название Вашего интернет-магазина.

Для карточки товара рассмотрим конструкцию:

Для товарной группы с брендом.

С мета-описанием не все так просто. Если поисковая система посчитает описание не релевантным, то она сгенерирует его из текста на странице и вставит в сниппет.

Слова в тегах TITLE и DESCRIPTION должны упоминаться в тексте страницы, как ключевые слова для продвижения сайта. Однако помните, что переоптимизация ключевыми словами может привести к санкциям в поисковой системе – к таким, как Баден-Баден в Яндексе.

Баден-Баден – это алгоритм Яндекса, который делится на два типа – документальный и доменный.

Документальный Баден-Баден понижает ключевые запросы на 10-20 позиций. Чтобы не попасть под его санкции, нужно чтобы текст давал содержательную информацию пользователям без злоупотребления ключевыми словами.

Доменный баден-баден обычно показывается в Яндекс-Вебмастере в разделе “Переоптимизация”. Ошибка выскочит при диагностике проблем. Позиции сайта падают по всем запросам. Рекомендуется не перечислять ключевые слова через запятую на сайте – такие тексты называются спамными.

Далее поговорим о теге LINK, который подключает к странице сайта различные файлы или делает перелинковку на другую страницу. Для SEO стоит выделить несколько тегов:

Первый – подключение внешней каскадной таблицы стилей CSS для стилистики текста и HTML-объектов, влияющих на юзабилити и поведенческие факторы на сайте.

Второй тег – каноническая ссылка, влияющая на борьбу с дублями и зеркалами на сайте. Если не использовать этот тег, то в яндекс-вебмастере могут вылезти ошибки с дублями страниц.

Третий – подключение иконки FAVICON для узнаваемости сайта. Кстати третий тег – является частью сниппета. Появляется в поиске рядом с заголовком и описанием иконка. Рекомендуется делать иконку размером 120x120 пикселей.

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

На сайтах с мобильной версткой на страницах используется мета-тег окна просмотра viewport.

Вот мы подошли к тегу, который не советуем использовать на своих сайтах. Он устарел давно. Его использовали черные и серые SEO-специалисты для продвижения своих сайтов ранее недобросовестно, теперь поисковые системы его не учитывают. Использование такого тега может скорее навредить сайту, чем дать плюс в продвижении.

Ранее мы сообщали о доменном Баден-Баден, который бьет по всем позициям, если будете использовать в тексте спам ключевыми словами. Это как раз тот самый случай.

HTML-теги в теле BODY, влияющие на SEO-продвижение.

Все закрывающиеся блочные и строчные HTML-теги внутри тела страницы влияют в той или иной степени на SEO-продвижение. Некоторые незакрывающиеся теги также оказывают логическую нагрузку на поискового робота. Ниже рассмотрим наиболее часто применяемые теги в SEO-продвижении.

Теги DIV и SPAN.

DIV – безымянный блочный тег, а SPAN – безымянный строчный тег. Для поискового робота эти два тега не представляют никакой логической нагрузки. Но DIV и SPAN влияют на визуальное восприятие посетителя сайта и улучшают показатели USABILITY, что заставляет пользователя задержаться на странице более чем на 15 секунд и улучшает показатели поведенческих факторов в SEO-продвижении.

Тег DIV служит для создания блоков на сайте, например рекламный блок или разделение страницы на несколько частей. Тег SPAN – для выделения некоторого куска текста и придания ему CSS-стиля.

DIV и SPAN обычно используют внутри себя атрибуты class, style, id. К ним подключаются стилистические свойства CSS3.

<div class = “stylediv”>Содержимое</div>

<div style = “height: 300px; width: 50%; border: 10px solid orange;”>Содержимое</div>

<span id= “stylespan”>Кусок текста</span>

<span style = “color: red; font-weight: bold; font-style: italic;”>Кусок текста</span>

Покажем и CSS-свойства внешней каскадной таблицы стилей.

.stylediv {

height: 300px;

width: 50%;

border: 10px solid orange;

}

#stylespan {

color: red;

font-weight: bold;

font-style: italic;

}

Как уже ранее говорилось, DIV и SPAN не оказывают прямого воздействия на поисковых роботов Яндекса или GOOGLE, но улучшают визуальное восприятие пользователем страницы сайта.

Заголовки H1-H6.

Первый и самый важный заголовок H1 является названием темы всего контента, который располагается под этим заголовком до подвала (FOOTER) страницы. Он похож на ранее описываемый нами тег TITLE, только без коммерческого хвоста. Тег H1 должен быть одним единственным на страницу. В нем должен быть поисковый запрос, который содержится в HTML-теге TITLE.

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

<h1>Кроссовки Adidas Tensaur RUN 2.0 K, размер 38</h1>

Для категории товаров H1 с определенным брендом в заголовке будет среднечастотный запрос.

<h1>Кроссовки Adidas</h1>

Заголовок у общей категории “Кроссовки” будет с высокочастотным обобщающим запросом.

<h1>Кроссовки</h1>

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

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

Если сравнивать заголовки HTML с теми, что есть в любой книге, то H1 – это название книги, H2 – ее тема, а H3 – пункт темы.

<h1>Кроссовки Adidas Tensaur RUN 2.0 K, размер 38</h1>

<h2>Преимущества кроссовок Adidas Tensaur RUN 2.0 K</h2>

<h3>Достоинства кроссовок Adidas Tensaur RUN 2.0 K</h3>

<h3>Недостатки кроссовок Adidas Tensaur RUN 2.0 K</h3>

Заголовок H1 должен быть только один на страницу. Заголовки H2 и H3 рекомендуется сделать от двух штук на страницу. После каждого заголовка необходимо написать от 600 до 800 символов текста желательно.

Заголовки H4 – H6 меньшее влияние оказывают на поискового робота, поэтому ими можно воспользоваться в подвале сайта. Они не обязательны на сайте. К ним нет каких-то строгих правил.

Абзацы и шрифт.

Абзацы – это куски текста на странице, помеченные блочным закрывающимся тегом P. Внутри находятся предложения, в которых могут быть высокочастотные, среднечастотные и низкочастотные запросы. Если в заголовках эти запросы должны быть в точности, как в Яндекс Вордстате – то в абзацах эти запросы могут склоняться по любому окончанию на конце слова.

<p>Любой текст</p>

HTML-теги STRONG и EM также часто используют в тексте. STRONG – это жирный текст, EM – курсив. Это строчные теги, которые оборачивают какое-то слово или словосочетание в предложении.

<p>Любой текст <strong>жирным шрифтом</strong></p>

<p>Любой текст <em>курсивом</em></p>

Но надо сказать, что эти теги при неправильном использовании могут навредить продвижению сайта. В них выделяют обычно ключевые слова из Яндекс Вордстата, которые не вошли в мета-теги TITLE и DESCRIPTION, а также в H1. Рекомендованное использование этих тегов в сумме STRONG, EM или STRONG + EM – должно быть не более трех на страницу. Лучше замещать их на CSS-стили в теге . О CSS-стилях поговорим в разделе “Стилистика текста для USABILITY”.

Нумерованные и маркированные списки.

Эти HTML-теги служат для разбавления полотна текста на списки и придания ему более читабельный вид. Они делятся на нумерованные (блочный тег OL) и маркированные списки (блочный тег UL). Элементы списка помещаются в блочный тег LI - потомок тегов UL или OL.

Нумерованные списки пишутся через тег OL.

<ol>

<li>Пункт 1</li>

<li>Пункт 2</li>

…

<li>Пункт N</li>

</ol>

Маркированные списки пишутся через тег UL.

<ul>

<li>Пункт 1</li>

<li>Пункт 2</li>

…

<li>Пункт N</li>

</ul>

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

В результате использования нумерованных списков, рядом с пунктами будут стоять числа. А если использовать маркированные списки – будет стоять маркер.

Таблицы HTML.

Таблицы часто используются на страницах, особенно в карточках товаров с характеристиками. Когда я делаю парсинг сайта, то в основном вытягиваю в базу данных характеристики и их значения для определенного товара. HTML-таблица состоит обычно из заголовка (CAPTION), табличной шапки (THEAD, TR, TH), тела таблицы (TBODY, TR, TD) и подвала (TFOOT, TR, TD).

Атрибут border = “1” включает границы ячеек в таблице, width = “50%” устанавливает ширину ячейки, width = “100%” – ширину таблицы. Если установить ширины ячеек только в шапке таблицы, то ячейки в теле и подвале будут такой же ширины. Ширина последней ячейки, на которую не ставится атрибут width в шапке таблицы, определяется автоматически и соответствует нижеизложенной формуле.

w_k = 100 - ∑w_i, где 1 ≤ i ≤ k - 1

Откуда w_i – ширина i-той ячейки таблицы в шапке страницы, k – последняя незаполненная значением ширины ячейка.

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

Перелинковка страниц.

Частенько в статьях интернет-магазинов может быть перелинковка на товары, о которых был написан текст в самой статье. Перелинковка – это отсылка на карточку товара, чтобы человек перешел по ссылке и приобрел товар. Ключевое слово оборачивается в строчный тег с обязательным атрибутом href.

<p>Купите <a href = “/catalog/adidas/adidas-tensaur-run-2-0-k-razmer-38.php”>кроссовки Adidas Tensaur RUN 2.0 K, размер 38</a> в интернет-магазине Lamoda по низким ценам.</p>

Во-первых, это возможность перейти из самой статьи на товар в саму карточку. Во-вторых, если правильно сделать перелинковку, то поисковая система Google начнет поднимать ваш Page Rank – алгоритм ссылочного ранжирования.

Схема передачи ссылочного веса Page Rank

На рисунке выше показано стрелочками передача ссылочного веса от внешних ресурсов (vk, Дзен и youtube) на карточку товара – это внешние ссылочные факторы. А внутри сайта ссылочный вес передается по треугольнику – главная страница, статья о товаре, карточка товара.

Чем больше ресурсов ссылается на карточку товара, тем выше она будет в поисковой выдаче и востребованной для посетителей сайта. Page Rank рассчитывается по следующей формуле:

PR = q + p * ∑P_i/∑Q_j, где 0 ≤ i или j ≤ +∞

Откуда: q – информационная энтропия, влияющая на затухание ссылочного веса от другого источника информации к исследуемой странице, равна по умолчанию 0.25; p – затухание Page Rank на коэффициент q, равный по умолчанию 0.75; ∑P_i – объем исходящих ссылок; ∑Q_j – объем входящей ссылочной массы

Информационная энтропия вычисляется по формуле Хартли, где S – количество связей между исследуемой страницей и другими источниками. В нашем случае, S = 4 – отдача ссылочного веса на внутреннюю страницу, принятие ссылочного веса с внутренней страницы, отдача ссылочного веса на внешнюю страницу и принятие ссылочного веса с внешней страницы.

q = 1/2^S * log₂ 2^S = 1/2⁴ * log₂ 2⁴ = 1/16 * log₂ 16 = 4/16 = 0.25

Затухание Page Rank – это потеря Page Rank от его полного объема в 100%.

p = 1 - q = 1 - 0.25 = 0.75

Если в теге A стоит атрибут rel=”nofollow”, то такая ссылка Page Rank не передает. Например, если в статье указана ссылка на интернет-магазин Lamoda

<a href = https://www.lamoda.ru/women-home/” rel = “nofollow” target = “_blank”>Lamoda</a>

Тогда количество связей от нее снижается на 1, то есть S = 4 – 1 = 3: передача ссылочного веса на внутреннюю страницу; прием ссылочного веса с внутренней страницы; прием ссылочного веса с внешней страницы. Однако, не будет отдачи ссылочного веса на внешний ресурс. Значение в таком случае будет q = 0.375, а p = 0.625.

Если закрыть страницу в robots.txt от индексации, то количество связей передачи Page Rank будет равно нулю, а коэффициент затухания Page Rank от полного его объема будет равен полному его объему или 1.

Disallow: /404.html

Для этого случая Page Rank никому передаваться не будет, а также приниматься с других источников: PR = 0, q = 0, p = 1, ∑Pi = 0.

Внедрение фотографий.

В Яндексе и Google существуют роботы-колдунщики, которые индексируют любые фотографии на сайтах по альтернативному тексту. Картинки внедряются в тег IMG с обязательными атрибутами src = “ссылка на фото” и alt = “Альтернативный текст”.

Альтернативный текст описывает то, что изображено на фотографии. Он также должен соответствовать поисковому запросу из Яндекс Вордстат.

Стилистика текста для USABILITY

Для того чтобы Ваш сайт было приятно просматривать, используют внешние или внутренние каскадные таблицы стилей CSS3 для HTML-тегов. Так как статья у нас о текстовых факторах, то и говорить будем только о придании красоты тексту. Опускаем блоки и другие объекты – это вы можете изучить самостоятельно в соответствующей литературе.

Внутренняя CSS3 для контент-менеджеров.

Контент-менеджер обычно работает в админке сайта CMS и не имеет доступа к FTP-клиенту, следовательно, и права у него уменьшены. Он может работать только в текстовом редакторе, куда он на выбор забивает HTML-теги с текстом и картинками или графически это делает, как в Microsoft Word.

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

<p style = “text-indent: 30px; font-family: verdana;”>Кусок текста</p>

У такого способа есть недостатки – например, если хочеться сделать подцветку при наведении на текст, то это не получится. Для этого нужно использовать селектор html-тега P с псевдоклассом hover, а это возможно только для разработчиков – простому смертному это недоступно. Использование любых селекторов доступно только для разработчиков.

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

<p class = “text”>Кусок текста</p>

let ptext = document.querySelector(‘.text’).style;

ptext.color = ‘blue’;

ptext.textDecoration = ‘underline’;

ptext.cursor = ‘pointer’;

</script>

Однако, не обольщайтесь – я встречал CMS, в которых стоит ограничение на использование тега SCRIPT. С 1С-Битрикс в моем случае пронесло.

Внутренняя CSS3 для разработчиков.

Разработчики могут использовать по желанию внутреннюю каскадную таблицу стилей внутри страницы HTML. Внутри тега-родителя HEAD может прятаться тег STYLE, но не обязательно. В нем можно делать все: прописывать селекторы, медиа-стили для мобильной верстки и многое другое.

<style>

BODY {margin: auto; width: 95%; padding: 1%;}

#id-text {text-decoration: none; color: red;}

@media and all(min-width: 1000px) { {/*Оптимизация под мобильное устройство*/}}

</style>

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

Внешняя CSS3 для разработчиков.

Внешняя каскадная таблица стилей подключается тегом LINK к метаданным страницы внутри тега HEAD одной строчкой и вся прописывается в отдельном файле с расширением "css".

Файл style.css помещается в отдельную папку под названием “css” в корне сайта. Подключается ко всем страницам сайта. Обладает точно такими же свойствами, как и внутренняя таблица стилей для разработчиков.

Селекторы CSS

Селекторы CSS делятся на: селекторы тегов, селекторы атрибутов, селекторы классов, селекторы идентификаторов.

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

P {color: blue; text-indent: 30px;}

Чтобы текста всех ссылок, внутри которых есть атрибут target = “_blank”, были в верхнем регистре – рекомендуется воспользоваться селектором этого атрибута.

[target=blank] {text-transform: uppercase;}

Чтобы все теги с атрибутом class = “name” были шириной 100% и высотой 300 пикселей, воспользуемся атрибутом классов.

.name {width: 100%; height: 300px;}

А вот с атрибутом идентификаторов не все так гладко, как может показаться на первый взгляд. HTML-тег с атрибутом id должен быть единственным на страницу. В противном случае, валидация кода HTML может оказаться под угрозой. С виду все будет работать, но для поисковых систем – это будет сайт с ошибками.

Если хотим, чтобы тег с атрибутом id = “name” был подчеркнутым снизу, то воспользуемся селектором идентификаторов.

#name {text-decoration: underline;}

Псевдоклассы CSS

Использование псевдоклассов придает HTML-объектам динамичности. В тексте обычно используют hover, nth-child, first-letter.

Чтобы при наведении мышкой на объект, его видоизменить – используют псевдокласс hover. В нашем случае кнопка будет менять свой цвет и появится палец вместо курсора.

BUTTON {background-color: green; color: white; cursor: pointer;};

BUTTON:hover {background-color: gold; color: navy;}

У псевдокласса nth-child есть два значения – это even и odd. Значение even – четные номера элементов, odd – нечетные. Вместо этих значений можно внедрить число или выражение.

Если Мы хотим, чтобы все нечетные строки в таблице были серого цвета и текст синего, то воспользуемся псевдоклассом

TABLE TBODY TR:nth-child(odd) {background-color: gray; color: blue;}

Псевдокласс first-letter применяется обычно для первого символа текста. Первый символ у всех абзацев сделаем высотой 30 пикселей и красным.

P:first-letter {font-size: 30px; color: red;}

Это далеко не все псевдоклассы. Обо всех изучайте подробно соответствующую литературу об HTML5 и CSS3.

Полиморфизм селекторов CSS

Полиморфизм селекторов – это иерархическая наследственность селекторов относительно DOM-модели объектов HTML. Например, покажем для таблицы полиморфизм селекторов тегов.

TABLE {}

TABLE CAPTION {}

TABLE THEAD {}

TABLE THEAD TR {}

TABLE THEAD TR TH {}

TABLE TBODY {}

TABLE TBODY TR {}

TABLE TBODY TR TD {}

TABLE TFOOT {}

TABLE TFOOT TR {}

TABLE TFOOT TR TD {}

В вышеприведенном примере на странице только на HTML-таблицы наносятся CSS-стили. Другие элементы не видоизменяются.

Пример для нумерованных списков:

OL {}

OL LI {}

Пример для маркированных списков:

UL {}

UL LI {}

Вместо селекторов тегов могут быть и селекторы классов .name-class, селекторы атрибутов [name=znachenie] или селекторы идентификаторов #id-name по точно такой же схеме.

CSS-команды, применяемые в теле селекторов для стилистики текста.

Любая CSS-команда пишется по образцу css-стиль: значение; - основные команды сведем в таблицу.

Цвет текста, преимущественно на английском языке.	color: цвет
Нижнее подчеркивание/отключить подчеркивание	text-decoration: underline/none;
Размер шрифта в пикселях	font-size: ЧИСЛОpx;
Тип шрифта (подсказка в Microsoft Word)	font-family: название_шрифта;
Жирный шрифт	font-weight: bold;
Шрифт курсив	font-style: italic;
Текст с красной строки	text-indent: 30px;
Все буквы в верхнем регистре	text-transform: uppercase;
Размещение текста по центру/слева/справа	text-align: center/left/right
Маркер списка LI обтекается текстом/выходит за пределы текстового блока	list-style-position: inside/outside
Ширина объекта в процентах или пикселях	width: ЧИСЛО%/ЧИСЛОpx
Высота объекта в пикселях	height: ЧИСЛОpx

Контент-менеджер использует эти элементы внутри атрибута style.

<тег style = “команда1: значение; команда2: значение; …; командаN = значение;”>Содержимое</тег>

А разработчик – внутри внешней каскадной таблицы стилей или внутренней тега <style> внутри селекторов.

Чего делать нельзя, чтобы не получить санкции от поисковой системы?

В плане SEO для CSS3 есть ограничения – видимость текста на странице. Шрифт должен быть хорошо виден человеческому глазу и не быть менее 14px.

font-size: 14px;

Важно, чтобы цвет текста не был слит с окружающим фоном. Убедитесь, что команды background-color и color разных цветов. Текст должен быть хорошо заметен на фоне и не быть слишком маленьким.

Валидация кода HTML

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

Вбейте ссылку на страницу и нажмите кнопку Check. После того, как он Вам покажет список ошибок – их нужно исправить. Исправлять рекомендуется не только ошибки, но и предупреждения. Чистый код – это залог успешной SEO-оптимизации.

Что дальше?

Дальше я планирую создать ряд статей о SEO-оптимизации, так как судя по спросу - они заходят моей аудитории на ура. SEO-оптимизация - это комплекс работ по поисковому продвижению и оптимизации сайта. Говорить тут можно много. Всех секретов в одной статье не раскрыть.

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

Основная дейтельность моего сайта - это парсинг. Он тоже играет роль в SEO. Благодаря ему можно набить свой интернет-магазин товарами в кротчайшие сроки и поднять конверсию в продажах. Заказать парсинг любого сайта Вы можете на главной странице сайта Parsing Services.

Создание текста для SEO-продвижения: верстка и стилистика.

Оглавление

Что такое HTML и его теги.

Объектная модель (DOM) HTML-документа по версии HTML5.

Метаданные, влияющие на SEO-продвижение.

HTML-теги в теле BODY, влияющие на SEO-продвижение.

Стилистика текста для USABILITY

Валидация кода HTML

Рекомендации к написанию SEO-текста

Что дальше?

Блог статей

Простой алгоритм для сокращения наименований для вайлдберриз и Авито

Прогноз трафика определенного поискового запроса на месяц вперед

Как бороться с ботами на сайте?

Пример парсинга курса валют - видео

Как удалить дубли технических характеристик товаров в базе данных сайта?

Парсинг карточек товаров и добавление их в Озон

Разбор парсинга сайта poizonshop

Создание текста для SEO-продвижения: верстка и стилистика

Как собрать смету по парсингу?

Вероятностный поиск по поисковой фразе