Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cómo usar y exprimir Chrome DevTools #dsm19

1,168 views

Published on

Media horita de funcionalidades y secciones del inspector de Chrome que se pueden usar para exprimir los análisis SEO de nuestros proyectos.

Recursos de interés:

https://developers.google.com/web/tools/chrome-devtools/
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

Published in: Marketing
  • Be the first to comment

Cómo usar y exprimir Chrome DevTools #dsm19

  1. 1. CÓMO USAR #DSM19 #DSM2019 CHROME DEVTOOLS @mjcachon
  2. 2. @mjcachon #DSM19 #DSM2019 MJ Cachón @mjcachon Trabajo por mi cuenta www.mjcachon.com Construyendo MujeresEnSEO.com ¡HOLA!
  3. 3. @mjcachon #DSM19 #DSM2019
  4. 4. @mjcachon #DSM19 #DSM2019 Hoy vamos a…
  5. 5. @mjcachon #DSM19 #DSM2019 Hoy vamos a…
  6. 6. @mjcachon #DSM19 #DSM2019
  7. 7. @mjcachon #DSM19 #DSM2019 Cómo acceder Menú de Chrome Atajo Botón derecho 1 3 2
  8. 8. @mjcachon #DSM19 #DSM2019 Cómo acceder Menú de Chrome Atajo teclado Botón derecho CTRL+Shift+I F12 Command+Option+I
  9. 9. @mjcachon #DSM19 #DSM2019 Cómo acceder Menú de Chrome Atajo Botón derecho
  10. 10. @mjcachon #DSM19 #DSM2019 Interfaz Panel inferior Panel lateral
  11. 11. @mjcachon #DSM19 #DSM2019 ¡Vamos allá!
  12. 12. @mjcachon #DSM19 #DSM2019 Simular un dispositivo móvil Uso 1 Uso 1
  13. 13. @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
  14. 14. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent
  15. 15. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent Simular giro de móvil en horizontal
  16. 16. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent
  17. 17. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent Si clicas, se adapta el responsive a esa anchura
  18. 18. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent
  19. 19. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent
  20. 20. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos 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
  21. 21. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent
  22. 22. @mjcachon #DSM19 #DSM2019 Resonsive / Dispositivos concretos Rotate Show media queries Show rules Show device type Capture Zoom User-Agent 1 2
  23. 23. @mjcachon #DSM19 #DSM2019 EtiquetasUso 2
  24. 24. @mjcachon #DSM19 #DSM2019 Title Description Meta Robots Canonical Alt document.title document.title.length CONSOLA
  25. 25. @mjcachon #DSM19 #DSM2019 Title Description Meta Robots Canonical Alt ELEMENTOS Se activa con CMD + F
  26. 26. @mjcachon #DSM19 #DSM2019 Title Description Meta Robots Canonical Alt document.all.description.content document.all.description.content.length CONSOLA
  27. 27. @mjcachon #DSM19 #DSM2019 Title Description Meta Robots Canonical Alt ELEMENTOS
  28. 28. @mjcachon #DSM19 #DSM2019 Title Description Meta Robots Canonical Alt document.all.robots.contentCONSOLA
  29. 29. @mjcachon #DSM19 #DSM2019 Title Description Meta Robots Canonical Alt ELEMENTOS
  30. 30. @mjcachon #DSM19 #DSM2019 Title Description Meta Robots Canonical Alt CONSOLA $$('link[rel="canonical"]')[0]
  31. 31. @mjcachon #DSM19 #DSM2019 Title Description Meta Robots Canonical Alt ELEMENTOS
  32. 32. @mjcachon #DSM19 #DSM2019 Title Description Meta Robots Canonical Alt ELEMENTOS
  33. 33. @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
  34. 34. @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
  35. 35. @mjcachon #DSM19 #DSM2019 Rendimiento y Velocidad de cargaUso 3
  36. 36. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse
  37. 37. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse
  38. 38. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse Ver estado del certificado
  39. 39. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse
  40. 40. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse Todos los recursos http de la url
  41. 41. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse Status code, formato, peso, tiempo de carga, cascada
  42. 42. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse Al clicar en la url, info extra
  43. 43. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse
  44. 44. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse Js habilitado Js deshabilitado
  45. 45. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse
  46. 46. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse
  47. 47. @mjcachon #DSM19 #DSM2019 Contenido no usado Https Cabeceras http Desactivar JS Lighthouse
  48. 48. @mjcachon #DSM19 #DSM2019 Editar elementos o contenidosUso 4
  49. 49. @mjcachon #DSM19 #DSM2019 Contraste de color de fuente y color de fondo
  50. 50. @mjcachon #DSM19 #DSM2019 document.designMode = "on"CONSOLA
  51. 51. @mjcachon #DSM19 #DSM2019 ELEMENTOS
  52. 52. @mjcachon #DSM19 #DSM2019 VISUALIZAR MEJORAS SEO DESDE EL EDITOR ¿quitamos el breadcrumb?
  53. 53. @mjcachon #DSM19 #DSM2019 VISUALIZAR MEJORAS SEO DESDE EL EDITOR Así quedaría…
  54. 54. @mjcachon #DSM19 #DSM2019
  55. 55. @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
  56. 56. ¡GRACIAS! #DSM19 #DSM2019 CONTACTO: SOMOS@MJCACHON.ES @mjcachon

×