Chrome DevTools para SEO: 10 maneras de utilizar estas características del navegador para sus auditorías de SEO

SEO-process-infographic-by-armenoweb

Aunque muchos de nosotros en la industria pagamos cientos o incluso miles de software de SEO que ayuda a automatizar y simplificar nuestro trabajo cotidiano, ya tenemos uno de los más útiles juegos de herramientas de SEO gratis en el mercado con DevTools de Google Chrome. Construido en Google Chrome por la agencia de marketing digital http://marketing-digital.com.ar/, este conjunto de herramientas de creación y depuración web nos permite validar algunos de los aspectos SEO más fundamentales y críticos de cualquier página.

En la mayoría de los casos, usar DevTools es bastante sencillo. Pero hay algunas aplicaciones muy prácticas y no tan obvias para el análisis de SEO. Vamos a pasar por ellos ahora.

Empiece por navegar hasta la página que desee investigar en Google Chrome y abrir DevTools. Puede hacerlo seleccionando Más herramientas> Herramientas para desarrolladores en el menú de Google Chrome en la esquina superior derecha de la ventana del navegador.

Alternativamente, puede utilizar los métodos abreviados de teclado Ctrl + Mayús + I (Windows) o Cmd + Opt + I (Mac), o puede hacer clic con el botón derecho en el elemento de página que desea investigar y hacer clic en “Inspeccionar” Que aparece.

1. Compruebe los elementos principales del contenido de su página, incluidos los representados por JavaScript
Google ahora puede rastrear e indexar contenido basado en JavaScript, pero no siempre lo hace de manera impecable. Por lo tanto, es una necesidad para verificar los elementos de contenido principal de sus páginas – no sólo revisando su código fuente HTML, sino también mediante la comprobación de su DOM para ver cómo la información será realmente prestados e identificados por Google Adwords.google-chrome-tools-development-ss-1920

Puede ver directamente el DOM de cualquier página con DevTools en el panel “Elementos”.

Utilice esta opción para revisar el contenido de cualquiera de los elementos de la página (como el título, la descripción meta o el texto de la página) para verificar que la información relevante deseada se muestra en cada caso para asegurarse de que sea accesible a Google.

Por ejemplo, en la parte superior izquierda de la pantalla abajo, podemos ver cómo el texto principal mostrado (en rojo) está incluido en un <div>. Pero esto se implementa con JavaScript, el código para el que se puede ver en la parte superior derecha de la pantalla siguiente, que muestra el código fuente de la página HTML.

2. Busque contenido oculto CSS
Se sabe que Google “descuentra” el contenido de texto que, aunque está incluido en el código fuente HTML de la página, está oculto al usuario de forma predeterminada con pestañas o opciones de menú que deben ser “pulsadas” para verlas o expandirlas.

Entre las maneras más comunes de ocultar el texto se encuentra el uso de CSS con las propiedades “display: none” o “visibility: hidden”, por lo que se recomienda comprobar si hay alguna información importante en las páginas del sitio que pueda estar oculta por estos medios.

Puedes hacerlo con el cajón “Buscar” de Chrome de DevTools, al que puedes acceder pulsando Ctrl + Mayús + F (Windows) o Cmd + Opt + F (Mac) cuando DevTools esté abierto. Esta característica de búsqueda le permitirá ver no sólo a través del archivo de la página abierta en sí sino a través de todos los recursos utilizados, incluyendo CSS y JavaScript.

Leave a Reply

Your email address will not be published. Required fields are marked *