4 formas avanzadas de usar Chrome DevTools para auditorias técnicas de SEO. Descubra cuatro formas en que puede usar DevTools para identificar problemas o validar aquellos que surgen de herramientas técnicas de auditoría SEO de terceros.
¿Que es Chrome DevTools?
Es una herramienta fantástica que a menudo se pasa por alto en las guías técnicas de auditoría y en los SEO en general.
Muchos de nosotros pagamos por un amplio conjunto de herramientas (con algunas herramientas que cuestan miles de dólares) con los objetivos de:
- Adquiriendo más puntos de datos.
- Simplificando y automatizando partes de nuestro trabajo.
Sin embargo, ninguna herramienta única reemplaza el análisis que puede realizar un SEO, aplicando lógica y conocimiento previo cualitativo.
Fuera del conjunto de herramientas de pago, hay una serie de herramientas gratuitas en el mercado que sirven a sus propios públicos. Pero una de las herramientas gratuitas más útiles para auditorías SEO básicas y avanzadas es Chrome DevTools.
Integrado en el navegador Chrome, DevTools tiene una serie de características que nos permiten validar y auditar algunos fundamentos técnicos de SEO, así como puntos de auditoría más avanzados.
En su mayor parte, DevTools es relativamente sencillo y fácil de usar. Dicho esto, hay una pequeña cantidad de casos de uso extremadamente útiles y no tan obvios que se prestan al proceso de auditoría técnica.
Para abrir DevTools, puede hacer clic con el botón derecho en una página web y hacer clic en «inspeccionar», o haciendo clic en el menú de hamburguesas de tres puntos en la esquina superior derecha del navegador y seleccionando Más herramientas> Herramientas para desarrolladores.
A continuación se detallan algunas de las formas en que puede usar DevTools para identificar problemas o validar aquellos que surgen de herramientas de terceros.
Compruebe si su contenido es accesible
A veces se da por sentado, a menos que esté trabajando con JavaScript, que se enfoca más, es importante verificar que los motores de búsqueda identifiquen sus elementos principales de contenido.
Si bien Google cuenta con procesos para rastrear y procesar el contenido de su sitio, no siempre es 100% y, a veces, puede fallar por varias razones.
El DOM (Modelo de objeto de documento), que se puede ver en la pestaña Elementos de DevTools, le permite:
Revise varios elementos de contenido, incluido el meta título y el contenido del cuerpo de la página principal.
Verifique si Google puede recogerlo.
Una cosa clave a tener en cuenta aquí son las diferencias entre el código fuente y el contenido de la pestaña de elementos.
Al auditar sitios web que tienen un uso intensivo de JavaScript, el contenido, como los encabezados de página, a veces aparece bien en el código fuente HTML. Pero si se inyecta a través de JavaScript, puede mostrarse como un bloque JS en la pestaña Elementos.
Potencialmente, esto puede ser un problema, que luego se verifica mediante la realización de un sitio: ejemplo.com/página «contenido que está buscando», búsqueda avanzada y comprobación de la versión en caché de la página.
Si bien Google tiene el proceso de dos pasos para el rastreo de JavaScript, siempre es mejor facilitar que Google descubra el contenido en su sitio y reduzca la complejidad del proceso.
Emule experiencias de dispositivos múltiples
Tener un sitio web optimizado para dispositivos móviles, en la gran mayoría de los casos, es y ha sido un componente esencial de un sitio web exitoso durante varios años.
DevTools puede ayudar a determinar la compatibilidad con dispositivos móviles y diagnosticar problemas de usabilidad y velocidad.
Escriba contenido amigable para SEO con WebSite Auditor
Obtenga recomendaciones de palabras clave específicas a medida que escribe, todo basado en estadísticas detalladas de SERP y análisis de la competencia.
Usabilidad
En DevTools, puede cambiar entre el dispositivo móvil y el escritorio a través del ícono de Modo de dispositivo:
También puede cambiar entre los dos modos usando métodos abreviados de teclado, usando Cmd + Shift + M en una Mac o Ctrl + Shift + M en un sistema operativo Windows de Linux, mientras la interfaz DevTools está abierta.
Por experiencia, este es un método de auditoría efectivo, en lugar de cambiar el tamaño de la ventana del navegador para probar la capacidad de respuesta.
En el Modo de dispositivo, puede cambiar entre ventanas gráficas receptivas o elegir entre diferentes dispositivos preestablecidos para probar su página.
Esto puede ser útil para identificar cualquier problema potencial si tiene un gran número de visitantes de un dispositivo específico pero una tasa de conversión inferior al promedio.
Sin embargo, como puede ver en la captura de pantalla anterior, la lista de opciones preestablecidas está desactualizada, ya que el Pixel 2 ahora es reemplazado por el Pixel 4. Puede configurar dimensiones personalizadas para otros dispositivos usando la opción Editar.
Velocidad del sitio
Junto con los dispositivos móviles, la velocidad del sitio también es un factor importante tanto en SEO (gracias a la actualización de velocidad) como en la usabilidad.
Si bien hay varias herramientas de prueba de velocidad de terceros, si está auditando un sitio web provisional detrás de HTTP Auth y bloqueado en robots.txt., DevTools puede ser una excelente solución para probar estas páginas web.
Desde el menú de hamburguesas de tres puntos en la esquina superior derecha de la pantalla, y
Puede acceder a las Condiciones de red (que se encuentran en Más herramientas).
En el panel Condiciones de red, puede elegir:
Deshabilita el caché del navegador.
Acelera intencionadamente la red para acelerar 3G, 3G lento.
O agregue un acelerador personalizado.
También puede seleccionar entre una gama de agentes de usuario que van desde Googlebot Smartphone hasta varios Microsoft Edge UA y Opera.
Recomiendo usar los datos de Google Analytics y probar los navegadores y dispositivos que usa la mayoría de los usuarios.
Una vez que tenga su configuración, debe navegar a la pestaña «Red» y ver la carga de la página, pero también cuando se haya analizado el marcado inicial de la página, DOMContentLoaded, ambos visibles en la parte inferior de la página. Panel DevTools.
Para un mayor análisis de velocidad, puede ejecutar Google Lighthouse desde la pestaña Auditorías.
Renderizar recursos de bloqueo
Como se mencionó anteriormente, desde la pestaña Red puede identificar qué recursos de JavaScript y CSS se están cargando antes del DOM.
Si bien esto no es necesariamente un problema en todos los sitios web, tener recursos cargados por delante del DOM puede potencialmente bloquearlo, que es uno de los problemas de velocidad del sitio más comunes y solucionables.
Estos se pueden identificar filtrando JS y CSS en la pestaña Red:
Verifique los códigos de estado de los recursos
La pestaña Red también le permite verificar el estado HTTP de sus recursos. Esto es invaluable para verificar si algún recurso devuelve 404 o 5XX, o si su almacenamiento en caché está funcionando según lo previsto.
Los recursos que cargan un 200 están bien, al igual que los recursos que devuelven un 304.
304 a veces se confunde con una redirección, pero en este caso, es una señal de que el método de caché Última modificación está funcionando según lo previsto y que el navegador ya tiene información sobre el recurso y no necesita descargarlos nuevamente.
Fuentes de infromación
- https://www.searchenginejournal.com/chrome-devtools-technical-seo-audits/344103/
