SlideShare uma empresa Scribd logo
1 de 46
Baixar para ler offline
SEO
para
AMP
Hola!
Soy Cristián Sepúlveda
Consultor SEO
Fundador de mediatools.cl y rank.tools.
Estoy aquí porque amo el SEO igual que tu
1.
¿Que es AMP?
 Arquitectura HTML/Javascript
 Sistema de distribución CDN
 Sistema de cache
¿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.
SEO
para AMP
¿Que podemos hacer?
PUES BASTANTE
UX
Código
Social
Datos
estructurados
OPTIMIZA TU
CÓDIGO
▸CSS
▸Carga de librerías
▸Uso de GTM
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
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>
USA
GTM
+ flexibilidad
+ control sobre UE
- código
USA GTM
+ FLEXIBILIDAD
GTM te permite manejar todo desde la nube
en vez de definir cada cambio a mano.
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
USA GTM
- CÓDIGO
Pixel de GTM
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-
XXXXXXX&amp;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
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
UX
UX
Código
Social
Datos
estructurados
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
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>
UX
AMP != VERSION LIGHT
Debes mantener los mismos contenidos
en tu sitio de escritorio y en tu AMP
✔ ✗
UX
AMP != VERSION LIGHT
Preocúpate de dar una UX similar, muy
similar en AMP y escritorio.
TIENE
SENTIDO?
Place your screenshot here
Place your screenshot here
UX
HEADLINE
Crea Headlines increíblemente
atractivos
✔✗
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
UX
EVITA USAR %
Prefiere usar dimensiones exactas y no % para
evitar retrasos en el procesamiento del layout
por parte del browser.
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
UX
USA AMP-EXPERIMENT
Gestiona y mide cambios en la experiencia de usuario.
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
?
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
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
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
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>
Como usar
AMP-EXPERIMENT
Configura tu GA
4
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
UX
ELEMENTOS QUE TE AYUDARÁN
▸ Carousel
▸ Video
▸ Imágenes
▸ Tabs
▸ Sidebars
▸ Lightbox
▸ Image Lightbox
▸ Iframe
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
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
DATOS
ESTRUCTURADOS
Código
Social
UX
Datos
estructurados
DATOS
ESTRUCTURADOS
Si quieres ayudar a Google a
entender mejor tu contenido
Mejora tu performance en los
SERPS
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
DATOS ESTRUCTURADOS
DESTACA EN LOS SERPS
Usa NewsArticle
• mainEntityOfPage
• headline
• image
• publisher
• datePublished
• dateModified
• author (author.name)
• description
DATOS ESTRUCTURADOS
DESTACA EN LOS SERPS
Usa Recipies
name
prepTime
image
recipeIngredient
recipeInstructions
aggregateRating
author (author.name)
description
DATOS ESTRUCTURADOS
DESTACA EN LOS SERPS
Muchos mas
Organization
Hotel
5 Star rating
rel=next / prev
Video
AggregateRating
Reviews
Local businesses
DATOS ESTRUCTURADOS
USA VALIDADOR
search.google.com/structured-data/testing-tool/
linter.structured-data.org/
SOCIAL
SHARE
Código
Social
UX Datos
estructurados
Usa librería Social Share
y personaliza con CSS
Facebook Open Graph
Twitter Cards
SOCIAL
SHARE
SOCIAL SHARE
PERSONALIZA CON CSS
GRACIAS!
Preguntas?
@tacorlius

Mais conteúdo relacionado

Mais procurados

Caso practico tecnicas de priorizacion
Caso practico tecnicas de priorizacionCaso practico tecnicas de priorizacion
Caso practico tecnicas de priorizacionJorman García
 
WooCommerce desde otro punto de vista
WooCommerce desde otro punto de vistaWooCommerce desde otro punto de vista
WooCommerce desde otro punto de vistaPablo Poveda Ortega
 
Ventana de Power Point
Ventana de Power PointVentana de Power Point
Ventana de Power PointMiguelCime
 
WP-CLI: Dispara tu productividad, simplifica tus rutinas
WP-CLI: Dispara tu productividad, simplifica tus rutinasWP-CLI: Dispara tu productividad, simplifica tus rutinas
WP-CLI: Dispara tu productividad, simplifica tus rutinasPablo Poveda Ortega
 

Mais procurados (6)

Ppower hoy
Ppower hoyPpower hoy
Ppower hoy
 
Caso practico tecnicas de priorizacion
Caso practico tecnicas de priorizacionCaso practico tecnicas de priorizacion
Caso practico tecnicas de priorizacion
 
WooCommerce desde otro punto de vista
WooCommerce desde otro punto de vistaWooCommerce desde otro punto de vista
WooCommerce desde otro punto de vista
 
Video en boostrap
Video en boostrapVideo en boostrap
Video en boostrap
 
Ventana de Power Point
Ventana de Power PointVentana de Power Point
Ventana de Power Point
 
WP-CLI: Dispara tu productividad, simplifica tus rutinas
WP-CLI: Dispara tu productividad, simplifica tus rutinasWP-CLI: Dispara tu productividad, simplifica tus rutinas
WP-CLI: Dispara tu productividad, simplifica tus rutinas
 

Semelhante a SEO para AMP

Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)Adolfo Sanz De Diego
 
Open erp presentacion_olivier_jornadas_bilbao2010
Open erp presentacion_olivier_jornadas_bilbao2010Open erp presentacion_olivier_jornadas_bilbao2010
Open erp presentacion_olivier_jornadas_bilbao2010openerpsite
 
