Que mejoras en SEO podemos obtener con iconos SVG vs Normales

SEO

Años atrás era difícil pensar que iba a existir algo mas avanzado o mejor que una fuente, jpg o png como icono en los proyectos, eso demuestra que todo esta en constante evolución para mejorar y optimizar las herramientas. Vamos a crear un experimento para ver esta versión de iconos en SVG que trae la actual librería de iconos Font Awesome si es que afecta el SEO y carga rápida de una web.

imagen: fontawesome.com

Instalación CSS y SVG

CSS

Vamos a la página de Font Awesome y descargamos el archivo CSS para trabajar con los iconos normal de la manera clásica.

image: fontawesome.com

Colocamos el archivo all.css antes de cerra la etiqueta </head> de tu documento

SVG

Para instalar un icono en SVG basta ir a la galería de iconos con la que cuentan en su web y darle en Descargar SVG

imagen: fontawesome.com

Para ser ordenados todos los iconos en formato SVG que descarguemos los podemos meter a una carpeta svg previamente creada e insertamos nuestro icono SVG en nuestro documento

Pruebas

Vamos a usar la herramienta de Google muy popular usada por especialistas en SEO y demás, hablamos de Page Speed Insights

Iconos SVG

Primero probaremos cuanto demora en cargar y presentar la versión con los iconos en SVG

URL: nubecolectiva.com/blog/tutos/demos/font_awesome_svg_seo/a.html

Colocamos la URL y le damos Analizar, obtenemos los siguientes datos de carga

imagen: developers.google.com

Iconos CSS Normales

Ahora probaremos con los iconos normales.

URL: nubecolectiva.com/blog/tutos/demos/font_awesome_svg_seo/b.html

Colocamos la URL y le damos analizar

imagen: developers.google.com

Conclusión

Si bien ambos tienen la misma puntuación en la carga de data, tenemos que elegir un formato, nosotros creemos que el formato SVG es lo mas óptimo como sus iniciales lo dicen (Scalable Vector Graphics) en español Gráficos Vectoriales Escalables, esto quiere decir que la resolución de este formato es mejor que la de un icono normal con CSS por ende nos ofrece una mejor experiencia y presentación a nuestros usuarios, un ejemplo para comprobar esto es si abrimos un SVG en una nueva pantalla, podemos ver su verdadera resolución

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required