¿Cómo optimizar tu Sitio Web para Dispositivo Móviles? por @aleyda para #EMMS2014

2,294 views

Published on

Published in: Mobile
2 Comments
14 Likes
Statistics
Notes
No Downloads
Views
Total views
2,294
On SlideShare
0
From Embeds
0
Number of Embeds
138
Actions
Shares
0
Downloads
40
Comments
2
Likes
14
Embeds 0
No embeds

No notes for slide

¿Cómo optimizar tu Sitio Web para Dispositivo Móviles? por @aleyda para #EMMS2014

  1. 1. ¿Cómo optimizar un sitio Web para dispositivos móviles? #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  2. 2. Speaker Blogger Sharer @aleyda +aleydasolis Seo Hola, Soy Aleyda Solis #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  3. 3. VIVIMOS EN UN MUNDO MULTIDISPOSITIVO #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  4. 4. QUE AÚN ESTÁ EN PLENO CRECIMIENTO #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  5. 5. AL QUE GOOGLE ESTÁ DANDO CADA VEZ MÁS IMPORTANCIA A NIVEL DE POSICIONAMIENTO #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  6. 6. NUESTROS PROCESOS SEO DEBEN EXPANDIRSE A UN MUNDO MULTI-DISPOSITIVO Y OPTIMIZAR PARA ELLOS #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  7. 7. AÚN NO SIEMPRE SE HACE… #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  8. 8. OUCH! #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  9. 9. VEAMOS CÓMO OPTIMIZAR UN SITIO WEB PARA DISPOSITIVOS MÓVILES… ANÁLISIS DE SITUACION ACTUAL ANÁLISIS DE POTENCIAL MÓVIL SELECCIÓN DE TIPO DE WEB MÓVIL #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014 OPTIMIZACIÓN DE SITIO WEB MÓVIL
  10. 10. 1 #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014 COMIENZA IDENTIFICANDO EL ESTADO MÓVIL ACTUAL DE TU WEB
  11. 11. USA GOOGLE ANALYTICS & GOOGLE WEBMASTER TOOLS #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  12. 12. VERIFICA EL VOLUMEN, TENDENCIA & FUENTES DE TU TRÁFICO MÓVIL #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  13. 13. EL COMPORTAMIENTO DE TRÁFICO POR DISPOSITIVO MÓVIL #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  14. 14. LA VISIBILIDAD EN LA BÚSQUEDA MÓVIL DE TUS CONSULTAS & PÁGINAS #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  15. 15. IDENTIFICA PROBLEMAS DE RASTREO WEB MÓVIL #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  16. 16. VERIFICA CÓMO EL GOOGLEBOT MÓVIL ACCEDE A TUS PÁGINAS MÁS IMPORTANTES #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  17. 17. USA EMULADORES PARA IDENTIFICAR LA VISIBILIDAD & USABILIDAD MÓVIL https://developer.chrome.com/devtools/docs/device-mode #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  18. 18. USA SCREAMING FROG PARA RASTREAR TU WEB COMO EL GOOGLEBOT MÓVIL http://www.screamingfrog.co.uk/seo-spider/ #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  19. 19. 2 #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014 INVESTIGA A TU AUDIENCIA Y POTENCIAL DE BÚSQUEDA MÓVIL
  20. 20. IDENTIFICA EL VOLUMEN DE BÚSQUEDA MÓVIL CON GOOGLE KEYWORD PLANNER https://adwords.google.es/KeywordPlanner #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  21. 21. EXPANDE IDEAS DE PALABRAS CLAVE QUE TAMBIÉN ESTÉN USANDO COMPETIDORES #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014 http://www.semrush.com/
  22. 22. VERIFICA TU POSICIONAMIENTO MÓVIL ACTUAL VS. TU COMPETENCIA PARA LAS MISMAS #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  23. 23. ANALIZA EL RENDIMIENTO DE TU POSICIONAMIENTO MÓVIL VS. TU COMPETENCIA http://www.stateofdigital.com/easily-analyze-competitors-mobile-seo-performance/ #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  24. 24. ESTABLECE TUS PALABRAS CLAVE & TEMÁTICAS A OPTIMIZAR EN TU SITIO WEB MÓVIL EN BASE A ESTO COMPORTAMIENTO DE INDUSTRIA RELEVANCIA VOLUMEN DE BÚSQUEDA COMPETENCIA ESTACIONALIDAD INTENCIÓN CONTENIDO ACTUAL EXISTENCIA FORMATO POSICIONAMIENTO TRÁFICO CONVERSIONES OFERTA DE NEGOCIO VOLUMEN RENTABILIDAD #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  25. 25. 3 #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014 SELECCIONA TU TIPO DE WEB MÓVIL
  26. 26. PUEDES HABILITAR TU WEB MÓVIL A TRAVÉS DE 3 ALTERNATIVAS #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  27. 27. USA LOS DATOS DEL ANÁLISIS ANTERIOR PARA ELEGIR LA MEJOR PARA TU SITUACIÓN La funcionalidad y contenido móvil deseado La capacidad de desarrollo Web Móvil Tu Tipo de Web Móvil El perfil identificado de la audiencia móvil #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  28. 28. HACIENDO LAS SIGUIENTES PREGUNTAS #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  29. 29. EXISTEN BUENAS PRÁCTICAS SEO TANTO PARA LA OPTIMIZACIÓN GENERAL COMO ESPECÍFICA DE LAS MISMAS BUENAS PRÁCTICAS PARA SITIOS RESPONSIVE BUENAS PRÁCTICAS PARA SITIOS DINÁMICOS BUENAS PRÁCTICAS PARA WEB MÓVILES PARALELAS BUENAS PRÁCTICAS SEO GENERALES #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  30. 30. 4 #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014 APRENDAMOS DE LAS BUENAS PRÁCTICAS DE SEO MÓVIL GENERALES
  31. 31. OPTIMIZA TU VELOCIDAD WEB MÓVIL CON PAGESPEED INSIGHTS https://developers.google.com/speed/pagespeed/insights/ #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  32. 32. DISEÑA PARA TU INTERFAZ MÓVIL, EVITANDO ELEMENTOS COMO INTERSTITIALS O EN FLASH http://www.nngroup.com/articles/optimizing-a-screen-for-mobile-use/ #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  33. 33. HAZ TU PÁGINAS MÓVILES RELEVANTES ENFOCÁNDOLAS A TUS PALABRAS CLAVE OBJETIVO #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  34. 34. USA DATOS ESTRUCTURADOS PARA TU CONTENIDO MÓVIL https://support.google.com/webmasters/answer/99170?hl=en #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  35. 35. CREA PRESENCIA EN GOOGLE+ PARA NEGOCIOS SI ERES LOCAL http://www.google.com/intl/es/business/ #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  36. 36. PERMITE A TUS VISITANTES IR A LAS VERSIONES ALTERNATIVAS DE TU WEB #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  37. 37. 5 #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014 AHORA VEAMOS CUÁLES SON LAS RECOMENDACIONES PARA UN SITIO WEB RESPONSIVE
  38. 38. ¿QUÉ ES UNA WEB RESPONSIVE? #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  39. 39. VERIFICA TU DISEÑO WEB RESPONSIVE http://mattkersley.com/responsive/ #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  40. 40. CÓMO FUNCIONA EL DISEÑO RESPONSIVE #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  41. 41. EL RESPONSIVE ES LA OPCIÓN PREFERIDA DE GOOGLE PARA WEB MÓVIL https://developers.google.com/webmasters/smartphone-sites/details #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  42. 42. PROS & CONTRAS DE WEBS RESPONSIVE + PROS - CONTRAS Sin riesgo de duplicación de contenido Más fácil mantenimiento Consolidación de Popularidad No hay necesidad de Redirecciones Una implementación para Móvil & Tablet Posible necesidad de rediseño Sin posibilidad de diferenciación oferta Más restricciones usabilidad y velocidad #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  43. 43. PROS & CONTRAS DE WEBS RESPONSIVE + PROS - CONTRAS Sin riesgo de duplicación de contenido Más fácil mantenimiento Consolidación de Popularidad No hay necesidad de Redirecciones Una implementación para Móvil & Tablet Tu alternativa Web móvil si es técnicamente factible, tu oferta desktop es la misma móvil y fácilmente adaptable Posible necesidad de rediseño Sin posibilidad de diferenciación oferta Más restricciones usabilidad y velocidad sin perjudicar la experiencia del usuario. #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  44. 44. SIGUE LAS BUENAS PRÁCTICAS DE GOOGLE PARA IMPLEMENTARLO http://googlewebmastercentral.blogspot.com/2012/04/responsive-design-harnessing-power-of.html #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  45. 45. NO BLOQUEES LOS RECURSOS DE TU WEB (JS, CSS, IMÁGENES) #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  46. 46. LA VELOCIDAD & VISUALIZACIÓN NECESITAS DE MAYOR ATENCIÓN #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  47. 47. AQUÍ UN EJEMPLO DE DISEÑO WEB RESPONSIVE #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  48. 48. 6 #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014 ¿CUÁLES SON LAS BUENAS PRÁCTICAS SEO PARA WEBS MÓVILES DINÁMICAS?
  49. 49. ¿QUÉ ES UNA WEB MÓVIL DINÁMICA? #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  50. 50. USA WEB SNIFFERS, USER AGENT SWITCHERS & EMULADORES PARA PROBAR SI UNA WEB MÓVIL ES DINÁMICA http://www.mobilephoneemulator.com/ #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  51. 51. PROS & CONTRAS DE WEBS DINÁMICAS + PROS - CONTRAS Sin riesgo de duplicación de contenido Capacidad para diferenciar oferta Consolidación de popularidad Mejor experiencia de usuario móvil Complejidad en Implementación Mayor coste de mantenimiento Dos implementaciones Móvil & Tablet #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  52. 52. PROS & CONTRAS DE WEBS DINÁMICAS + PROS - CONTRAS Lo mejor si necesitas contenido, funcionalidad y experiencia de usuario móvil diferenciado o si es el mismo pero no puedes Sin riesgo de duplicación de contenido Capacidad para diferenciar oferta Consolidación de popularidad Mejor experiencia de usuario móvil Complejidad en Implementación Mayor coste de mantenimiento Dos implementaciones Móvil & Tablet implementar una responsive Web. #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  53. 53. AÑADE EL VARY HTTP HEADER A TUS URLS #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014 http://www.web-sniffer.net
  54. 54. IDENTIFICA Y SIRVE CORRECTAMENTE A LOS AGENTES DE USUARIOS https://developers.google.com/webmasters/smartphone-sites/common-mistakes #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  55. 55. AQUÍ UN EJEMPLO DE SITIO WEB DINÁMICO #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  56. 56. 6 #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014 APRENDAMOS DE LAS BUENAS PRÁCTICAS SEO PARA WEB MÓVILES PARALELAS
  57. 57. ¿QUÉ ES UN SITIO WEB MÓVIL PARALELO? #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  58. 58. VERIFICA UN SITIO WEB PARALELO #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  59. 59. PROS Y CONTRAS DE SITIOS PARALELOS + PROS - CONTRAS Más fácil implementación Capacidad de diferenciar oferta móvil Mejor experiencia de usuario móvil Riesgo de duplicación de contenido Riesgo de dilución de popularidad Esfuerzo adicional en rastreo e indexacón Mayor coste de mantenimiento Dos implementaciones Móvil & Tablet #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  60. 60. PROS Y CONTRAS DE SITIOS WEB MÓVILES PARALELOS S+i nePcReOsSitas contenido, funcionalid-adC yO eNxTpReArSiencia de usuario móvil diferenciado pero no puedes implementar dynamic serving o si es el mismo pero no puedes implementar una Más fácil implementación Capacidad de diferenciar oferta móvil Mejor experiencia de usuario móvil Riesgo de duplicación de contenido Riesgo de dilución de popularidad Esfuerzo adicional en rastreo e indexacón Mayor coste de mantenimiento Dos implementaciones Móvil & Tablet responsive Web. #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  61. 61. CÓMO DEBEN FUNCIONAR LAS REDIRECCIONES #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  62. 62. CREA UNA ESTRUCTURA WEB MÓVIL PARALELA RELEVANTE Y CONSISTENTE #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  63. 63. AÑADE ANOTACIONES REL ALTERNATE & CANONICAL EN LAS URLS https://developers.google.com/webmasters/smartphone-sites/details #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  64. 64. AÑADE EL ATRIBUTO REL ALTERNATE EN EL XML SITEMAP DE LA VERSIÓN DESKTOP #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  65. 65. VEAMOS UN EJEMPLO DE WEB MÓVIL PARALELA #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  66. 66. AHORA YA SABES CÓMO OPTIMIZAR TU WEB MÓVIL EN BASE A SUS CARACTERÍSTICAS, POTENCIAL Y RESTRICCIONES #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  67. 67. ES MOMENTO DE MAXIMIZAR TU POTENCIAL MÓVIL #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
  68. 68. ¡Muchas Gracias! ¿Tenéis Preguntas? #SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014

×