Chrome DevTools es una herramienta gratuita integrada en el navegador Chrome. Sus muchas funciones lo ayudan a controlar elementos de su sitio web en tiempo real.
Chrome DevTools es una poderosa caja de herramientas para auditorías técnicas de SEO y está a solo un clic de distancia.
Acceso a Chrome DevTools
Acceder a DevTools en el navegador Chrome es tan simple como hacer clic derecho en una página web y seleccionar inspeccionar. Esto generalmente se abrirá en el lado derecho de la pantalla.
Sin embargo, puede optar por acoplarlo en la parte inferior, a la izquierda o incluso abrirlo en una ventana separada.
Haga clic en los tres puntos al lado de la rueda de configuración y seleccione su área de acoplamiento preferida.
Construye tu propio cajón de la consola
El cajón de la consola es un panel adicional que contiene instrumentos que están ocultos por defecto. Los más útiles para SEO son Alcance, Reproducción y Condición de red.
Puede acceder al cajón de la consola haciendo clic en los mismos tres puntos y seleccionando «Mostrar cajón de la consola».
Una vez abierto en la parte inferior del panel de elementos, al hacer clic en los tres puntos se enumerarán las herramientas adicionales que se pueden agregar en un formato similar a una pestaña.
Oportunidad de auditoría SEO
Hay varias formas de identificar problemas, validar resultados y examinar la accesibilidad de un sitio web para los usuarios y los motores de búsqueda.
Asegúrate de que el contenido sea accesible.
Los motores de búsqueda deberían poder ver y rastrear su contenido; es una verificación básica que es fácil pasar por alto.
En el panel Elementos de DevTools, puede ver Modelo de objeto de documento (DOM) de su página.
El DOM es la estructura de un documento HTML; determina qué contenido debe estar en una página, así como también cómo todos los elementos se relacionan entre sí. También permite que JavaScript acceda y actualice la página.
Este panel muestra varios elementos de contenido, incluidas metaetiquetas, etiquetas canónicas y etiquetas hreflang, así como el contenido principal y la estructura de la página.
La pestaña Elementos muestra la versión JavaScript mostrada de la página, por lo que puede usarla para identificar las diferencias entre la página mostrada y el código fuente HTML.
Gran parte del contenido web moderno requiere que se cargue JavaScript. Esto puede causar problemas con la versión en caché de la página y afectar la forma en que Google detecta e indexa su contenido.
Por ejemplo, si se utiliza JavaScript para representar una etiqueta de título, habrá varias versiones: una que se carga en HTML y otra cuando se representa JavaScript. Esto puede dificultar que Google sepa cuáles mostrar en las SERP.
Si encuentra que Google muestra su contenido inesperadamente en las SERP, esta es una buena manera de verificar la página.
paridad de JavaScript
Una prueba de paridad de JavaScript puede ayudarlo a identificar problemas entre las versiones HTML y JavaScript de una página.
Haga clic con el botón derecho en la pestaña Artículos y seleccione Copiar > Copiar elemento. Esto copia todo el código JavaScript de la página. Seleccione el código fuente HTML con Comando o Ctrl + A. Luego use un comprobador de diferencias para identificar cualquier diferencia entre los dos.
Verá una gran cantidad de secuencias de comandos inyectadas en su código JavaScript, pero las cosas clave que debe buscar son metaetiquetas, etiquetas canónicas, etiquetas de índice como noindex y títulos principales y elementos de contenido.
Encuentre y valide etiquetas útiles para motores de búsqueda
La pestaña Elementos también lo ayuda a revisar las etiquetas que impulsan a los motores de búsqueda a ver e indexar su página.
Por ejemplo, puede usar la función de búsqueda para encontrar fácilmente títulos y metaetiquetas, etiquetas OG y canónicas, así como configuración de hreflang y metaetiquetas de robots.
También puede identificar la estructura del encabezado con la herramienta de inspección de elementos. Úselo para controlar las etiquetas H1 y H2 y su ubicación.
Revisa el texto alternativo
Las imágenes de su página deben contener texto alternativo que sea lógico, descriptivo y que no esté lleno de palabras clave.
En la pestaña Artículos, use el selector de artículos, luego haga clic en la imagen para revisar el código y el texto alternativo.
Emular la capacidad de respuesta en múltiples dispositivos
Asegurarse de que su sitio web sea receptivo, utilizable y accesible en múltiples dispositivos es fundamental para el SEO moderno.
Chrome DevTools facilita la verificación de la compatibilidad móvil con la barra de herramientas de su dispositivo.
Haga clic en la opción «Alternar barra de herramientas del dispositivo» en la parte superior izquierda del panel y verá la página que se muestra en un formato receptivo con las opciones en la parte superior.
Seleccione el tamaño de pantalla de un dispositivo para emular o personalizar el tamaño de pantalla exacto.
«Sensible» muestra qué tan receptiva es la página, que es un método mucho más eficiente que cambiar el tamaño de la ventana del navegador.
Asegúrate de que los elementos carguen y funcionen correctamente en los dispositivos móviles y que no haya grandes diferencias entre el contenido y los enlaces en comparación con la versión de escritorio.
Auditoría de velocidad del sitio
Una de las características más poderosas de Chrome DevTools es la capacidad de verificar la velocidad y el rendimiento del sitio para identificar cualquier problema que pueda afectar Core Web Vitals y el rendimiento general de la página.
Auditoría de faro
Se puede acceder a Lighthouse en la barra de navegación superior de la ventana DevTools.
Una vez que se haya analizado la página, Lighthouse generará una puntuación de rendimiento de 100 en función de varios factores que Google actualiza con el tiempo.
Échale un vistazo Documentación oficial de Google para obtener la ponderación más actualizada para las auditorías de Lighthouse.
La auditoría también mostrará datos de sincronización para las métricas subyacentes que conforman la puntuación de rendimiento.
Actualmente son First Contentful Paint, Time To Interactive, Speed Index, Total Blocking Time, Greatest Contentful Paint y Cumulative Layout Shift.
Cada uno de estos tendrá un código de colores de acuerdo con su desempeño, donde el rojo significa deficiente, el naranja para mejorar y el verde para Bien.
También verá una imagen de capturas de pantalla que muestran la carga de la página, con elementos cargándose en cada etapa.
Debajo de esto está la lista de oportunidades, que muestra una lista de mejoras para aumentar su puntaje de rendimiento.
La lista muestra primero la oportunidad de ahorro más alta, y cada punto se puede ampliar para proporcionar más detalles y mostrar ejemplos de elementos que contribuyen a la puntuación.
Dentro de la auditoría de Lighthouse, también encontrará una puntuación de accesibilidad.
Estos son los elementos de control, incluidos los colores y el contraste, elementos AIREetiquetas alt, nombres y etiquetas para botones, formularios y enlaces, así como estructura de navegación y título.
Vale la pena señalar que esto solo muestra un subconjunto de problemas, por lo que se necesitan más pruebas para fines de accesibilidad.
También hay una sección de SEO, que se basa en las prácticas de SEO e incluye información de alto nivel sobre cosas como títulos y descripciones, indexabilidad, enlaces rastreables, estado HTTP y etiquetas canónicas.
Identificar problemas de rendimiento
La pestaña de rendimiento es una herramienta útil para evaluar el tiempo de carga de cada elemento de la página. Puede ayudarlo a identificar problemas de rendimiento que afectan la velocidad y la experiencia del usuario.
Haga clic en «Iniciar creación de perfiles y recarga de página» para registrar una recarga de página y comprobar el rendimiento de la carga. La página se volverá a cargar automáticamente y dejará de generar perfiles una vez que se detenga la actividad de la CPU y la red en la página.
También puede probar el «rendimiento de carrera». Esto registra la página a medida que se ejecuta y usted interactúa con ella.
Haga clic en el botón de registro, luego navegue por la página como esperaría de un usuario. Cuando haya terminado, presione el botón de detener para ver su perfil de rendimiento.
La pestaña de rendimiento contiene muchas métricas, pero para SEO nos centraremos en Filmstrip, Web Vitals, Timings, Experience y Summary.
La película muestra un registro del progreso de reproducción de la página. Sin embargo, puede pasar el cursor sobre cada paso para ver una captura de pantalla de ese punto en la carga. Mostrará cuándo se cargan ciertos elementos y el orden en que se agregan a la página.
Seleccione la opción Web Vitals en la parte superior del panel para ver los tiempos de carga de cada Core Web Vital y el tiempo de cada uno.
Los aspectos de los cambios de apariencia también se destacan aquí. La barra de experiencia muestra los elementos que provocan estos cambios. Al hacer clic en el engendro en la barra de experiencia, se brindan más detalles sobre la puntuación, el movimiento y el nodo afectado.
La sección Tiempos muestra el tiempo de carga de cada elemento que lo representa métricas clave de rendimiento centradas en el usuario:
- Primer barniz (FP) – el tiempo necesario para cargar el primer píxel.
- Primera pintura satisfactoria (FCP) – cuando se reproduce el primer contenido.
- Primera pintura significativa (FMP) – el tiempo necesario para proporcionar la primera información significativa a los usuarios.
- Contenido DOMC cargado (DCL) – cuando el documento HTML haya terminado de cargarse.
- Pintura de contenido completo más grande (LCP) – el tiempo que se tarda en cargar el elemento más grande de la página.
La cascada de red es otro elemento útil para revisar. Vea información útil sobre cada recurso, junto con el tiempo que tarda en cargarse.
Esto ayuda a identificar cualquier recurso que ralentice la página, como complementos o scripts.
Arreglo de zonas de intercambio
A medida que las imágenes y los anuncios se cargan en la página, es posible que otro contenido se mueva por la página. Esto es común durante la carga de la página, pero puede ser útil para identificar los elementos exactos que provocan estos cambios de diseño.
En el panel Rendering en el cajón de nuestra consola, hay una opción llamada Regiones de cambio de diseño. Esto resaltará las áreas de la página que experimentan un cambio de apariencia cuando se carga el contenido.
Elementos vitales fundamentales de la Web
Otra opción en el panel Rendering es Core Web Vitals. Producirá una superposición en su pantalla que muestra los principales elementos vitales de la web principal y el tiempo de cada elemento a medida que interactúa con la página.
Información de rendimiento
El nuevo panel Performance Insights tiene algunas características similares al panel Performance original, pero contiene información más útil.
Haga clic en las dos flechas en la parte superior y seleccione Rendimiento en el menú desplegable.
Al hacer clic en el botón de carga de la página de medición, se volverá a cargar la página y comenzará a registrar el rendimiento.
Para tener una mejor idea de cómo los usuarios del mundo real pueden experimentar el sitio, también puede habilitar la aceleración de la red y la CPU y deshabilitar el almacenamiento en caché, lo que proporcionará una vista realista del rendimiento de los visitantes por primera vez.
Una vez que la página haya terminado de cargarse, verá una grabación de reproducción de toda la carga, que muestra una imagen visual de la carga de la página.
Puede desplazarse a diferentes horas e identificar los diferentes recursos y funciones que se cargan en cada punto.
El panel Performance Insights también muestra una línea de tiempo de cada paso, con información adicional y detalles para cada etapa.
Por ejemplo, puede ver ambos recursos que bloquean el rendimientocuándo ocurren y qué las causa.
Las cargas más grandes con contenido de pintura y modificaciones de máscara también se destacan aquí, junto con horarios para otras tareas útiles.
Cancelaciones locales
Puede usar anulaciones locales en Chrome DevTools para realizar cambios en una página y conservarlos cuando vuelva a cargar la página.
Algunos casos de uso de ejemplo incluyen cambiar el estilo CSS, probar para ver cómo funciona la página con los archivos que bloquean el renderizado eliminados o verificar si los cambios realizados mejoraron los cambios de diseño.
Puede ver un perfil de rendimiento de los cambios y compararlo con el rendimiento actual de la página.
Esto también funciona para las auditorías de Lighthouse, brindándole comentarios en tiempo real sobre sus cambios.
Configure y ejecute anulaciones en el panel Orígenes. Cambie a la pestaña Anulaciones. Haga clic en «Seleccionar carpeta para anulaciones» para seleccionar una carpeta en su entorno local para almacenar sus cambios.
Una vez que haya otorgado permiso de Chrome para acceder a esta carpeta, puede seleccionar la opción para habilitar anulaciones locales.
Ahora vuelve a la pestaña Páginas. Haga clic con el botón derecho en un archivo que desee reemplazar y haga clic en Guardar para sobrescribir.
Verá un círculo morado junto al archivo, lo que indica que se sirve localmente y que puede realizar cambios. Haga clic en él para hacer cambios.
Se pueden encontrar más detalles sobre cómo funciona Anular en esta documentación de Google.
Revise la cobertura de recursos e identifique el código no utilizado
Los sitios web suelen proporcionar una gran cantidad de código sin usar, lo que puede afectar el rendimiento. Los archivos CSS grandes pueden ralentizar drásticamente la velocidad de su sitio.
puedes usar Panel de cubierta en el cajón de la consola para revisar y depurar recursos.
En este panel, puede registrar su cobertura de código y volver a cargar la página para ver el código necesario para cargar, o interactuar con la página para ver qué código se usa en todo momento.
La tabla de cobertura de código muestra los recursos analizados y la cantidad de código utilizado en cada uno. Las columnas son:
- URL – visualización de la URL del recurso.
- Chico – especificando si el recurso contiene CSS, JavaScript o ambos.
- bytes totales – el tamaño total del recurso en bytes.
- bytes no utilizados – el número de bytes que no se han utilizado.
- Una vista de bytes totales y bytes no utilizados – la barra roja muestra los bytes no utilizados y la barra azul muestra los bytes utilizados.
Puede hacer clic en una línea para abrir el activo en el panel Fuentes, que muestra un análisis del código línea por línea.
Cualquier cosa en el bloque rojo es código sin usar, con código usado para carga o funcionalidad en el bloque azul.
Vale la pena señalar que la refactorización de una base de código para evitar el código no utilizado dependerá en gran medida de la tecnología utilizada.
Si bien actuar sobre esta información puede no estar dentro de nuestro alcance de SEO profesional, estará equipado con la información que necesita para compartir con los desarrolladores.
Cambiar agente de usuario
Chrome DevTools también ofrece la posibilidad de cambiar el agente de usuario y ver cómo se carga una página para diferentes agentes de usuario que pueden rastrear la página.
Esto le permitirá examinar cómo Googlebot ve la página y las etiquetas, los encabezados y el contenido que ve. También podrá identificar si hay alguna ofuscación en el sitio, donde se muestra un contenido diferente al robot de Google que a los usuarios.
A medida que cambia el agente de usuario en el navegador, puede identificar problemas en tiempo real en la página. Los rastreadores pueden ver las cosas de manera diferente, por lo que esta es una prueba en vivo útil.
Para cambiar el agente de usuario, vaya a Condiciones de red en el cajón de la consola, luego anule la selección de la casilla de verificación «Usar navegador predeterminado» en la sección de agente de usuario y seleccione el agente de usuario de la lista desplegable de opciones predeterminadas.
Deshabilitar JavaScript
Si bien Google dijo que puede indexar y categorizar el contenido de Javascript mucho más fácilmente que antes, debe asegurarse de que los elementos importantes puedan cargarse sin JavaScript.
Al deshabilitar JavaScript en su navegador, puede ver cómo se carga una página y cómo funcionan sus elementos interactivos sin él.
Asegúrese de que todo se represente como debería y que el contenido, como los carruseles, se ejecute sin JavaScript.
Considere recomendar agregar cualquier elemento al código fuente HTML que no se represente como debería.
Haga clic en los tres puntos y seleccione el comando Ejecutar. Aparecerá un panel de comandos donde puede escribir JavaScript y seleccionar Deshabilitar JavaScript.
Cuando JavaScript está deshabilitado, verá un ícono de advertencia amarillo junto a la pestaña Fuentes, así como un ícono en la barra de URL.
Permanecerá deshabilitado en la pestaña mientras DevTools esté abierto, lo que significa que puede volver a cargar la página para ver cómo se carga sin JavaScript.
Ver encabezado de respuesta
Los encabezados HTTP muestran información intercambiada entre el servidor y el navegador, incluido el código de estado, las reglas del bot, los canónicos, el tipo de contenido y los encabezados de caché para la página.
Puede ver la respuesta HTTP de una página en la pestaña Red.
Haga clic en el recurso deseado, acceda a la pestaña de encabezados y revise los detalles. Esto también se puede filtrar por diferentes tipos de contenido, lo que significa que también puede controlar la respuesta del encabezado de los recursos CSS y JavaScript.
Los detalles en los que centrarse en esta pestaña son la URL de la solicitud, el método de solicitud, el código de estado, la codificación del contenido y la última fecha de modificación.
Revisar la respuesta del encabezado del servidor es una forma importante de asegurarse de que está mostrando la información correcta a los navegadores.
También puede asegurarse de que la verificación de caché funcione como se esperaba y verificar que está enviando el código de estado correcto a los agentes de usuario.
Un error común que puede verificar aquí es para 404 suave, donde la página se carga como se esperaba pero muestra un código 404 en la respuesta HTTP.
Trabajar con JavaScript
El panel de la consola ofrece la posibilidad de insertar código JavaScript personalizado que se puede usar para extraer una serie de cosas útiles de la página.
Buscar todos los enlaces en una página
chris johnson hizo un gran discusión en BrightonSEOdonde compartió útiles comandos de JavaScript que se pueden ejecutar en la consola para consultar y devolver ciertos elementos.
Aquí se pueden usar varias consultas diferentes y combinarlas para extraer información útil.
Una de estas funciones es verificar todos los enlaces salientes en una página determinada. Esto puede ayudarlo a identificar dónde está iniciando sesión actualmente en la página y encontrar oportunidades adicionales para iniciar sesión.
Comenzar, consultaSelectorAll(selector) devolverá todos los artículos que se ajusten
En este ejemplo, escribiremos querySelectorAll(‘a’) para encontrar todos los enlaces ancla. USANDO $$ antes de que el selector muestre una matriz de elementos.
También puede usar el comando table(data) para mostrar la matriz en una tabla, por ejemplo mesa ($$(‘a’). Esto muestra mucha información, por lo que para extraer solo columnas útiles, podemos agregarlas como argumentos entre corchetes después del comando.
Como, mesa ($$(‘a’), [‘text’, ‘href’, ‘rel’]) mostrará el texto del ancla, la página en la que se encuentra vinculado y si se agregan etiquetas nofollow o patrocinadas a la propia consola.
Encuentra las imágenes: su alto y ancho
Otro uso de la pestaña de la consola es encontrar imágenes y sus archivos. medidas de ancho y alto.
Definir la altura y el ancho de las imágenes garantiza que se asigne suficiente espacio en la página antes de que el navegador comience a buscar las imágenes.
Si una imagen carece de las dimensiones de ancho y alto, puede causar cambios en la apariencia. La página se reformatea a medida que se descargan las imágenes, si no hay espacio asignado para ellas.
Puede usar la consola para mostrar una tabla de imágenes y su alto y ancho escribiendo: mesa ($$(‘img’), [‘src’, ‘width’, ‘height’]).
Buscar errores de JavaScript
errores de JavaScript puede bloquear la carga de contenido y evitar que Googlebot rastree el sitio.
Los errores se mostrarán en la consola donde puede agregar un filtro para ver solo los errores.
Hacer clic en el error lo llevará a la pestaña de fuentes donde puede mostrar en qué lugar del script se produce el error.
A veces, las advertencias que se muestran aquí no son motivo de preocupación como profesionales de SEO, pero cuando encuentra un error, lo primero que debe hacer es ver si afecta la forma en que Google muestra e indexa su página.
Los errores de código significan que el código en sí está dañado, lo que puede afectar la usabilidad, lo que a su vez afectará la experiencia del usuario y el SEO.
Los errores de SEO no afectarán a los usuarios, pero pueden afectar la forma en que los motores de búsqueda rastrean su sitio. Debido a que no son visibles para los usuarios, son más difíciles de identificar. Aquí es donde la consola ayuda.
Podemos compartir esta información con los desarrolladores según sea necesario.
Extras útiles y divertidos
Copie los selectores XPath o CSS para raspar/rastrear
Trabajar con múltiples selectores de CSS y XPath al rastrear o raspar un sitio web puede ser un desafío.
Sin embargo, con el panel Elementos en Chrome DevTools, ambos pueden copiarse fácilmente en el portapapeles y luego pegarse en su rastreador favorito.
Hacer cambios en los elementos
Usando la pestaña Elementos, puede editar el código y ver visualmente cómo se verá en la página.
Por ejemplo, si planea editar el texto en la etiqueta H1, puede hacerlo fácilmente y ver en tiempo real cómo se verá.
Tomar capturas de pantalla de toda la página
Una vez que haya realizado los cambios y quiera compartirlos con sus desarrolladores, puede tomar una captura de pantalla de toda la página con Chrome DevTools.
Cambiar locación
A menudo necesitamos examinar cómo se ven las cosas en los sitios web para los usuarios en diferentes ubicaciones.
Si bien hay muchas herramientas VPN disponibles, simplemente puede cambiar su ubicación de navegación en Chrome DevTools.
Encuentra recursos inseguros
Usando el panel de seguridad, puede verificar que la página esté protegida con un certificado HTTPS válido.
Además, si hay problemas de contenido mixto debido a recursos poco confiables, los verá aquí.
Código de embellecimiento para una fácil revisión
El panel Fuentes le permite examinar fragmentos de código de varios elementos de la página.
Sin embargo, a menudo se le resta importancia; y por lo tanto puede ser difícil de leer y entender.
Al ver un material, verá dos corchetes en la parte inferior izquierda del panel.
Al hacer clic en se embellecerá el código minificado para facilitar el análisis.
En breve
¿Listo para mejorar el análisis de su sitio web? Da el primer paso descargando nuestro registro de auditoría de SEO y accediendo a las herramientas esenciales para agilizar tu proceso técnico de auditoría de SEO.
Imagen destacada: Paulo Bobita/Search Engine Journal
Imágenes de la publicación: captura de pantalla del autor, mayo de 2023
Fuente: searchenginejournal
Hashtags: #Uso #Chrome #DevTools #para #diagnosticar #problemas #del #sitio #una #auditoría
Comentarios recientes