В этом посте:
- Имена классов 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 для передачи смысла. Такое разделение удобно как для пользователей, так и для поисковых систем.