¿cómo optimizar tu sitio web para dispositivo móviles? por @aleyda para #emms2014
DESCRIPTION
TRANSCRIPT
¿Cómo optimizar un sitio Web para dispositivos móviles?
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
Speaker
Blogger Sharer@aleyda +aleydasolis
Seo
Hola, Soy Aleyda Solis
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
VIVIMOS EN UN MUNDO
MULTIDISPOSITIVO
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
QUE AÚN ESTÁ EN PLENO CRECIMIENTO
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
AL QUE GOOGLE ESTÁ DANDO CADA VEZ MÁS IMPORTANCIA A NIVEL DE POSICIONAMIENTO
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
NUESTROS PROCESOS SEO DEBEN EXPANDIRSE A UN MUNDO MULTI-DISPOSITIVO Y OPTIMIZAR PARA ELLOS
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
AÚN NO SIEMPRE SE HACE…
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
OUCH!
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
ANÁLISIS DE SITUACION
ACTUAL
VEAMOS CÓMO OPTIMIZAR UN SITIO WEB PARA DISPOSITIVOS MÓVILES…
ANÁLISIS DE POTENCIAL
MÓVIL
SELECCIÓN DE TIPO DE WEB MÓVIL
OPTIMIZACIÓN DE SITIO WEB
MÓVIL
1#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
COMIENZA IDENTIFICANDO EL ESTADO MÓVIL ACTUAL DE TU WEB
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
USA GOOGLE ANALYTICS & GOOGLE WEBMASTER TOOLS
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
VERIFICA EL VOLUMEN, TENDENCIA & FUENTES DE TU TRÁFICO MÓVIL
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
EL COMPORTAMIENTO DE TRÁFICO POR DISPOSITIVO MÓVIL
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
LA VISIBILIDAD EN LA BÚSQUEDA MÓVIL DE TUS CONSULTAS & PÁGINAS
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
IDENTIFICA PROBLEMAS DE RASTREO WEB MÓVIL
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
VERIFICA CÓMO EL GOOGLEBOT MÓVIL ACCEDE A TUS PÁGINAS MÁS IMPORTANTES
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
USA EMULADORES PARA IDENTIFICAR LA VISIBILIDAD & USABILIDAD MÓVIL
https://developer.chrome.com/devtools/docs/device-mode
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
USA SCREAMING FROG PARA RASTREAR TU WEB COMO EL GOOGLEBOT MÓVIL
http://www.screamingfrog.co.uk/seo-spider/
2#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
INVESTIGA A TU AUDIENCIA Y POTENCIAL DE BÚSQUEDA MÓVIL
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
IDENTIFICA EL VOLUMEN DE BÚSQUEDA MÓVIL CON GOOGLE KEYWORD PLANNER
https://adwords.google.es/KeywordPlanner
EXPANDE IDEAS DE PALABRAS CLAVE QUE TAMBIÉN ESTÉN USANDO COMPETIDORES
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
http://www.semrush.com/
VERIFICA TU POSICIONAMIENTO MÓVIL ACTUAL VS. TU COMPETENCIA PARA LAS MISMAS
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
ANALIZA EL RENDIMIENTO DE TU POSICIONAMIENTO MÓVIL VS. TU COMPETENCIA
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
http://www.stateofdigital.com/easily-analyze-competitors-mobile-seo-performance/
ESTABLECE TUS PALABRAS CLAVE & TEMÁTICAS A OPTIMIZAR EN TU SITIO WEB MÓVIL EN BASE A ESTO
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
RELEVANCIA
VOLUMEN DE BÚSQUEDA COMPETENCIA
ESTACIONALIDAD INTENCIÓN
EXISTENCIA FORMATO
POSICIONAMIENTOTRÁFICO
CONVERSIONES
COMPORTAMIENTO DE INDUSTRIA
CONTENIDO ACTUAL
VOLUMEN
RENTABILIDAD
OFERTA DE NEGOCIO
3#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
SELECCIONA TU TIPO DE WEB MÓVIL
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
PUEDES HABILITAR TU WEB MÓVIL A TRAVÉS DE 3 ALTERNATIVAS
USA LOS DATOS DEL ANÁLISIS ANTERIOR PARA ELEGIR LA MEJOR PARA TU SITUACIÓN
La funcionalidad y contenido móvil deseado
El perfil identificado de la audiencia móvil
La capacidad de desarrollo Web Móvil Tu Tipo de Web Móvil
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
HACIENDO LAS SIGUIENTES PREGUNTAS
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
EXISTEN BUENAS PRÁCTICAS SEO TANTO PARA LA OPTIMIZACIÓN GENERAL COMO ESPECÍFICA DE LAS MISMAS
BUENAS PRÁCTICAS SEO GENERALES
BUENAS PRÁCTICAS PARA
SITIOS RESPONSIVE
BUENAS PRÁCTICAS PARA
SITIOS DINÁMICOS
BUENAS PRÁCTICAS PARA
WEB MÓVILES PARALELAS
4#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
APRENDAMOS DE LAS BUENAS PRÁCTICAS DE SEO MÓVIL GENERALES
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
OPTIMIZA TU VELOCIDAD WEB MÓVIL CON PAGESPEED INSIGHTS
https://developers.google.com/speed/pagespeed/insights/
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
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
HAZ TU PÁGINAS MÓVILES RELEVANTES ENFOCÁNDOLAS A TUS PALABRAS CLAVE OBJETIVO
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
USA DATOS ESTRUCTURADOS PARA TU CONTENIDO MÓVIL
https://support.google.com/webmasters/answer/99170?hl=en
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
CREA PRESENCIA EN GOOGLE+ PARA NEGOCIOS SI ERES LOCAL
http://www.google.com/intl/es/business/
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
PERMITE A TUS VISITANTES IR A LAS VERSIONES ALTERNATIVAS DE TU WEB
5#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
AHORA VEAMOS CUÁLES SON LAS RECOMENDACIONES PARA UN SITIO
WEB RESPONSIVE
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
¿QUÉ ES UNA WEB RESPONSIVE?
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
VERIFICA TU DISEÑO WEB RESPONSIVE
http://mattkersley.com/responsive/
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
CÓMO FUNCIONA EL DISEÑO RESPONSIVE
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
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
PROS & CONTRAS DE WEBS RESPONSIVE
+ -PROS CONTRASSin 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
PROS & CONTRAS DE WEBS RESPONSIVE
+ -PROS CONTRASSin 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
Tu alternativa Web móvil si es técnicamente factible, tu oferta desktop es la misma móvil y fácilmente adaptable
sin perjudicar la experiencia del usuario.
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
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
NO BLOQUEES LOS RECURSOS DE TU WEB (JS, CSS, IMÁGENES)
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
LA VELOCIDAD & VISUALIZACIÓN NECESITAS DE MAYOR ATENCIÓN
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
AQUÍ UN EJEMPLO DE DISEÑO WEB RESPONSIVE
6#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
¿CUÁLES SON LAS BUENAS PRÁCTICAS SEO PARA WEBS MÓVILES DINÁMICAS?
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
¿QUÉ ES UNA WEB MÓVIL DINÁMICA?
USA WEB SNIFFERS, USER AGENT SWITCHERS & EMULADORES PARA PROBAR SI UNA WEB MÓVIL ES DINÁMICA
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
http://www.mobilephoneemulator.com/
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
PROS & CONTRAS DE WEBS DINÁMICAS
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
+ -PROS CONTRAS
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
PROS & CONTRAS DE WEBS DINÁMICAS
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
+ -PROS CONTRASLo mejor si necesitas contenido, funcionalidad y experiencia
de usuario móvil diferenciado o si es el mismo pero no puedes implementar una responsive Web.
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
AÑADE EL VARY HTTP HEADER A TUS URLS
http://www.web-sniffer.net
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
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
AQUÍ UN EJEMPLO DE SITIO WEB DINÁMICO
6#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
APRENDAMOS DE LAS BUENAS PRÁCTICAS SEO PARA WEB MÓVILES
PARALELAS
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
¿QUÉ ES UN SITIO WEB MÓVIL PARALELO?
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
VERIFICA UN SITIO WEB PARALELO
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
PROS Y CONTRAS DE SITIOS PARALELOS
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
+ -PROS CONTRAS
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
PROS Y CONTRAS DE SITIOS WEB MÓVILES PARALELOS
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
+ -PROS CONTRASSi necesitas contenido, funcionalidad y experiencia de usuario móvil diferenciado pero no puedes implementar dynamic serving o si es el mismo pero no puedes implementar una
responsive Web.
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
CÓMO DEBEN FUNCIONAR LAS REDIRECCIONES
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
CREA UNA ESTRUCTURA WEB MÓVIL PARALELA RELEVANTE Y CONSISTENTE
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
AÑADE ANOTACIONES REL ALTERNATE & CANONICAL EN LAS URLS
https://developers.google.com/webmasters/smartphone-sites/details
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
AÑADE EL ATRIBUTO REL ALTERNATE EN EL XML SITEMAP DE LA VERSIÓN DESKTOP
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
VEAMOS UN EJEMPLO DE WEB MÓVIL PARALELA
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
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
ES MOMENTO DE MAXIMIZAR TU POTENCIAL MÓVIL
#SEOMOVIL POR @ALEYDA DE @ORAINTI PARA #EMMS2014
¡Muchas Gracias! ¿Tenéis Preguntas?