Estrategias de posicionamiento para un mundo que busca desde el móvil
-
Upload
semrushes -
Category
Presentations & Public Speaking
-
view
128 -
download
0
Transcript of Estrategias de posicionamiento para un mundo que busca desde el móvil
Estrategias SEO para un mundo que busca
desde el móvilFernando Maciá
Human Level Communications
Mobile supera en noviembre de 2016 al tráfico desktop por primera vez (StatCounter)
Google avisó, y en noviembre de 2016 llegó el aviso definitivo: ahora “sí que sí”
¿Qué significa este aviso de índice “mobile-first”?
En algún momento pronto, los algoritmos de Google emplearán el contenido móvil de un sitio para rastrearlo, indexarlo y clasificarlo
Los sitios Web con diseño adaptativo (responsive) no es necesario que hagan nada (en principio)
Sitios Web con HTML dinámico o versión mobile específica sí tienen recomendaciones que conviene tener en cuenta.
Usar mismo marcado de datos tanto en versión desktop como en la versión mobile
Añade tu sitio mobile específico a Google Search Console y verifica su propiedad
Comprobar que la configuración de robots.txt no impide el acceso al contenido mobile
No es necesario cambiar la configuración de los alternate/canonical entre versiones
http://www.example.com/page-1
http://m.example.com/page-1
Limitaciones: velocidad/ancho de banda
Dial Up 3G ADSL 4G Fibra óptica
36.6 KB/s
300MB/s
20MB/s10
MB/s3MB/s
Limitaciones: área, formato y resolución de pantalla
iPhone 5S
iPhone 6 Plus
iPad Air 2
MacBook 15" Retina iMac Retina 5K
Limitaciones: interfaz de acceso
Ausencia de teclado físico: más incómodo teclear textos largos o muchos datos
Ausencia de ratón: puntero más impreciso
Navegación orientada a las opciones “más probables”
Limitaciones: interfaz de acceso
El uso de interfaces de entrada por voz está cambiando profundamente el escenario de uso de los terminales mobile: asistentes personales
Configurar formularios para facilitar el autocompletado…
¿Qué parte de tu público usa dispositivos móviles y procede de SEO?
Comparando indicadores de calidad del tráfico que llega desde distintos dispositivos
Comparando el comportamiento del tráfico que llega desde distintos dispositivos
Comparando las mejores landing pages de tráfico orgánico desktop vs. mobile
Análisis de búsquedas en Google Search Console comparando por tipo de dispositivo
Y… ¿estamos preparados? Comprobamos con la Prueba de optimización para móviles de Google
Google introdujo su robot mobile en diciembre de 2011
OPCIONES:
Responsive Web design
HTML dinámico usando una única URL
Versión mobile específica (m.domain.com)
AMP
Apps (no adecuadas para descubrimiento vía Web)
Responsive design
Una única fuente de código HTML
Una única URL
Un único contenido para rastrear
Un CSS distinto dependiendo del tipo de dispositivo en el que se muestra la Web
HTML dinámico
Diferente contenido HTML
Diferente CSS
Misma URL
El servidor devuelve la versión dependiendo del dispositivo de navegación
Importante incluir la cabecera http “Vary: User-agent” para impedir ser detectados por cloaking
Versión mobile (m.domain.com)
Diferentes archivos HTML
Diferentes archivos CSS
Diferentes URL
Se indexa la URL de la versión desktop
Importante incluir cabeceras HTML “alternate” y “canonical”
Implica implementar un redirect por UAEN LA VERSIÓN DESKTOP (http://www.example.com/page-1)
EN LA VERSIÓN MOBILE (http://m.example.com/page-1)
Qué es AMP: Accelerated Mobile Pages
Una iniciativa de código abierto promovida por Google junto con un gran número de medios de todo el mundo y otros socios tecnológicos.
Nace con el objetivo de mejorar la velocidad de carga de las páginas web para móviles.
Cómo mejora AMP la velocidad
AMP HTML: se basa en web components que consiguen aligerar la cantidad de HTML necesaria
AMP JS: se restringe el uso de JavaScript a código propio de AMP
Uso de cachés de Google: el uso de los CDN del propio proyecto permite que este tipo de servidor obtenga las páginas AMP para servirlas al usuario de forma óptima
SEO AMP
La versión AMP no deja de ser una copia del contenido canónico, por lo que para evitar indexar contenido duplicado son necesarias 2 etiquetas:
Versión HTML: canonical a la propia página y etiqueta de enlace amphtml referenciando a la versión AMP Versión AMP: canonical a la versión HTML
Configuración AMP en versión desktop
<link href="http://futbol.as.com/futbol/2017/01/18/primera/1484779465_999489.html" rel="canonical" >
<link href="http://futbol.as.com/futbol/2017/01/18/primera/1484779465_999489.amp.html" rel="amphtml" >
<link rel="alternate" href="http://mexico.as.com/mexico/2017/01/19/futbol/1484804695_409055.html" hreflang="es-mx" />
<link rel="alternate" href="http://futbol.as.com/futbol/2017/01/18/primera/1484779465_999489.html" hreflang="es" />
Configuración AMP en versión AMP
<link href="http://futbol.as.com/futbol/2017/01/18/primera/1484779465_999489.html" rel="canonical" >
AMP se almacena y se sirve desde cachés en Google
https://www.google.es/amp/futbol.as.com/futbol/2017/01/18/primera/1484779465_999489.amp.html
Responsive: ventajas
Fácil de mantener
Evita problemas potenciales de contenido duplicado/cloaking
Todos los enlaces se consolidan sobre un único contenido
Optimizamos el crawl rate
No es necesario implementar redirecciones en el servidor
Responsive: desventajas
A veces, el escenario de uso del sitio Web es distinto para el usuario que usa cada dispositivo, por lo que el responsive es menos flexible para adaptarse a cada escenario para la mejor experiencia de usuario
Determinadas maquetaciones o plantillas puede ser complicado adaptarlas a diseño adaptativo
Puede verse afectado el peso y la velocidad de descarga por la necesidad de adaptarse a múltiples formatos de pantalla
HTML dinámico: ventajas
Seguimos teniendo una única URL por contenido: no hay problema de contenido duplicado.
La popularidad se concentra en las mismas URL que en diseño adaptativo.
Es más flexible para adaptar el contenido a cada escenario para una mejor experiencia de usuario
Podemos optimizar mejor el peso de la descarga necesaria a cada dispositivo.
HTML dinámico: desventajas
Más complicado de mantener.
Más caro de desarrollar: necesitaremos duplicar el diseño de plantillas, prototipos, hojas de estilo, imágenes…
Aunque el HTML dinámico se puede adaptar a distintos tipos de dispositivos, la variedad hace imposible que se pueda adaptar de una forma perfecta a todos ellos.
Mobile específica: ventajas
Implementación y desarrollo, en principio, más sencillos
Se puede optimizar el código, peso de la descarga, diseño, etc. para adaptarse de forma óptima a cada dispositivo
Se puede adaptar el contenido y la navegación para adaptarse a cada escenario de uso
Se puede optimizar reduciendo las opciones a la navegación más probable para ahorrar pasos
Mobile específica: desventajas
Hay más riesgos de que, en caso de no implementarse correctamente los alternate/canonical, pueda detectarse contenido duplicado.
En caso de URLs únicas mobile, hay que transferirles parte de la popularidad desde la versión desktop para que posicionen
El coste y complicación del mantenimiento es más elevando. Se trata, prácticamente, de dos sitios Web independientes.
Comprobando respuesta del servidor con Web-Sniffer usando distintos user-agents
Comprobando respuesta del servidor con Web-Sniffer usando distintos user-agents
Requisitos para que las noticias aparezcan como destacadas en búsquedas móviles
Implementación HTML AMP correcta
Implementación de microformatos correctos (sin errores, sí están permitidos los warnings)
Validar la implementación AMP
Plugin para Chrome: valida la implementación AMP https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc
Versión Web: valida la implementación AMP y datos estructurados https://search.google.com/search-console/amp
Validación mobile: Google Developers
Contenido duplicado/cloaking
En implementaciones de diseño adaptativo no se pueden dar debido a que hay una única fuente HTML
En implementaciones de HTML dinámico, debemos implementar la cabecera http-vary para evitar la detección de cloaking
En implementaciones de versiones mobile específicas, debemos implementar los elementos alternate/canonical recíprocos
Contenido duplicado/cloaking
Si hay páginas mobile específicas sin contenido equivalente en la versión desktop, no hay problema en indexar esas páginas.
En ese caso, estas páginas no deben implementar ningún canonical.
Para asegurar la indexación y transferir popularidad, deberán estar enlazadas desde al menos algunas páginas de la versión desktop.
Algunas ideas más…
Diseña la arquitectura y prototipado de tu sitio Web pensando en los escenarios de uso de tus clientes potenciales y sus necesidades
Incluye mecanismos de ayuda para comprobar la usabilidad del sitio o ayudar a los clientes a terminar sus procesos (conversión, compra, reserva…) incluyendo un número de teléfono.
Ordena los menús por opciones más probables
Incluye mecanismos de autorelleno de formularios
Plantea añadir social logins para facilitar el registro de nuevos usuarios
Prepara tu sitio para las búsquedas de voz
Fernando Maciá Domene @fernandomaciaCEO Human Level Communications
@fernandomacia @humanlevel@HLCFormacion