В этом посте:

• Имена классов CSS не влияют на SEO и не считываются Google как контент.
• Слишком большие файлы CSS могут замедлить загрузку страниц и ухудшить показатели Core Web Vitals.
• Google рекомендует сохранять возможность сканирования CSS для обеспечения корректной визуализации и индексации.

В недавнем выпуске подкаста Google Search Off the Record Мартин Сплитт и Джон Мюллер объяснили, как CSS влияет на SEO.

Хотя некоторые аспекты CSS не имеют никакого отношения к SEO, другие могут напрямую влиять на то, как поисковые системы интерпретируют и ранжируют контент.

Вот что имеет значение, а что нет.

Названия классов не имеют значения для рейтингов

Один из самых очевидных выводов из этого эпизода заключается в том, что имена классов CSS не оказывают никакого влияния на поиск Google.

Сплитт заявил:

«Не думаю. Не думаю, что нас это волнует, потому что названия классов CSS – это просто имена. Они просто назначают элементам конкретный, довольно узнаваемый фрагмент правил таблицы стилей, и всё. Вот и всё. Можно назвать их все «аннотациями». С точки зрения SEO это ничего не изменит».

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

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

Почему контент в псевдоэлементах является проблемой

Хотя имена классов безвредны, команда предостерегла от размещения значимого контента в псевдоэлементах CSS, таких как :before и :after.

Сплитт заявил:

«Идея, повторюсь, – первоначальная идея – заключается в том, чтобы отделить представление от контента. Таким образом, контент находится в HTML, а его представление – в CSS. Поэтому before, after если вы добавляете декоративные элементы, например, маленький треугольник, маленькую точку, маленькую лампочку или маленького единорога – что угодно, – я думаю, это нормально, потому что это декоративно. С точки зрения контента это не имеет значения. Без него всё было бы прекрасно».

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

Этот контент становится невидимым для поисковых систем, программ чтения с экрана и любых других инструментов, которые полагаются на прямой анализ HTML.

Мюллер привел реальный пример того, как это может пойти не так:

«Однажды команда индексации обратилась к нам с требованием связаться с сайтом и потребовать прекратить использование before и after…  Они использовали before псевдокласс для добавления знака номера ко всему, что считали хэштегами. И наша система индексации подумала: было бы здорово, если бы мы могли распознавать эти хэштеги на странице, ведь, возможно, они для чего-то полезны».

Поскольку символы хэштега были добавлены с помощью CSS, они никогда не были видны системам Google.

Сплитт протестировал это вживую во время записи и подтвердил:

«Его нет в DOM... поэтому он не учитывается при рендеринге».

Слишком большой размер CSS может снизить производительность

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

По данным веб-альманаха HTTP Archive за 2022 год, средний размер CSS-файла вырос примерно до 68 КБ для мобильных устройств и 72 КБ для настольных компьютеров.

Мюллер заявил:

«Веб-альманах» сообщает, что каждый год мы видим рост размера CSS, а в 2022 году медианный размер таблицы стилей составил 68 или 72 килобайта. … Они также упомянули, что самый большой из найденных ими файлов весил 78 мегабайт. … Это текстовые файлы».

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

Хотя разработчики могут смягчить это с помощью минимизации и удаления неиспользуемых правил, не все это делают. Поэтому оптимизация CSS – достойный пункт в вашем контрольном списке технического SEO.

Сохраняйте CSS сканируемым

Несмотря на ограниченную роль CSS в ранжировании, Google все равно рекомендует сделать файлы CSS доступными для сканирования.

Мюллер пошутил:

«Согласно рекомендациям Google, CSS-файлы должны быть доступны для сканирования. Должно же быть, тут есть какая-то магия, верно?»

Настоящая причина скорее техническая, чем магическая. Googlebot использует CSS-файлы для отображения страниц такими, какими их видят пользователи.

Блокировка CSS может повлиять на интерпретацию ваших страниц, особенно в плане макета, удобства для мобильных устройств или таких элементов, как скрытый контент.

Практические советы для SEO-специалистов

Вот что этот эпизод означает для вашей практики SEO:

• Прекратите оптимизировать имена классов: ключевые слова в классах CSS не помогут вашим рейтингам.
• Проверьте псевдоэлементы: любой реальный контент, например текст, предназначенный для чтения, должен находиться в HTML, а не в :before или :after.
• Проверьте размер таблицы стилей: большие файлы CSS могут снизить скорость загрузки страницы и показатели Core Web Vitals.
• Сократите всё, что возможно.
• Убедитесь, что CSS доступен для сканирования: блокировка таблиц стилей может нарушить рендеринг и повлиять на то, как Google распознает вашу страницу.

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

«Если изображение является частью контента и вы думаете: «Посмотрите на этот дом, который я только что купил», то вам нужен imgтег изображения или pictureтег, который фактически содержит фактическое изображение как часть DOM, потому что вы хотите, чтобы мы увидели что-то вроде: «Ага, на этой странице есть изображение, которое не просто украшение».

Используйте CSS для оформления и HTML для передачи смысла. Такое разделение удобно как для пользователей, так и для поисковых систем.