Джон Мюллер из Google и Мартин Сплитт говорили чуть менее 40 минут на тему CSS и SEO. Они рассказали, почему файлы CSS имеют значение для SEO, как современные страницы CSS влияют на страницы, а также SEO -последствия имен классов CSS и псевдо -элементов.
Это хорошее прослушивание для большинства технических или даже нетехнических SEO, чтобы слушать, вот встроение:
Вот как Близнецы суммировали разговор:
- CSS и SEO Connection: хотя и не так широко обсуждается, как JavaScript, CSS имеет значение для SEO, в первую очередь относительно того, как сканеры Google интерпретируют и индекс. Руководящие принципы Google рекомендуют сделать файлы CSS ползти.
- Размер файлов CSS:
- Файлы CSS растут в размерах за эти годы. В 2022 году средний размер таблицы стилей составлял около 68-72 КБ.
- Фреймворки часто приводят к более крупным файлам CSS, хотя неиспользованные правила могут быть удалены, а файлы разделяются, чтобы оптимизировать размер.
- Был упомянут экстремальный пример файла CSS 78 МБ, который очень необычен и проблематичен.
- Имена классов CSS и SEO:
- Имена классов CSS не оказывают прямого влияния на SEO. ** Они предназначены исключительно для стиля и не считаются частью видимого текстового контента, который поисковые системы анализируют по ключевым словам или рейтингу.
- Crawlers обычно анализируют HTML для текстового содержимого, отбрасывая атрибуты, такие как имена классов.
- ! Важное правило в CSS:
- «! Важное объявление» переопределяет правила CSS ** **, вынуждая конкретный стиль применять независимо от других конфликтующих правил.
- Это обходной путь для сложных сценариев стиля, но не имеет SEO -последствий.
- Псевдо-элементы (`:: ane` и` :: ater`):
- Эти псевдо-элементы CSS позволяют разработчикам добавлять декоративный контент (например, значки или небольшие символы) до или после элемента, не добавляя его непосредственно в HTML.
- Важно отметить, что контент, добавленный через `:: до` или `:: Pehudo-lements, не включен в модель объекта документа (DOM) и, следовательно, не поднимается системами рендеринга и индексации Google.
- Рекомендация: Используйте псевдо-элементы только для ** декоративных целей **. ** не ** Используйте их для контента, который необходимо индексировать или обеспечивать значимый контекст (например, добавление символа хэштега к словам). Контент, который жизненно важен для значения или контекста, всегда должен быть непосредственно в HTML.
- Единицы Viewport (например, `100VH`):
- Использование таких единиц, как `100vh` (100% высоты видового порта) для таких элементов, как Hero Images может вызвать проблемы с тем, как инструменты предварительного просмотра Google отображают страницу. Благодаря «расширению видоульдоника» во время рендеринга эти элементы могут показаться непропорционально большими в снимках экрана, выталкивая фактический контент из виду.
- Несмотря на то, что вряд ли будет напрямую повлиять на индексацию, если контент все еще находится в DOM, он может усложнять отладки и может указывать на проблему доступности. Ограничение роста с помощью `max-geight ‘является предлагаемым решением.
- Скрытие контента с CSS:
- В то время как в прошлом некоторые пытались скрыть текст, сопоставляя цвет шрифта с цветом фона, это сейчас встречается реже.
- Современные методы укрытия часто включают «дисплей: нет;», который эффективно удаляет элемент из визуальной компоновки и обычно из визуализированного DOM для поисковых систем.
- CSS Images против HTML `IMG ‘TAGS:
- Изображения CSS (свойство фонового изображения) предназначены в первую очередь для ** декоративных элементов **, которые не передают существенный контент. Они не индексируются как изображения поисковыми системами.
- HTML `IMG` или` Tags ‘Picture’ Теги ** должны использоваться для ** изображений контента **, которые являются неотъемлемой частью значения страницы (например, фотографии продукта, изображения в новостной статье, графики). Эти изображения являются частью DOM, могут быть проиндексированы с помощью поиска изображений, и их контекст можно понять с помощью сканеров.
- Философское разделение: всеобъемлющий принцип заключается в том, что CSS предназначен для стиля, а HTML предназначен для содержания. Смешивание этих ролей, особенно путем размещения важного контента в CSS, может препятствовать пониманию и доступности поисковых систем.
- Использование CSS для создания табличных макетов для табличных данных, как правило, является неправильным использованием.
- Для фактических табличных данных использование элементов HTML `Table` предпочтительнее, поскольку они позволяют поисковым системам (и считывателям экрана) распознавать строки и столбцы, облегчая лучшее понимание и индексацию структурированной информации.
Обсуждение на форуме в ХПолем
