En un episodio reciente de la búsqueda de Google en el podcast Record, Martin Splitt y John Mueller aclararon cómo CSS afecta el SEO.
Si bien algunos aspectos de CSS no tienen relación con el SEO, otros pueden influir directamente en cómo los motores de búsqueda interpretan y clasifican el contenido.
Esto es lo que importa y lo que no.
Los nombres de clases no importan para las clasificaciones
Una de las conclusiones más claras del episodio es que los nombres de clase CSS no tienen impacto en la búsqueda de Google.
División declarada:
“No creo que lo haga. No creo que nos importe porque los nombres de la clase CSS son solo eso. Solo están asignando un poco de reglas específicas de hoja de estilo a los elementos y eso es todo. Eso es todo. Podrías nombrarlos a todos” propaganda “. No marcaría la diferencia desde una perspectiva de SEO “.
Los nombres de clases, explicaron, se usan solo para aplicar el estilo visual. No se consideran parte del contenido de la página. Por lo tanto, son ignorados por GoogleBot y otros analizadores HTML al extraer información significativa.
Incluso si está alimentando HTML en un modelo de lenguaje o en un rastreador básico, los nombres de clases no tendrán en cuenta a menos que su sistema esté explícitamente diseñado para leer esos atributos.
Por qué el contenido en pseudo elementos es un problema
Si bien los nombres de clases son inofensivos, el equipo advirtió sobre colocar contenido significativo en pseudo elementos CSS como :before y :after.
División declarada:
“La idea nuevamente, la idea original, es separar la presentación del contenido. Por lo tanto, el contenido está en el HTML, y cómo se presenta es en el CSS. Entonces con
beforeyaftersi agrega elementos decorativos como un pequeño triángulo o un pequeño punto o un poco de bombilla o como un poco de unicornio, lo que sea, creo que está bien porque es decorativo. No tiene significado en el sentido del contenido. Sin ella, todavía estaría bien “.
Agregar florituras visuales es aceptable, pero la inserción de titulares, párrafos o cualquier contenido orientado al usuario en pseudo elementos rompe el principio central del desarrollo web.
Ese contenido se vuelve invisible para los motores de búsqueda, los lectores de pantalla y cualquier otra herramienta que confíe directamente en analizar el HTML.
Mueller compartió un ejemplo del mundo real de cómo esto puede salir mal:
“Una vez hubo una escalada del equipo de indexación que decía que deberíamos comunicarnos con el sitio y decirles que dejen de usar
beforeyafter… estaban usando elbeforePseudo clase para agregar un número de signo de número a todo lo que consideraban hashtags. Y nuestro sistema de indexación era como, sería muy bueno si pudiéramos reconocer estos hashtags en la página porque tal vez son útiles para algo “.
Debido a que los símbolos de hashtag se agregaron a través de CSS, los sistemas de Google nunca los vieron.
Splitt lo probó en vivo durante la grabación y confirmó:
“No está en el DOM … por lo que no se recoge por renderizado”.
CSS de gran tamaño puede dañar el rendimiento
El episodio también mencionó los problemas de rendimiento relacionados con las hojas de estilo hinchadas.
Según los datos del Almanaque web 2022 del Archivo HTTP, el tamaño medio de un archivo CSS había crecido a alrededor de 68 kb para móviles y 72 kb para escritorio.
Mueller declaró:
“El Almanaque web dice que cada año vemos que CSS crece en tamaño, y en 2022 el tamaño medio de la hoja de estilo era de 68 kilobytes o 72 kilobytes … también mencionaron el más grande que encontraron fue 78 megabytes … estos son archivos de texto”.
Ese tipo de hinchazón puede afectar negativamente los vitales web básicos y la experiencia general del usuario, que son dos áreas que hacer Ranking de influencia. Los marcos y las bibliotecas preconstruidas son a menudo la causa.
Si bien los desarrolladores pueden mitigar esto con minificación y poda de reglas no utilizadas, no todos lo hacen. Esto hace que la optimización de CSS sea un elemento que valga la pena en su lista de verificación Técnica de SEO.
Mantenga CSS rastreable
A pesar del papel limitado de CSS en la clasificación, Google todavía recomienda hacer que los archivos CSS sean rastreados.
Mueller bromeó:
“Las pautas de Google dicen que debe hacer que sus archivos CSS sean rastreables. Así que debe haber algún tipo de magia allí, ¿verdad?”
La verdadera razón es más técnica que mágica. GoogleBot usa archivos CSS para representar páginas de la manera en que los usuarios los verían.
El bloqueo de CSS puede afectar la forma en que se interpretan sus páginas, especialmente para el diseño, la amigable móvil o los elementos como el contenido oculto.
Consejos prácticos para profesionales de SEO
Esto es lo que significa este episodio para sus prácticas de SEO:
- Deja de optimizar los nombres de clases: Las palabras clave en las clases de CSS no ayudarán a sus clasificaciones.
- Verifique los pseudo elementos: Cualquier contenido real, como el texto destinado a ser leído, debe vivir en HTML, no en
:beforeo:after. - Tamaño de hoja de estilo de auditoría: Los grandes archivos CSS pueden dañar la velocidad de la página y los vitales de la web centrales. Recorte lo que pueda.
- Asegúrese de que CSS sea rastable: El bloqueo de las hojas de estilo puede interrumpir la representación e impactar cómo Google entiende su página.
El equipo también enfatizó la importancia de usar etiquetas HTML adecuadas para imágenes significativas:
“Si la imagen es parte del contenido y usted dice: ‘Mira esta casa que acabo de comprar’, entonces quieres un
imguna etiqueta de imagen o unpictureEtiqueta que realmente tiene la imagen real como parte del DOM porque quieres que veamos, ah, por lo que esta página tiene esta imagen que no es solo la decoración “.
Use CSS para el estilo y HTML para el significado. Esta separación ayuda tanto a los usuarios como a los motores de búsqueda.
Escuche el episodio de podcast completo a continuación:
