Google подтвердил, что названия классов CSS не влияют на SEO Мартин Сплитт и Джон Мюллер объяснили, как 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... поэтому он не учитывается при рендеринге». Практические советы для SEO-специалистов Вот что это означает для вашей практики SEO: 1️⃣ Прекратите оптимизировать имена классов: ключевые слова в классах CSS не помогут вашим рейтингам. 2️⃣ Проверьте псевдоэлементы: любой реальный контент, например текст, предназначенный для чтения, должен находиться в HTML, а не в :before или :after. 3️⃣ Проверьте размер таблицы стилей: большие файлы CSS могут снизить скорость загрузки страницы и показатели Core Web Vitals. Сократите всё, что возможно. 4️⃣ Убедитесь, что CSS доступен для сканирования: блокировка таблиц стилей может нарушить рендеринг и повлиять на то, как Google распознает вашу страницу. ❗️Команда также подчеркнула важность использования правильных HTML-тегов для содержательных изображений: «Если изображение является частью контента и вы думаете: «Посмотрите на этот дом, который я только что купил», то вам нужен тег img или тег picture, который фактически содержит изображение как часть DOM. Используйте тег picture, если вы хотите, чтобы мы увидели что-то вроде: «Ага, на этой странице есть изображение, которое не просто украшение».