C贸mo implementar AMP en tu sitio web

C贸mo implementar AMP en tu sitio web

驴Quiere acelerar el tiempo de carga de sus p谩ginas web? Esta publicaci贸n
proporciona un proceso paso a paso para configurar AMP de manera
efectiva en su sitio web. AMP es utilizado con mayor frecuencia
por los sitios web de los editores (los principales medios de
comunicaci贸n, los sitios de tecnolog铆a, etc.), pero el uso
se est谩 extendiendo r谩pidamente.

| www.GustavoGuardadoRoa.com |

Costa Rica (506) 8322-2771 - seoanddesign @ gmail.com


sitios en la web facebook costa ricatwitter costa ricapinterest costa ricalinkedin costa ricayoutube costa ricamix sitios en la web costa ricatumblr sitios en la web costa ricainstagram sitios en la web costa ricagoogle my business sitios en la web costa rica

marketing digital

 

驴Qu茅 es AMP y c贸mo ayuda a mi sitio web?

AMP, anteriormente conocido como Accelerated Mobile Pages, son p谩ginas livianas dise帽adas para brindar a los usuarios de dispositivos m贸viles una experiencia incre铆blemente r谩pida y m谩s atractiva. Es "un marco HTML de c贸digo abierto que proporciona una forma sencilla de crear p谩ginas web que son r谩pidas, se cargan sin problemas y priorizan la experiencia del usuario por encima de todo".

驴Deber铆a usar amp para mi sitio web?

En el pasado, sol铆a reducir sus p谩ginas a sus versiones m谩s b谩sicas. Ahora, tiene suficiente flexibilidad para crear incluso las p谩ginas m谩s avanzadas. Entonces, si su sitio web m贸vil es lento y est谩 buscando una forma de optimizarlo, entonces AMP es una opci贸n perfectamente v谩lida a considerar.

驴Por qu茅 es importante AMP?

En pocas palabras, AMP es una forma de crear p谩ginas web para contenido est谩tico (p谩ginas que no cambian seg煤n el comportamiento del usuario), que permite que las p谩ginas se carguen (y se muestren previamente en la b煤squeda de Google) mucho m谩s r谩pido que el HTML normal.

驴AMP es bueno para el SEO?

C贸mo AMP ayuda al SEO. El principal beneficio de AMP es la velocidad. Por lo tanto, incluso si su sitio no se carga lo suficientemente lento como para activar la Actualizaci贸n de velocidad, una p谩gina m贸vil acelerada de carga r谩pida beneficiar谩 a sus usuarios. El rendimiento del servidor tambi茅n se mejora mediante el uso de AMP.

驴Por qu茅 Google AMP es malo?

Debido a que AMP elimina el contenido hasta la m茅dula y lo aloja todo dentro del servidor de Google, todo comienza a parecerse. Esto significa que puede hacer que aparezcan art铆culos falsos e historias de trampas de clics de phishing junto a las noticias leg铆timas.

驴AMP es bueno o malo?

En pocas palabras, AMP es r谩pido. A menos que su sitio m贸vil ya sea incre铆blemente r谩pido, hay muchas posibilidades de que AMP mejore la velocidad de su p谩gina. Adem谩s de ser importante para la experiencia del usuario, la velocidad de la p谩gina tambi茅n es un factor de clasificaci贸n reconocido para Google.

Implementando AMP en su sitio web y obtener una velocidad de carga supers贸nica

Velocidad de p谩gina.

驴Qu茅 importancia tiene como factor de clasificaci贸n?

La respuesta es: Un sitio web de carga r谩pida es indispensable. La capacidad de atenci贸n humana est谩 en una espiral descendente: nadie quiere esperar, especialmente si est谩 en un dispositivo m贸vil.

驴Qu茅 tan r谩pido debemos ser? Google recomienda un tiempo de carga de la p谩gina de menos de dos segundos.

Hay muchas medidas populares en los dominios t茅cnicos y en la p谩gina de SEO que lo ayudan a alcanzar el objetivo.

Sin embargo, una de esas medidas, la configuraci贸n de p谩ginas m贸viles aceleradas (AMP) para la versi贸n m贸vil de un sitio web, se utiliza con moderaci贸n.

驴Por qu茅? En pocas palabras, pasar a AMP requiere bastante tiempo, esfuerzo y fondos dependiendo del tama帽o del sitio web. Al final, puede que ni siquiera valga la pena.

驴Vale la pena invertir en AMP? Si la respuesta es s铆, esta publicaci贸n lo ayudar谩 con un proceso paso a paso para configurar AMP de manera efectiva para su sitio web de WordPress.

Paso 1: elige el complemento adecuado

Opciones de complementos

WordPress ofrece muchos complementos para AMP. He probado algunos de ellos con 茅xito en diversos grados. Uno de ellos dio resultados maravillosos en Google Pagespeed Insights durante un tiempo. 隆Pero rompi贸 todas mis p谩ginas AMP en dispositivos m贸viles!

Mi recomendaci贸n

Recomendar铆a el plugin AMP para WP - Accelerated Mobile Pages - WordPress. Este complemento proporciona muchas opciones para personalizar las p谩ginas web m贸viles. El resto de la publicaci贸n tratar谩 sobre la configuraci贸n de AMP para su sitio web utilizando este complemento.

Despu茅s de instalar y activar el complemento, el panel de WordPress mostrar谩 la opci贸n de abrir la versi贸n AMP de su sitio web. Tambi茅n ver谩 el nuevo complemento (AMP) como se resalta en la imagen de abajo.

Paso 2: configuraci贸n b谩sica del complemento

Tipo de sitio web

Seleccione la opci贸n que mejor represente su negocio. Seleccione 'otro' si nada m谩s coincide, obtendr谩 una opci贸n para escribir el tipo de su sitio web despu茅s de eso.

驴D贸nde necesitas AMP?

Seleccione d贸nde desea implementar AMP. Cuando opta por AMP, est谩 decidiendo mantener sus p谩ginas web m贸viles casi completamente en HTML. Debe soltar los c贸digos CSS / JS que reducen la velocidad de carga.

La desventaja es que la experiencia del usuario (UX) se ve afectada. Por ejemplo, ya no puede tener un bot贸n de llamada a la acci贸n (CTA) que gira para atraer la atenci贸n de un visitante. AMP elimina ese c贸digo, lo que ahorra tiempo de carga de la p谩gina. Esto eventualmente puede resultar en una tasa de participaci贸n reducida.

En la lista anterior, es posible que desee elegir tener AMP en sus p谩ginas, publicaciones o ambas.

Dise帽o y presentaci贸n

Aqu铆, puede configurar su logotipo, el tama帽o recomendado es de 120 x 90 p铆xeles. Recomendar铆a no usar el logotipo, ya que aumenta el tiempo de carga de la p谩gina. Si no se actualiza ning煤n logotipo en este panel, la p谩gina AMP solo tendr谩 el nombre del sitio web en lugar del logotipo.

La opci贸n Esquema de color global lo ayudar谩 a elegir un color para sus p谩ginas AMP que aparece en los enlaces de CTA en la p谩gina y en el enlace del pie de p谩gina.

Seguimiento anal铆tico

En este panel de opciones, puede habilitar las herramientas que usa para el seguimiento. Por ejemplo, puede habilitar Google Analytics agregando el ID de seguimiento. De esta forma, los datos de las p谩ginas AMP se actualizar谩n directamente en su cuenta de Google Analytics.

Del mismo modo, puede agregar varias otras herramientas de seguimiento como se muestra en la imagen de arriba.

La configuraci贸n de privacidad

La barra de notificaci贸n de cookies le permite solicitar el consentimiento de los visitantes para las cookies que utiliza en el sitio web. En la imagen de abajo, el cuadro de di谩logo en negro es una barra de aviso de cookies.

Si usted o su base de audiencia es de un pa铆s de GDPR, debe activar la configuraci贸n de GDPR - Reglamento general de protecci贸n de datos.

Tenga en cuenta que, si tiene que elegir, puede elegir solo una de las dos opciones, no ambas.

Anuncio publicitario

En este segmento, elija d贸nde desea colocar sus anuncios. Puede personalizarlo seg煤n sus necesidades: puede publicar anuncios en todo el sitio o en publicaciones individuales, o encabezados, entre otras opciones.

Puede elegir el tipo de anuncio, el tama帽o del anuncio y el cliente de anuncios de datos y el espacio publicitario de datos desde el c贸digo de anuncios de Adsense.

Compatibilidad con terceros

La 煤ltima entidad captura la lista de complementos para los que necesita compatibilidad con AMP.

Gravity Form y Elementor para AMP requieren que pague las extensiones. Los datos estructurados, los anuncios para WP y PWA para WP son complementos gratuitos. Los 煤ltimos tres se cubrir谩n con un poco m谩s de detalle m谩s adelante en la publicaci贸n.

Paso 3: m谩s configuraciones de AMP

Configuraci贸n general

La pesta帽a General cubre las opciones que cubrimos en la configuraci贸n b谩sica. Adem谩s, puede elegir si desea tener AMP en las p谩ginas de archivos, categor铆as y etiquetas.

Habilitar la 煤ltima opci贸n, AMP Takeover (Beta), har谩 que su versi贸n de escritorio y m贸vil sea la misma. Esto significa que su versi贸n de escritorio tambi茅n tendr谩 p谩ginas AMP.

Recomendar铆a mantener esta opci贸n desactivada. La carga de la p谩gina suele ser mejor en el escritorio que en el m贸vil. Tener AMP en el escritorio significa intercambiar UX por un peque帽o incremento en la velocidad de la p谩gina. No es una buena ganga.

Anuncio publicitario

Esta secci贸n tiene las mismas opciones que la secci贸n Publicidad en la configuraci贸n b谩sica.

SEO

Si elige activar la descripci贸n meta, Google recoger谩 el texto que complete en la secci贸n principal. Este ser谩 diferente del texto que complet贸 para la versi贸n de escritorio. Recomendar铆a mantener la configuraci贸n desactivada y mantener la Meta Descripci贸n consistente en las dos versiones.

Las etiquetas de metadatos de OpenGraph son fragmentos de c贸digo que controlan c贸mo se muestran las URL cuando se comparten en las redes sociales. Esta secci贸n es visible para la versi贸n de escritorio cuando configura el t铆tulo y los metadatos en su complemento de SEO.

Puede encontrarlo yendo a la secci贸n Editor de cualquier publicaci贸n o p谩gina, despl谩cese hasta la parte inferior. Una vez que vea la secci贸n de Yoast, haga clic en la pesta帽a 'Social', luego podr谩 elegir la plataforma de redes sociales que prefiera.

El complemento AMP le permite seleccionar el complemento SEO de su elecci贸n en el mismo panel de opciones. En el ejemplo anterior, Yoast es el complemento elegido. Todos los datos que ingresa en Yoast para la versi贸n de escritorio se copian en la versi贸n AMP.

Ver谩 la opci贸n para eliminar la compatibilidad con la herramienta de inspecci贸n de URL y la indexaci贸n de p谩ginas paginadas.

Las p谩ginas paginadas deben indexarse, pero solo como can贸nicas. Recomendar铆a mantener esta configuraci贸n desactivada.

La compatibilidad con la herramienta de inspecci贸n de URL fomenta una b煤squeda m谩s transparente para usted. Proporciona informes detallados sobre rastreo, indexaci贸n y publicaci贸n de informaci贸n en su cuenta de Google Search Console. Recomendar铆a mantenerlo encendido.

Soporte de Elementor

La opci贸n de AMPforWP PageBuilder le permitir谩 crear p谩ginas individuales para la versi贸n AMP, diferente de la versi贸n de escritorio. Es 煤til cuando desea tener un texto o CTA ligeramente diferente para las p谩ginas AMP.

Por ejemplo, si tiene un CTA "Cont谩ctenos" para escritorio pero prefiere que los visitantes m贸viles lo llamen, puede activar esta opci贸n y crear una p谩gina separada.

PWA

Seg煤n la descripci贸n de AMP para WP Plugin, Progressive Web Apps (PWA) transforma su sitio web en una aplicaci贸n web y brinda a los visitantes una experiencia similar a una aplicaci贸n m贸vil nativa.

Es una mejora de dise帽o. Activar el m贸dulo es una cuesti贸n de elecci贸n.

Actuaci贸n

El panel Rendimiento profundiza en la optimizaci贸n de la velocidad de la p谩gina.

Le permite Minificar CSS / JS para reducir el uso de ancho de banda sin afectar la UX o la funcionalidad. Aprovechar la cach茅 del navegador le permite acelerar el tiempo de carga para los visitantes que regresan. Recomendar铆a mantener ambas opciones activadas.

Habilitar Optimizar CSS activar谩 la funci贸n de agitaci贸n de 谩rboles para optimizar CSS. Puede mantenerlo encendido en caso de que no tenga un complemento diferente que ya haga ese trabajo.

An谩lisis, datos estructurados, barra de avisos y GDPR

Estas secciones tienen las mismas opciones que las cubiertas en la configuraci贸n b谩sica.

Notificaciones push

En caso de que desee configurar notificaciones push, puede optar por una entre OneSignal, iZooto y Truepush.

En el ejemplo anterior, seleccion茅 OneSignal. Sin embargo, para cualquier selecci贸n, ver谩 una secci贸n para ingresar el ID de la APLICACI脫N, una opci贸n para habilitar las notificaciones autom谩ticas para las p谩ginas. Adem谩s, debe elegir d贸nde desea colocar la notificaci贸n (por ejemplo, en la parte inferior de la p谩gina) y qu茅 texto desea mostrar.

Formularios de contacto

Esto le permite elegir uno de los 3 complementos para optimizar AMP: Contact Form 7, Gravity Forms y Ninja Forms.

Los tres requieren que pague una extensi贸n. En caso de que su CTA se centre principalmente en formularios, es prudente invertir en la extensi贸n.

Comentarios

Esta pantalla le permite elegir d贸nde desea que se muestren los comentarios generados por el usuario en su sitio web. Tambi茅n puede elegir las fuentes desde las que mostrar los comentarios.

Elija la configuraci贸n que mejor se adapte a sus necesidades.

Art铆culos instant谩neos

Art铆culos instant谩neos es una funci贸n de la aplicaci贸n de Facebook para usuarios m贸viles que le permite alojar los art铆culos de su sitio web.

El beneficio de activar esta funci贸n es un tiempo de carga a煤n m谩s r谩pido en comparaci贸n con tener el mismo art铆culo en su sitio web. Dado que el art铆culo se carga dentro de la aplicaci贸n, obtienes una velocidad de carga hasta 10 veces m谩s r谩pida.

Sin embargo, dado que el contenido permanece en Facebook, es posible que pierda algo de tr谩fico en el sitio web. Es un compromiso entre la velocidad de la p谩gina y el tr谩fico del sitio web. Recomendar铆a mantenerlo apagado.

Despu茅s de ingresar su ID de p谩gina de Facebook, puede personalizar la configuraci贸n del art铆culo. Una configuraci贸n que requiere m谩s explicaci贸n es: Ingesti贸n de rastreadores.

Cuando el enlace de su art铆culo alojado en su sitio web se comparte en Facebook, los rastreadores de Facebook buscan la etiqueta ia: markup_url. Si est谩 presente, Facebook ingiere su art铆culo y crea un art铆culo instant谩neo en su p谩gina de Facebook.

Herramientas

La opci贸n P谩gina de AMP individual le permite elegir si desea mostrar las p谩ginas de AMP de forma predeterminada o no. Cuando eliges Mostrar por defecto, todas tus p谩ginas mostrar谩n la versi贸n AMP. Sin embargo, puede optar por ocultar AMP para publicaciones o p谩ginas individuales.

Para hacerlo, vaya a cualquier p谩gina y haga clic en Editar p谩gina. En la pesta帽a Configuraci贸n hacia la derecha, puede encontrar la opci贸n de desactivarla.

Del mismo modo, puede optar por Ocultar las versiones de AMP para las categor铆as y publicaciones seleccionadas.

Query Monitor es el panel de herramientas para desarrolladores de WordPress. Si es un desarrollador y necesita ver las consultas en la p谩gina, debe mantener la configuraci贸n activada.

Configuraciones avanzadas

El panel de opciones de Configuraci贸n avanzada tiene una serie de configuraciones, la mayor铆a de las cuales se explican por s铆 mismas.

Recomendar铆a mantener activada la configuraci贸n predeterminada a menos que sea un desarrollador de WP o haya contratado a un experto para dise帽ar su sitio web.

