В недавнем эпизоде поиска Google из записи подкастМартин Сплитт и Джон Мюллер пояснили, как CSS влияет на SEO.
В то время как некоторые аспекты CSS не имеют никакого отношения к SEO, другие могут напрямую влиять на то, как поисковые системы интерпретируют и ранжируют содержание.
Вот что важно, а что нет.
Содержание
Имена классов не имеют значения для рейтинга
Одним из самых четких выводов из этого эпизода является то, что имена классов CSS не влияют на поиск Google.
Раскол заявлено:
«Я не думаю, что это так. Я не думаю, что мы заботимся, потому что имена классов CSS просто это. Они просто присваивают конкретный несколько идентифицируемый кусочек правил StyleShip, и это все. Это все. Вы можете назвать их всех« Blurb ». Это не будет иметь значения с точки зрения SEO ».
Имена классов, объяснили они, используются только для применения визуального стиля. Они не считаются частью содержания страницы. Таким образом, они игнорируются Googlebot и другими анализаторами HTML при извлечении значимой информации.
Даже если вы питаете HTML в языковую модель или основной гусеницу, имена классов не будут учитываться, если только ваша система не предназначена для чтения этих атрибутов.
Почему контент в псевдо -элементах является проблемой
В то время как имена классов безвредны, команда предупредила о том, чтобы поместить значимый контент в псевдо -элементы CSS, такие как :before и :afterПолем
Раскол заявлено:
«Идея снова — исходная идея — заключается в отделении презентации от контента. Таким образом, содержание находится в HTML, и как она представлена в CSS. Итак, с
beforeиafterесли вы добавите декоративные элементы, такие как маленький треугольник, маленькая точка, небольшая лампочка или как маленький единорог — какое -то время — я думаю, что это нормально, потому что это декоративно. Это не имеет значения в смысле контента. Без этого все равно было бы хорошо ».
Добавление визуальных процветаний является приемлемым, но вставка заголовков, абзацев или любого контента, связанного с пользователем в псевдо-элементы, нарушает основной принцип веб-разработки.
Этот контент становится невидимым для поисковых систем, считывателей экрана и любых других инструментов, которые полагаются на анализ HTML напрямую.
Мюллер поделился реальным примером того, как это может пойти не так:
«Когда -то произошла эскалация от команды по индексации, в которой говорилось, что мы должны связаться с сайтом и сказать им, чтобы они прекратили использование
beforeиafter… они использовалиbeforePseudo Class, чтобы добавить номер знака во все, что они считали хэштегами. И наша система индексации была похожа, было бы так приятно, если бы мы могли распознать эти хэштеги на странице, потому что, возможно, они полезны для чего -то ».
Поскольку символы хэштега были добавлены через CSS, их никогда не видели системы Google.
Splitt проверил его вживую во время записи и подтвердил:
«Это не в доме… поэтому его не поднимают».
Негабаритный CSS может повредить производительности
Эпизод также затронул проблемы с исполнением, связанные с раздутанными таблицами стилей.
Согласно данным Web Almanac Archive Archive HTTP 2022 года, средний размер файла CSS вырос до 68 КБ для мобильных устройств и 72 КБ для рабочего стола.
Мюллер заявил:
«Веб -альманац говорит, что каждый год мы видим, как CSS растут в размерах, и в 2022 году средний размер таблиц стилей составлял 68 килобитов или 72 килобит… они также упомянули, что самый большой, который, как они обнаружили, были 78 мегабат.… Это текстовые файлы».
Такое раздувание может негативно повлиять на основные веб -жизненные возможности и общий пользовательский опыт, которые являются двумя областями, которые являются делать Влияние рейтинга. Структуры и предварительно построенные библиотеки часто являются причиной.
В то время как разработчики могут смягчить это с помощью минификации и неиспользованной обрезки правил, не все это делают. Это делает оптимизацию CSS достойным элементом в вашем техническом контрольном списке SEO.
Держите CSS ползти
Несмотря на ограниченную роль CSS в рейтинге, Google по -прежнему рекомендует сделать файлы CSS.
Мюллер пошутил:
«Рекомендации Google говорят, что вы должны сделать свои файлы CSS ползти. Так что там должно быть какая -то магия, верно?»
Реальная причина более техническая, чем магическая. GoogleBot использует файлы CSS для отображения страниц, как их увидят пользователи.
Блокирование CSS может повлиять на то, как интерпретируются ваши страницы, особенно для макета, мобильной связи или элементов, таких как скрытый контент.
Практические советы для SEO Pros
Вот что означает этот эпизод для ваших практик SEO:
- Прекратите оптимизировать имена классов: Ключевые слова в классах CSS не помогут вашему рейтингу.
- Проверьте псевдо -элементы: Любой реальный контент, такой как текст, предназначенный для чтения, должен жить в HTML, а не в
:beforeили:afterПолем - Аудиторский стиль таблицы: Большие файлы CSS могут нанести ущерб скорости страниц и основные жизненные силы. Обрежьте то, что вы можете.
- Убедитесь, что CSS ползает: Блокировка таблиц стилей может нарушить рендеринг и повлиять на то, как Google понимает вашу страницу.
Команда также подчеркнула важность использования правильных тегов HTML для значимых изображений:
«Если изображение является частью контента, и вы говорите:« Посмотрите на этот дом, который я только что купил », вы хотите
imgтег изображения илиpictureТег, который на самом деле имеет фактическое изображение как часть DOM, потому что вы хотите, чтобы мы видели, ах, так что на этой странице есть это изображение, которое не просто украшение ».
Используйте CSS для стиля и HTML для значения. Это разделение помогает как пользователям, так и поисковым системам.
Послушайте полный эпизод подкаста ниже:
