John Mueller y Martin Splitt de Google hablaron por poco menos de 40 minutos sobre el tema de CSS y SEO. Cubrieron por qué los archivos CSS son importantes para el SEO, cómo los marcos CSS modernos impactan las páginas y las implicaciones de SEO de los nombres de clase CSS y los pseudo elementos.
Es una buena escucha para la mayoría de los SEO técnicos o incluso no técnicos para escuchar, aquí está la incrustación:
Así es como Géminis resumió la conversación:
- Conexión CSS y SEO: aunque no es tan comúnmente discutida como JavaScript, CSS tiene implicaciones para el SEO, principalmente con respecto a cómo los rastreadores de Google interpretan e indexan el contenido. Las pautas de Google recomiendan hacer que los archivos CSS sean rastreables.
- Tamaño de los archivos CSS:
- Los archivos CSS han estado creciendo en tamaño a lo largo de los años. En 2022, el tamaño de la hoja de estilo mediana era de alrededor de 68-72kb.
- Los marcos a menudo conducen a archivos CSS más grandes, aunque las reglas no utilizadas se pueden eliminar y los archivos divididos para optimizar el tamaño.
- Se mencionó un ejemplo extremo de un archivo CSS de 78 MB, que es muy inusual y problemático.
- Nombres de clase CSS y SEO:
- Los nombres de clase CSS no tienen un impacto directo en el SEO. ** Son puramente para el estilo y no se consideran parte del contenido de texto visible que analizan los motores de búsqueda para palabras clave o clasificación.
- Los rastreadores generalmente analizan HTML para el contenido de texto, eliminando atributos como los nombres de clases.
- ! IMPORTANTE` REGLA EN CSS:
- La declaración `! IMPORTANTE ‘anula las reglas CSS ** especificidad **, obligando a un estilo particular a aplicarse independientemente de otras reglas conflictivas.
- Es una solución para escenarios de estilo complejos, pero no tiene implicaciones de SEO.
- Pseudo-elementos (`:: antes ‘y` :: después’):
- Estos pseudo-elementos CSS permiten a los desarrolladores agregar contenido decorativo (como iconos o símbolos pequeños) antes o después de un elemento sin agregarlo directamente al HTML.
- Crucialmente, el contenido agregado a través de `:: antes ‘o` :: After’ Pseudo-Elements no está incluido en el modelo de objeto de documento (DOM) y, por lo tanto, los sistemas de representación e indexación de Google no están recogidos de Google.
- Recomendación: use pseudo-elementos solo para ** fines decorativos **. ** no ** Úselos para el contenido que necesita ser indexado o proporciona un contexto significativo (por ejemplo, agregar un símbolo de hashtag a las palabras). El contenido que es vital para el significado o el contexto siempre debe estar directamente en el HTML.
- Unidades de ventanas gráficas (por ejemplo, `100vh`):
- El uso de unidades como `100VH` (100% de la altura de la visión) para elementos como imágenes de héroes puede causar problemas con cómo las herramientas de vista previa de Google muestran la página. Debido a la «expansión de la visión» durante la representación, estos elementos pueden parecer desproporcionadamente grandes en capturas de pantalla, empujando el contenido real fuera de la vista.
- Si bien es poco probable que afecte directamente la indexación si el contenido aún está en el DOM, puede dificultar la depuración y puede indicar un problema de accesibilidad. Limitar el crecimiento con ‘Max-Height’ es una solución sugerida.
- Ocultación de contenido con CSS:
- Mientras que en el pasado, algunos intentaron ocultar el texto haciendo coincidir el color de la fuente con el color de fondo, esto es menos común ahora.
- Las técnicas de ocultación modernas a menudo implican `visualización: ninguna;`, que elimina efectivamente el elemento del diseño visual y típicamente del DOM representado también para los motores de búsqueda.
- Imágenes CSS vs. Etiquetas HTML `IMG`:
- Las imágenes CSS (propiedad de imagen de fondo) son principalmente para ** elementos decorativos ** que no transmiten contenido esencial. No son indexados como imágenes por motores de búsqueda.
- HTML `IMG` o` IMAGEN` las etiquetas ** deben usarse para ** imágenes de contenido ** que son parte integral del significado de la página (por ejemplo, fotos de productos, imágenes en un artículo de noticias, gráficos). Estas imágenes son parte del DOM, pueden ser indexadas mediante la búsqueda de imágenes, y los rastreadores pueden entender su contexto.
- División filosófica: el principio general es que CSS es para el estilo, mientras que HTML es para el contenido. Mezclar estos roles, especialmente poniendo contenido crucial en CSS, puede obstaculizar la comprensión y la accesibilidad del motor de búsqueda.
- El uso de CSS para crear diseños similares a la tabla para datos tabulares es generalmente un mal uso.
- Para los datos tabulares reales, se prefiere el uso de elementos HTML `table`, ya que permite que los motores de búsqueda (y los lectores de pantalla) reconozcan filas y columnas, facilitando una mejor comprensión e indexación de información estructurada.
Discusión del foro en X.