Comercio Electr贸nico

Si posee una tienda en l铆nea, puede personalizar su versi贸n AMP para WooCommerce. Si vende principalmente activos digitales, puede activar la opci贸n Soporte de descargas digitales sencillas. Ambas opciones requieren que habilites una extensi贸n paga.

Panel de traducci贸n

Este panel le permite seleccionar las traducciones correctas para un conjunto de palabras de uso com煤n en el idioma de su elecci贸n.

Por ejemplo, debe escribir la traducci贸n de la versi贸n Ver versi贸n no AMP adecuada para su audiencia.

Para traducciones multiling眉es, puede activar el m茅todo de traducci贸n Usar archivo POT. El archivo POT (plantilla de objeto port谩til) es una plantilla para los archivos PO. Son archivos de texto sin formato que contienen las traducciones. Cada idioma tiene su propia extensi贸n de archivo. Por ejemplo, el franc茅s tiene po.fr.

Paso 4: dise帽o

Temas

Al igual que para la versi贸n de escritorio de su sitio web, puede elegir un tema para la versi贸n AMP.

Hay cuatro opciones gratuitas para elegir.

  • Dise帽o uno
  • Dise帽o dos
  • Dise帽o Tres
  • R谩pido

Adem谩s, cada p谩gina y publicaci贸n tiene una secci贸n que le permite crear su propio dise帽o.

As铆 es como puede encontrarlo. Vaya a la p谩gina o publicaci贸n y haga clic en 'Editar p谩gina' en la barra de herramientas superior. Despl谩cese hacia abajo para ver la siguiente pantalla.

Si selecciona la casilla de verificaci贸n Use Builder, se mostrar谩 la plantilla que cree; de 鈥嬧媗o contrario, se mostrar谩 la plantilla gratuita que seleccione.

En caso de que est茅 creando su propia plantilla, tiene los siguientes m贸dulos para elegir.

Recuerde, AMP es b谩sicamente una p谩gina HTML. No puede obtener mucha personalizaci贸n o botones elegantes.

Tenga en cuenta: debe seleccionar un tema. El complemento lo necesita para elegir iconos y estructura, incluso cuando crea su propio dise帽o.

Global

Este panel de opciones le permite personalizar su versi贸n de AMP.

Puede seleccionar los colores de su elecci贸n como se indica arriba. Adem谩s, puede seleccionar Google Fonts. Sin embargo, recomendar铆a mantenerlo apagado ya que las fuentes de Google aumentan el tiempo de carga, anulando el prop贸sito de AMP.

M谩s adelante, puede optar por mantener la barra lateral y el desplazamiento infinito encendidos si as铆 es como desea que se vea su p谩gina web. Sin embargo, desde la perspectiva de la velocidad de la p谩gina, debes mantenerla desactivada.

La biblioteca de iconos de fuentes ser谩 la misma que el tema que hab铆a elegido al principio del panel Dise帽o.

Encabezamiento

El panel de opciones de Encabezado le permite decidir el dise帽o de su encabezado y c贸mo debe verse su men煤 de navegaci贸n.

Tambi茅n le permite agregar un bot贸n Llamar ahora. Es un bot贸n 煤til para usuarios m贸viles.

Puede optar por mostrar su enlace que no es de AMP en el encabezado. Sin embargo, si su audiencia no est谩 t茅cnicamente orientada al SEO, es posible que no haga clic en el enlace.

Tambi茅n puede habilitar la barra de b煤squeda. Es beneficioso si tiene un sitio web de blogs.

La opci贸n de encabezado avanzado le permite ser m谩s espec铆fico con la configuraci贸n de la secci贸n de encabezado. Es cuesti贸n de elecci贸n. Sin embargo, tenga en cuenta no agregar al c贸digo, ya que afectar谩 negativamente la velocidad de carga de la p谩gina.

P谩gina de inicio, sencillo, pie de p谩gina, p谩gina, uso compartido en redes sociales, fecha y varios

Estos paneles de opciones, al igual que el encabezado, son completamente una cuesti贸n de elecci贸n de dise帽o. Puede elegir la configuraci贸n que m谩s le convenga.

Resumiendo

