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:
鈥淟a 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:
(Tagstotranslate) Noticias
