AMP – Google Accelerated Mobile Pages para WordPress – En Español
Articles Blog

AMP – Google Accelerated Mobile Pages para WordPress – En Español

August 10, 2019


Alguna vez te has preguntado como hacer que
tu sitio web tenga esta función llamada AMP. Si eres usuario de WordPress has llegado al
video correcto, te mostraré los plugins que necesitas para hacer que funcione esta característica
y ademas el como verificar que esté funcionando apropiadamente. Bienvenido. Accelerated Mobile Pages Project o también
conocido como AMP, que es exactamente y cuales son los beneficios, cubriremos esta parte
antes de ir al tutorial. Y esencialmente AMP lo que hace es acelerar
por mucho las páginas web de tu sitio especialmente para los dispositivos móviles, esta característica
lo has estado viendo ya en Facebook con una función llamada Instant Articles la cual
al click hace que la pagina cargue en ese momento. Sin embargo si das click en un articulo que
no tiene estas características AMP o instantáneas inclusive conectado a una conexión rápida
de internet podrá tomar 2 o 3 segundos en cargar el contenido, a veces mas. Los artículos instantáneos cargan inmediatamente
y esencialmente la version de esto para Google se llama AMP. Así que veamos cual es la diferencia, estamos
a mi sitio web y elegimos una publicación de blog, esta es la version normal que un
usuario puede encontrar al navegar por el sitio web. Sin embargo la version que recoge Google para
mostrar desde el buscador de este mismo articulo es la siguiente, a la dirección que tienes
en la parte superior agregas la terminación AMP. Esta es la version de articulo instantáneo,
si puedes observar todas las características de diseño se fueron para solo dejar visibles
el cuerpo del contenido del blog, no hay widgets, pop-ups, nada que pueda alentar el sitio web,
por eso es instantáneo. Si la persona quisiera seguir navegando en
nuestro sitio tiene que dar click en la parte superior para ir directamente a la pagina
web pero ya version normal. Así que esta es la diferencia entre una pagina
normal y una con AMP. Ahora si, para instalar esta función en tu
sitio web con plataforma WordPress necesitas instalar el siguiente Plugin, en la descripción
te dejo el link. Este plugin se llama AMP, descárgala e instalada
como cualquier otro plugin a tu WordPress, hago el proceso el pantalla por si no sabes
como hacerlo. Puedes pausar el video en cualquier momento
si es que voy muy rápido para ti. Ya instalado este plugin ahora te recomiendo
ampliamente utilizar este otro si es que utilizas YOAST SEO, el cual te permitirá darle formato
a la función AMP. Este plugin se llama Glue for Coast SEO & AMP. Y me ha permitido no tener que lidiar con
el código de forma directa de esta nueva función que le estamos implementando a nuestro
sitio web. Así que descárgalo e instalado también. No olvides activar ambos. Ya una vez hecho lo anterior ve a tu panel
de administración de WordPress. Si observas detenidamente tu barra lateral
izquierda, en el apartado de SEO que es el del plugin Coast se agregó un nuevo renglon
llamado AMP. Lo ves? Da click en este y una de las cosas que modifiqué
y espero que me sigas en este punto. En la primera pestaña con el nombre Post-Type
dejé activado la opción de AMP para publicaciones o Posts y las demás desactivadas, esto con
una razón importante, al momento de hacer este video AMP solo funciona para entradas
de blog y no para el resto del sitio, el mismo google dice que eventualmente tendrán soporte
para el sitio web completo, de momento no es así, puedes preguntarme en los comentarios
si ha habido cambios para que puedas activar las demás opciones, de momento las dejamos
como lo ves en pantalla. Ahora en la pestaña de diseño, tienes la
opción de agregar un icono en la parte superior de tu pagina optimizada con AMP que te recomiendo
hacerlo. La imagen de Default es importante que la
coloques, no es tu logotipo, es una imagen que aparece cuando copias la URL y la sueltas
por ejemplo en una red social, es una imagen que da una previsualizacion de la pagina,
en este caso una imagen normal con tu marca para el truco, pero no lo dejes vacío ya
que llega a presentar problemas de estabilidad. El otro cambio que realice es en la sección
de links en donde estos vienen por default en blanco y siempre he dicho que los links
deben sobresalir del resto del texto, por esta razón te recomiendo colocarlo en un
color como azul, para que destaque. Y finalmente en la pestaña de Analytics coloca
tu código de Google Analytics para que puedas conocer el numero de visitas que llegan a
estas versiones de hoja, te sorprenderá. Ahora como puede aprobar que todo esto funcione
correctamente Todo lo que necesitamos hacer ahora es ir
a una publicación. En pantalla observamos la version normal o
web. Para checar si la version amp esta funcionando
es necesario agregar manualmente al final de la dirección web que aparece en tu navegador
la palabra AMP justo como lo estamos haciendo en pantalla. Si ves que aparece esta version simplificada
es por que está funcionando, pero si quieres saber por un tercero si esta version está
instalada correctamente te recomiendo ir al Validador de Merkel SEO, también te dejo
el link en la descripción. Desde esta plataforma podrás ver si pasa
la evaluación de amp. Necesitas colocar la dirección con la terminación
AMP y no olvides colocar al final la diagonal que por alguna razón sin está no funciona
este sistema. Y ahi lo tienes, version AMP funcionando correctamente
para esta y las demás entradas de tu sitio web, esto le dará un gran impulso de posicionamiento
a tu pagina de internet en Google version dispositivos móviles y proveerás una experiencia
extraordinaria a los visitantes que a partir de ahora encuentren y entren a tu sitio web. En otro video te explicaré como aplicar esto
mismo de los artículos instantáneos ahora para Facebook.