Los pasos anteriores lo ayudar谩n a implementar AMP de manera efectiva en su sitio web. Una vez que haya guardado los cambios, consulte la versi贸n AMP en su tel茅fono o agregue '/ amp' despu茅s de la URL.

Ah铆 tienes. Siga estos pasos para tener p谩ginas s煤per r谩pidas y sin errores que se cargan en menos de 2 segundos para los visitantes de tel茅fonos m贸viles.

Gustavo Guardado Roa

Te ofrecezco desarrollar tu proyecto web de forma profesional.
Tengo a tu disposición diversas opciones atractivas.

 

Publicar un comentario

Nota: Los Campos marcados con un * son obligatorios.

Nombre:

Apellidos:

E-mail:

Comentario:

"Asegurate de colocar la direcci贸n de tu correo electr贸nico, de lo contrario, no podremos evacuar tus preguntas, consultas o saber quién comenta"

blank space




Bueno, te preguntar谩s ¿Quién es la persona que te brinda estos consejos técnicos?, pues es quien te ha estado enviando contenidos de SEO, SEM, SMO, Web and Graphic Design. Sí, esta es mi foto y mi nombre es Gustavo Guardado Roa y soy tu anfitrión en el recorrido de este sitio en la web, mi idea es asistirte en el proceso de hacer tu página web y del como tener un ingreso con el buen uso del marketing en la internet y las mejores aplicaciones.

gustavo guardado roa
Gustavo Guardado Roa
Consultor Marketing Digital y SEO
Leer mas

posicionamiento web en costa rica
chatbot costa rica
Chatbot Costa Rica

posicionamiento web en costa rica
Inscr铆bete a nuestro Boletín Electrónico
Recibí consejos GRATIS sobre las
últimas noticias de Marketing Digital.

posicionamiento web en costa rica
驴Qu茅 es SEO?

que es seo
Bajar PDF- -> SEO vs PPC

posicionamiento web en costa rica WhatsApp SEO Costa Rica

posicionamiento web en costa rica

seo costo
Presios SEO

Permit铆nos mejorar tus
resultados de marketing en l铆nea.
Hemos aumentado el tr谩fico,
los clientes potenciales y
las ventas de compa帽铆as en
turismo, bienes ra铆ces, medicina.
Adem谩s, para cientos de peque帽as
empresas locales como dentistas,
veterinarios, fontaneros, dermat贸logos, etc.

posicionamiento web en costa rica

Posicionamiento internacional a trav茅s de SEO

Compart铆 este
artículo por Whatsapp

posicionamiento web en costa rica

SEO Costa Rica MAPA


posicionamiento web en costa rica

聽聽Pasos para desarrollar un plan de SEO exitoso

Pasos para desarrollar
un plan de SEO exitoso


posicionamiento web en costa rica

C贸mo implementar AMP en tu sitio web

C贸mo implementar AMP
en tu sitio web


posicionamiento web en costa rica

Core Web Vitals elementos b谩sicos de la Web

Core Web Vitals
elementos b谩sicos de la Web


posicionamiento web en costa rica

Dise帽o web receptivo y m贸vil primero

Dise帽o web receptivo
y m贸vil primero


posicionamiento web en costa rica

驴Qu茅 es Mobile First Design?

驴Qu茅 es Mobile First Design?


posicionamiento web en costa rica

como-mejorar-el-seo-de-tu-blog

驴C贸mo mejorar el SEO de tu blog?


posicionamiento web en costa rica

驴C贸mo funciona el SEO con un presupuesto de PYME?

驴C贸mo funciona el SEO
con un presupuesto de PYME?


posicionamiento web en costa rica

驴C贸mo desarrollar el mejor presupuesto de marketing SEO?

驴C贸mo desarrollar el mejor
presupuesto de marketing SEO?


posicionamiento web en costa rica

Crear estrategia SEO con presupuesto reducido

Crear estrategia SEO
con presupuesto reducido


posicionamiento web en costa rica

Consejos de publicaciones 贸ptimas para blog SEO

Consejos de publicaciones
贸ptimas blog SEO


posicionamiento web en costa rica

聽聽Consejos para clasificar m谩s alto en una b煤squeda

Consejos para clasificar
m谩s alto en una b煤squeda


posicionamiento web en costa rica