Pilares WPO - Fundamentos y estrategias - Fabuloso Madrid
Pilares WPO - Fundamentos y estrategias - Fabuloso MadridPilares WPO - Fundamentos y estrategias - Fabuloso Madrid
Pilares WPO - Fundamentos y estrategias - Fabuloso MadridFernando Puente
 
Jsf Java Server Faces
Jsf   Java Server FacesJsf   Java Server Faces
Jsf Java Server Facescok12v
 
Mejorar WPO en WordPress
Mejorar WPO en WordPressMejorar WPO en WordPress
Mejorar WPO en WordPressAntonio Torres
 
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)SiteGround España
 
WPO para bloggers de viaje: mejora el tiempo de carga de tu blog
WPO para bloggers de viaje: mejora el tiempo de carga de tu blogWPO para bloggers de viaje: mejora el tiempo de carga de tu blog
WPO para bloggers de viaje: mejora el tiempo de carga de tu blogAlfonso Moure Ortega
 
Taller SEM ENassar@Clandestina-Sesion3 (PPC)
Taller SEM ENassar@Clandestina-Sesion3 (PPC)Taller SEM ENassar@Clandestina-Sesion3 (PPC)
Taller SEM ENassar@Clandestina-Sesion3 (PPC)Erick Nassar
 
Rich Snippets - Congreso Web 2012
Rich Snippets - Congreso Web 2012Rich Snippets - Congreso Web 2012
Rich Snippets - Congreso Web 2012Pedro Martínez
 
Antonio Torres - WPO Wordpress - EN@E Digital Meeting
Antonio Torres - WPO Wordpress - EN@E Digital MeetingAntonio Torres - WPO Wordpress - EN@E Digital Meeting
Antonio Torres - WPO Wordpress - EN@E Digital MeetingENAE Business School
 
Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web)
Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web)Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web)
Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web)lenny
 
Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web)
Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web)Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web)
Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web)INSIGNIA4U
 
Grails: Framework para el desarrollo de aplicaciones Web No 6
Grails: Framework para el desarrollo de aplicaciones Web No 6Grails: Framework para el desarrollo de aplicaciones Web No 6
Grails: Framework para el desarrollo de aplicaciones Web No 6Esteban Saavedra
 

Semelhante a SEO para AMP (20)

Los 10 mandamientos del WPO
Los 10 mandamientos del WPOLos 10 mandamientos del WPO
Los 10 mandamientos del WPO
 
3A5 Trejo Alexandra -Tarea 2
3A5 Trejo Alexandra -Tarea 23A5 Trejo Alexandra -Tarea 2
3A5 Trejo Alexandra -Tarea 2
 
Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)Responsive Web Design (Diseño Web Adaptable)
Responsive Web Design (Diseño Web Adaptable)
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Open erp presentacion_olivier_jornadas_bilbao2010
Open erp presentacion_olivier_jornadas_bilbao2010Open erp presentacion_olivier_jornadas_bilbao2010
Open erp presentacion_olivier_jornadas_bilbao2010
 
Pilares WPO - Fundamentos y estrategias - Fabuloso Madrid
Pilares WPO - Fundamentos y estrategias - Fabuloso MadridPilares WPO - Fundamentos y estrategias - Fabuloso Madrid
Pilares WPO - Fundamentos y estrategias - Fabuloso Madrid
 
Jsf Java Server Faces
Jsf   Java Server FacesJsf   Java Server Faces
Jsf Java Server Faces
 
Mejorar WPO en WordPress
Mejorar WPO en WordPressMejorar WPO en WordPress
Mejorar WPO en WordPress
 
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
Cómo mejorar-la-velocidad-de-tu-web (Cámara madrid)
 
WPO para bloggers de viaje: mejora el tiempo de carga de tu blog
WPO para bloggers de viaje: mejora el tiempo de carga de tu blogWPO para bloggers de viaje: mejora el tiempo de carga de tu blog
WPO para bloggers de viaje: mejora el tiempo de carga de tu blog
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Taller SEM ENassar@Clandestina-Sesion3 (PPC)
Taller SEM ENassar@Clandestina-Sesion3 (PPC)Taller SEM ENassar@Clandestina-Sesion3 (PPC)
Taller SEM ENassar@Clandestina-Sesion3 (PPC)
 
Rich Snippets - Congreso Web 2012
Rich Snippets - Congreso Web 2012Rich Snippets - Congreso Web 2012
Rich Snippets - Congreso Web 2012
 
Antonio Torres - WPO Wordpress - EN@E Digital Meeting
Antonio Torres - WPO Wordpress - EN@E Digital MeetingAntonio Torres - WPO Wordpress - EN@E Digital Meeting
Antonio Torres - WPO Wordpress - EN@E Digital Meeting
 
Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web)
Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web)Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web)
Descubriendo Ruby on Rails (Desarrollo Agil de Aplicaciones Web)
 
Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web)
Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web)Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web)
Descubriendo Ruby On Rails (Desarrollo Agil De Aplicaciones Web)
 
Grails: Framework para el desarrollo de aplicaciones Web No 6
Grails: Framework para el desarrollo de aplicaciones Web No 6Grails: Framework para el desarrollo de aplicaciones Web No 6
Grails: Framework para el desarrollo de aplicaciones Web No 6
 

SEO para AMP