SEO para AMP
Descargar como PPTX, PDF2 recomendaciones870 vistas
Cristián Sepúlveda, experto en SEO, habla sobre la importancia de AMP (Accelerated Mobile Pages) y cómo optimizar sitios web para mejorar su rendimiento en dispositivos móviles. Se sugieren técnicas como optimización de CSS, uso de Google Tag Manager (GTM) para gestionar eventos, y la implementación de datos estructurados para mejorar la visibilidad en los SERP. Además, se abordan herramientas y códigos útiles para implementar AMP de forma efectiva y mejorar la experiencia del usuario móvil.
![Como usar
AMP-EXPERIMENT
Importa librería JS
amp-experiment-0.1.js
Modifica tu CSS
body[amp-x-nombre-experimento=”nombreVariable"]
Define JSON
% de usuarios a los que llegará cada experimento
Mide con AMP Pixel, GA, GTM o Optimize
?](https://image.slidesharecdn.com/seoparaamp-170727135906/85/SEO-para-AMP-26-320.jpg)
![Como usar
AMP-EXPERIMENT
Modifica tu CSS
.selector {
propiedadCSS: valor;
}
body[amp-x-[NombreExperimento]=”variante1"] .selector {
propiedadCSS: valor;
}
body[amp-x-[NombreExperimento]=”variante2"] .selector {
propiedadCSS: otro valor;
}
Puedes forzar la visualización de un experimento
http://tuURL/#amp-x-NombreExperimento=1
2](https://image.slidesharecdn.com/seoparaamp-170727135906/85/SEO-para-AMP-28-320.jpg)
SEO para AMP
- 1. SEO para AMP
- 2. Hola! Soy Cristián Sepúlveda Consultor SEO Fundador de mediatools.cl y rank.tools. Estoy aquí porque amo el SEO igual que tu
- 3. 1. ¿Que es AMP? Arquitectura HTML/Javascript Sistema de distribución CDN Sistema de cache
- 4. ¿Por que AMP es tan importante? I/O 2017 5 Keynotes SEO, 4 de ellas AMP Google seguirá impulsado AMP por al menos 5 años o hasta que la latencia en móvil baje Google prefiere AMP como versión móvil de sitio 2.
- 5. SEO para AMP ¿Que podemos hacer?
- 7. OPTIMIZA TU CÓDIGO ▸CSS ▸Carga de librerías ▸Uso de GTM
- 8. OPTIMIZA TU CSS ▸ En serio, ¿50K? ▸ No uses frameworks de terceros, implementa el tuyo ▸ Minifica todo Puedes usar https://cssminifier.com/ ▸ Usa validadores Google Chrome Dev Console (#development=1) https://validator.ampproject.org Extensión de Browser
- 9. OPTIMIZA LA CARGA DE LIBRERÍAS ▸ IFRAME ▸ YOUTUBE ▸ LIGHTBOX ▸ ETC SI NO LAS VAS A USAR NO LAS CARGUES O TENDRAS PROBLEMAS EN GSC <script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script> <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
- 10. USA GTM + flexibilidad + control sobre UE - código
- 11. USA GTM + FLEXIBILIDAD GTM te permite manejar todo desde la nube en vez de definir cada cambio a mano.
- 12. USA GTM + control del UE Con GTM puedes medir el impacto de todos los elementos en tu pagina, incluyendo: ▸ Scroll ▸ Imágenes ▸ Tiempo en la página ▸ Clicks en botones sociales ▸ mas
- 13. USA GTM - CÓDIGO Pixel de GTM <amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM- XXXXXXX&gtm.url=SOURCE_URL" data-credentials="include" class="i-amphtml-element i- amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout" style="width: 1px; height: 1px; display: none;" aria-hidden="true"></amp-analytics> Con GTM usas siempre 1 sola línea de código
- 14. USA GTM - CÓDIGO <amp-analytics type="googleanalytics"> <script type="application/json"> { "vars": { "account": "UA-XXXXXXX-1" }, "triggers": { "default pageview": { "on": "visible", "request": "pageview", "vars": { "title": "Product" } } ; "triggers": { "default pageview": { "on": "visible", "request": "pageview", "vars": { "title": ”Category" } } } } </script> </amp-analytics> Sin GTM debes declarar cada Trigger en el código, Cuando declaras 25 triggers, esto puede ser un problema
- 16. UX USER EXPERIENCE Dale a tus usuarios móviles el mismo o mejor trato que a tus usuarios de escritorio Google prefiere AMP como versión móvil de sitio
- 17. UX PERSONALIZA CON CSS amp-carousel { margin: 0; background-color:rgba(251,255,255,0.5); top:110px; } <amp-carousel class=”algunaclase claseparatextos otraparadiagramar" width="400" height="350" layout="responsive" type="slides" autoplay>
- 18. UX AMP != VERSION LIGHT Debes mantener los mismos contenidos en tu sitio de escritorio y en tu AMP ✔ ✗
- 19. UX AMP != VERSION LIGHT Preocúpate de dar una UX similar, muy similar en AMP y escritorio.
- 20. TIENE SENTIDO? Place your screenshot here Place your screenshot here
- 22. UX GOOGLE FONTS Y FONT AWESOME ¿Para que usar imágenes si puedes usar tipografía nativa para definir iconos? Dale un aspecto distinto a tu web usando tipografías atractivas o fuera de lo común o simplemente más fáciles de entender
- 23. UX EVITA USAR % Prefiere usar dimensiones exactas y no % para evitar retrasos en el procesamiento del layout por parte del browser.
- 24. UX USA AMP-BIND AMP-BIND es algo así que AJAX pero para AMP Dinamiza datos sin recargar tu pagina Se usa mucho en ecommerce pero puedes usarlo para lo que sea que estés usando hoy AJAX
- 25. UX USA AMP-EXPERIMENT Gestiona y mide cambios en la experiencia de usuario.
- 26. Como usar AMP-EXPERIMENT Importa librería JS amp-experiment-0.1.js Modifica tu CSS body[amp-x-nombre-experimento=”nombreVariable"] Define JSON % de usuarios a los que llegará cada experimento Mide con AMP Pixel, GA, GTM o Optimize ?
- 27. Como usar AMP-EXPERIMENT Importa librería JS <script async custom-element="amp- experiment" src="https://cdn.ampproject.org/v0/amp- experiment-0.1.js"></script> 1
- 28. Como usar AMP-EXPERIMENT Modifica tu CSS .selector { propiedadCSS: valor; } body[amp-x-[NombreExperimento]=”variante1"] .selector { propiedadCSS: valor; } body[amp-x-[NombreExperimento]=”variante2"] .selector { propiedadCSS: otro valor; } Puedes forzar la visualización de un experimento http://tuURL/#amp-x-NombreExperimento=1 2
- 29. Como usar AMP-EXPERIMENT <amp-experiment> es un JSON nombre-experimento y sus variantes 3 <amp-experiment> <script type="application/json »> { "nombre-experimento": { "variants": { “variante0": 30, “variante1": 30, “variante2": 30 } }, "nombre-experimento2”: {…} } </script> </amp-experiment> El 10% restante lo asume el valor default definido en tu CSS
- 30. Como usar AMP-EXPERIMENT Mide con AMP Pixel, GA o Optimize 4 <amp-analytics type="googleanalytics"> <script type="application/json"> { "vars": { "account": "UA-tuanalytics" }, "requests": { "experiment": "${pageview}&xid=${nombreExperimento}&xvar=${variante}" }, "triggers": { "default pageview": { "on": "visible", "request": "experiment", "vars": { "nombreExperimento": "W4kYemYmQBSTIYNpoezCmg", "variante": "VARIANT(nombreExperimento)" } } } } </script> </amp-analytics>
- 32. Como usar AMP-EXPERIMENT Usa sticky ! Muéstra tu contenido a usuarios específicos Segmenta por grupos de experimentos Requiere aprobación del usuario Client ID identifica a un usuario hasta por 1 año
- 33. UX ELEMENTOS QUE TE AYUDARÁN ▸ Carousel ▸ Video ▸ Imágenes ▸ Tabs ▸ Sidebars ▸ Lightbox ▸ Image Lightbox ▸ Iframe
- 34. UX AMP y WordPress Usa el plugin AMP for WP para personalizar el diseño e incluir varias funcionalidades a tu AMP en WP http://rank.tools/3-mejores-plugins-amp/ PageFrog AMP Supremacy AMP for WP
- 35. UX VENTAJAS DE AMP FOR WP ▸ Editor AMP en páginas y post ▸ Personalización de CSS ▸ Themes que puedes editar/personalizar ▸ Incluir post relacionados ▸ Redirección automática para móviles ▸ Social ▸ Puedes usar extensiones
- 37. DATOS ESTRUCTURADOS Si quieres ayudar a Google a entender mejor tu contenido Mejora tu performance en los SERPS
- 38. DATOS ESTRUCTURADOS GUIDELINES Declara la canónica como mainEntityOfPage Tu Logo en un rectángulo de 60x600px no cuadrado Títulos no deben exceder los 110 caracteres
- 39. DATOS ESTRUCTURADOS DESTACA EN LOS SERPS Usa NewsArticle • mainEntityOfPage • headline • image • publisher • datePublished • dateModified • author (author.name) • description
- 40. DATOS ESTRUCTURADOS DESTACA EN LOS SERPS Usa Recipies name prepTime image recipeIngredient recipeInstructions aggregateRating author (author.name) description
- 41. DATOS ESTRUCTURADOS DESTACA EN LOS SERPS Muchos mas Organization Hotel 5 Star rating rel=next / prev Video AggregateRating Reviews Local businesses
- 44. Usa librería Social Share y personaliza con CSS Facebook Open Graph Twitter Cards SOCIAL SHARE
- 45. SOCIAL SHARE PERSONALIZA CON CSS