How to Use Chrome DevTools for SEO Audits

CÓMO USAR
#DSM19
#DSM2019
CHROME
DEVTOOLS
@mjcachon

@mjcachon
#DSM19
#DSM2019
MJ Cachón
@mjcachon
Trabajo por mi cuenta www.mjcachon.com
Construyendo MujeresEnSEO.com
¡HOLA!

@mjcachon
#DSM19
#DSM2019
Hoy vamos a…

@mjcachon
#DSM19
#DSM2019
Cómo acceder
Menú de Chrome
Atajo
Botón derecho
1
3
2

@mjcachon
#DSM19
#DSM2019
Cómo acceder
Menú de Chrome
Atajo teclado
Botón derecho
CTRL+Shift+I
F12
Command+Option+I

@mjcachon
#DSM19
#DSM2019
Cómo acceder
Menú de Chrome
Atajo
Botón derecho

@mjcachon
#DSM19
#DSM2019
Interfaz
Panel inferior Panel lateral

@mjcachon
#DSM19
#DSM2019
¡Vamos allá!

@mjcachon
#DSM19
#DSM2019
Simular un dispositivo móvil
Uso 1
Uso 1

@mjcachon
#DSM19
#DSM2019
Resonsive /
Dispositivos concretos
Rotate
Show media queries
Show rules
Show device type
Capture
Zoom
User-Agent
Ver aspecto Responsive o dispositivos concretos

@mjcachon
#DSM19
#DSM2019
Resonsive /
Rotate
Show media queries
Show rules
Show device type
Capture
Zoom
User-Agent

@mjcachon
#DSM19
#DSM2019
Resonsive /
Rotate
Show media queries
Show rules
Show device type
Capture
Zoom
User-Agent
Simular giro de móvil en horizontal

@mjcachon
#DSM19
#DSM2019
Resonsive /
Rotate
Show media queries
Show rules
Show device type
Capture
Zoom
User-Agent
Si clicas, se adapta el responsive a esa anchura

@mjcachon
#DSM19
#DSM2019
Resonsive /
Rotate
Show media queries
Show rules
Show device type
Capture
Zoom
User-Agent
Captura Área Visible
www.marketingandweb.es_marketing_congreso-marketing-online-dsm_.png
Captura Completa

@mjcachon
#DSM19
#DSM2019
Resonsive /
Rotate
Show media queries
Show rules
Show device type
Capture
Zoom
User-Agent
1
2

@mjcachon
#DSM19
#DSM2019
EtiquetasUso 2

@mjcachon
#DSM19
#DSM2019
Title
Description
Meta Robots
Canonical
Alt
document.title
document.title.length
CONSOLA

@mjcachon
#DSM19
#DSM2019
Title
Description
Meta Robots
Canonical
Alt
ELEMENTOS
Se activa con CMD + F

@mjcachon
#DSM19
#DSM2019
Title
Description
Meta Robots
Canonical
Alt
document.all.description.content
document.all.description.content.length
CONSOLA

@mjcachon
#DSM19
#DSM2019
Title
Description
Meta Robots
Canonical
Alt
ELEMENTOS

@mjcachon
#DSM19
#DSM2019
Title
Description
Meta Robots
Canonical
Alt
document.all.robots.contentCONSOLA

@mjcachon
#DSM19
#DSM2019
Title
Description
Meta Robots
Canonical
Alt
CONSOLA $$('link[rel="canonical"]')[0]

@mjcachon
#DSM19
#DSM2019
OTROS USOS PARA LA CONSOLA
var images = $$('img');
for (each in images) {
console.log(images[each].src);
}
Extraer todas las imágenes

@mjcachon
#DSM19
#DSM2019
OTROS USOS PARA LA CONSOLA
$$('h2 a').join('n')
Extraer todas las urls de los H2
$$('a').join('n')
Extraer todos los enlaces
$$('a').length
Contar todos los enlaces

@mjcachon
#DSM19
#DSM2019
Rendimiento y Velocidad de cargaUso 3

@mjcachon
#DSM19
#DSM2019
Contenido no usado
Https
Cabeceras http
Desactivar JS
Lighthouse

@mjcachon
#DSM19
#DSM2019
Contenido no usado
Https
Cabeceras http
Desactivar JS
Lighthouse
Ver estado del certificado

@mjcachon
#DSM19
#DSM2019
Contenido no usado
Https
Cabeceras http
Desactivar JS
Lighthouse
Todos los recursos http de la url

@mjcachon
#DSM19
#DSM2019
Contenido no usado
Https
Cabeceras http
Desactivar JS
Lighthouse
Status code, formato, peso, tiempo de carga, cascada

@mjcachon
#DSM19
#DSM2019
Contenido no usado
Https
Cabeceras http
Desactivar JS
Lighthouse
Al clicar en la url, info extra

@mjcachon
#DSM19
#DSM2019
Contenido no usado
Https
Cabeceras http
Desactivar JS
Lighthouse
Js habilitado Js deshabilitado

@mjcachon
#DSM19
#DSM2019
Editar elementos o contenidosUso 4

@mjcachon
#DSM19
#DSM2019
Contraste de color de fuente y color de fondo

@mjcachon
#DSM19
#DSM2019
document.designMode = "on"CONSOLA

@mjcachon
#DSM19
#DSM2019
ELEMENTOS

@mjcachon
#DSM19
#DSM2019
VISUALIZAR MEJORAS SEO DESDE EL EDITOR
¿quitamos el
breadcrumb?

@mjcachon
#DSM19
#DSM2019
VISUALIZAR MEJORAS SEO DESDE EL EDITOR
Así quedaría…

@mjcachon
#DSM19
#DSM2019
LECTURAS Y RECURSOS INTERESANTES
Oficial:
https://developers.google.com/web/tools/chrome-devtools/
Externos:
https://searchengineland.com/chromes-devtools-seo-10-ways-use-seo-audits-266433
https://www.onely.com/blog/chrome-developer-tools-overview/
https://trafficthinktank.com/google-chrome-technical-seo/
https://codeseo.io/google-chrome-seo-without-a-plugin/
https://www.reddoor.biz/blog/chrome-developer-tools-9-hacks-for-an-seo/
http://anti-code.com/devtools-cheatsheet/
https://code.tutsplus.com/articles/chrome-dev-tools-networking-and-the-console--net-28167

¡GRACIAS!
#DSM19
#DSM2019
CONTACTO: SOMOS@MJCACHON.ES
@mjcachon

How to Use Chrome DevTools for SEO Audits

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie How to Use Chrome DevTools for SEO Audits

Ähnlich wie How to Use Chrome DevTools for SEO Audits (20)

Mehr von MJ Cachón Yáñez

Mehr von MJ Cachón Yáñez (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

How to Use Chrome DevTools for SEO Audits