En un episodio flamante de la búsqueda de Google fuera del disco podcastMartin Splitt y John Mueller aclararon cómo CSS afecta el SEO.
Si perfectamente 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.
Splitt declaró:
“No creo que lo haga. No creo que nos cuantía 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 fundamentos 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 maniquí de estilo o en un rastreador fundamental, los nombres de clases no tendrán en cuenta a menos que su sistema esté explícitamente diseñado para interpretar esos atributos.
Por qué el contenido en pseudo fundamentos es un problema
Si perfectamente los nombres de clases son inofensivos, el equipo advirtió sobre colocar contenido significativo en pseudo fundamentos CSS como :before y :after.
Splitt declaró:
“La idea nuevamente, la idea diferente, 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 fundamentos 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á perfectamente porque es ornamental. No tiene significado en el sentido del contenido. Sin ella, todavía estaría perfectamente “.
Unir florituras visuales es aceptable, pero la inserción de titulares, párrafos o cualquier contenido orientado al beneficiario en pseudo fundamentos rompe el principio central del expansión web.
Ese contenido se vuelve invisible para los motores de búsqueda, los lectores de pantalla y cualquier otra aparejo que confíe directamente en analizar el HTML.
Mueller compartió un ejemplo del mundo auténtico de cómo esto puede salir mal:
“Una vez hubo una subida 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 ampliar 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 examinar estos hashtags en la página porque tal vez son efectos para poco “.
Conveniente 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 vídeo 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 además mencionó los problemas de rendimiento relacionados con las hojas de estilo hinchadas.
Según los datos del Calendario web 2022 del Archivo HTTP, el tamaño medio de un archivo CSS había crecido a cerca de de 68 kb para móviles y 72 kb para escritorio.
Mueller declaró:
“El Calendario 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 … además mencionaron el más prócer 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 militar del beneficiario, que son dos áreas que hacer Ranking de influencia. Los marcos y las bibliotecas preconstruidas son a menudo la causa.
Si perfectamente 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 ambiente que valga la pena en su directorio de comprobación Técnica de SEO.
Mantenga CSS rastreable
A pesar del papel pequeño 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 ocurrir algún tipo de encantamiento allí, ¿verdad?”
La verdadera razón es más técnica que mágica. GoogleBot usa archivos CSS para representar páginas de la modo en que los usuarios los verían.
El incomunicación de CSS puede afectar la forma en que se interpretan sus páginas, especialmente para el diseño, la amable móvil o los fundamentos 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 secreto en las clases de CSS no ayudarán a sus clasificaciones.
- Verifique los pseudo fundamentos: Cualquier contenido auténtico, como el texto destinado a ser letrado, debe existir 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. Recortadura lo que pueda.
- Asegúrese de que CSS sea rastable: El incomunicación de las hojas de estilo puede interrumpir la representación e impactar cómo Google entiende su página.
El equipo además 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 epíteto de imagen o unpictureMarbete que en realidad tiene la imagen auténtico como parte del DOM porque quieres que veamos, ah, por lo que esta página tiene esta imagen que no es solo la ornato “.
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: