Google подтверждает, что имена классов CSS не влияют на SEO.

от

Во время недавнего обсуждения в подкасте Google под названием ‘Search Off the Record’, эксперты Мартин Шплит и Джон Мюллер рассказали о влиянии каскадных таблиц стилей (CSS) на поисковую оптимизацию (SEO).

Купил акции на все деньги, а они упали? А Илон Маск снова написал твит? Знакомо. У нас тут клуб тех, кто пытается понять этот цирк и не сойти с ума.

Купить на падении (нет)

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

Вот что важно, а что нет.

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

Одна ключевая мысль из шоу заключается в том, что имена классов CSS не имеют значения для поисковой системы Google.

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

«Я не думаю, что это имеет значение. Я не считаю, что нам есть дело до этого, потому что имена классов CSS — всего лишь имена. Они просто присваивают определённые и немного различимые правила стилей элементам и всё. Это всё. Вы можете назвать их всех „blurb». От SEO-перспективы разницы не будет.»

Имена классов используются только для применения визуального стиля; они не считаются частью содержимого страницы и игнорируются поисковым роботом Googlebot, а также другими парсерами HTML при извлечении значимой информации.

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

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

Рекомендуется избегать размещения важной информации внутри псевдоэлементов CSS, таких как ‘:before’ и ‘:after’, даже если сами эти элементы не представляют угрозы.

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

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

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

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

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

В прошлом была рекомендация от команды по индексации о том, что мы должны связаться с сайтом и попросить их прекратить использование кодов ‘before’ и ‘after’. Они применяли псевдокласс ‘before’, чтобы добавлять знак фунта к тем объектам, которые они считали хэштегами. Однако наша система индексирования считает необходимым идентифицировать эти хештеги на странице, так как это может быть полезно для различных целей.

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

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

Этого нет в DOM… поэтому он не подхватывается рендерингом.

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

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

Основываясь на данных отчета ‘Web Almanac’, подготовленного HTTP Archive в 2022 году, типичный размер файла CSS увеличился до примерно 68 килобайт для мобильных устройств и 72 килобайта для настольных компьютеров.

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

Согласно веб-альманаху, таблицы стилей CSS имеют тенденцию увеличиваться в размере каждый год. В 2022 году медианный размер таблиц стилей варьировался между 68 и 72 килобайтами. Они также обратили внимание на самую большую таблицу стилей, которую нашли — она составляла колоссальные 78 мегабайт. Имейте в виду, что это простые текстовые файлы.

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

Хотя разработчики могут снизить проблемы, минимизируя код и устраняя ненужные правила, не все это делают. Поэтому оптимизация 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 для смыслового содержания. Такое разделение помогает как пользователям, так и поисковым системам.

Прослушайте полную подкаст-эпопею ниже:

https://www.youtube.com/watch?v=l2E3gBDP_qY

Смотрите также

2025-07-25 17:40