Only registered users can comment.

  1. Hola Rodrigo. Felicidades por tu excelente video. Tengo confusión con el plugin Yoast seo glue. Dice que en la pestaña “design” se debe subir una imagen de por lo menos 697 px de ancho si no se tienen imágenes destacadas. En mis posts sólo tengo imágenes de hasta 500 px. ¿Quiere esto decir que debo subir una imagen mayor de 697 px por cada post? Por favor explícame. Gracias

  2. Hola, me gustaria saber si en la dirección web el usuario tiene que colocar amp, para tener acceso a esa función?

  3. Nunca contesta este amigo alguno de ustedes sabe acerca de que pasa si pegas tu código de seguimiento de google analitycs y una vez que le das guardar, ya no aparece nada, porque lo copie, le di guardar y no aparece nadam no se si de todas formas se guardo, porque en realidad no aparece ningún error

  4. alguno os da este error El texto (CDATA) de la etiqueta "style amp-custom" contiene "CSS i-amphtml- name prefix", que es un texto no permitido. ???

  5. Gracias por la información Rodrigo, en este tiempo cómo ha evolucionado el AMP? Me queda una duda, en que casos se debe usar y en que casos no? Gracias!

  6. Hola buen video, tengo una duda, ¿como hago con los anuncios de google addsense para colocarlos?.

  7. Hola Rodrigo. Excelente video. Lo seguí al pie de la letra, pero al final en el validator encuentro algunos errores que no se como corregir. Valid? (cruz roja) y rel="amphtml"(from canonical URL) también otra cruz roja. Te agradezco si me explicas como corregir eso o me indicas donde puedo leerlo. Gracias

  8. ¿Hola como puedo quitar amp en ciertas páginas?, es decir, quiero meter en las páginas pero hay una que no quiero que tenga amp, como haria? gracias

  9. Podia mostrar como faz a configuração de layout e temas para AMP, porque tem uns sites que ficam horrível depois dá instalação do AMP

  10. Como solucuono el problema que me dice que las imagenes que tengo en mi blog no son aptas para AMP. POR FAVOR ayuda

  11. Hola! Rodrigo comenta si ha habido cambios en la activación de toda ala pagina web o solo para las entradas?

Leave a Reply

Your email address will not be published. Required fields are marked *