Nociones introductorias con elementos de amp de WordPress

Solo tiene tres segundos para mostrar algo en una pantalla móvil antes de que los visitantes comiencen a saltar. Con un margen de error tan restringido, la velocidad de su sitio en dispositivos móviles es extremadamente importante. Aquí viene el amplificador. Las páginas móviles aceleradas o el proyecto AMP es el primero en apuntar a la página web que se carga en dispositivos móviles y operar en múltiples plataformas. Los artículos instantáneos de Facebook y Apple News son otros dos proyectos de optimización de velocidad móvil, pero están bloqueados en un solo entorno. Los artículos instantáneos de Facebook funcionan solo en la aplicación de Facebook, y la aplicación Apple News solo está disponible para usuarios en dispositivos Apple. Lo que estos programas proponen a su audiencia cautiva, el proyecto ASCE tiene como objetivo hacer más plataformas.
Los artículos en formato AMP ya son utilizados por Google Search y LinkedIn, Twitter, Pinterest, Medium y Nuzzle Aplicaciones. Debido a que AMP es una iniciativa de código abierto, se pueden unir plataformas adicionales en cualquier momento. El contenido en formato ASE aumenta la visibilidad en los resultados de la búsqueda de Google y se carga en promedio cuatro veces más rápido que los equivalentes que no son de amplio amplio. Con cientos de editores de contenido y plataformas ya a bordo del AMP, si su sitio publica regularmente artículos o publicaciones de blog, debe configurar su sitio de WordPress para generar elementos de AMP.

El proyecto de páginas móviles aceleradas es una iniciativa de código abierto.
Sus elementos de AMP en el trabajo aclaran una cosa: los elementos ASA no son un reemplazo adecuado para tener un sitio web receptivo. Incluso con los elementos de AMP disponibles, los visitantes que van directamente a su sitio. Recibirán archivos y elementos estándar del sitio (por ahora, tengo la sensación de que este acuerdo puede cambiar con el tiempo si los navegadores móviles agregan soporte nativo para el formato FAI) .Deci, ¿cuándo los visitantes verán su contenido? Los visitantes recibirán la versión AMP de su contenido cuando accedan a él desde una plataforma que acepta el formato. Aquí hay unos ejemplos:
Si alguien distribuye uno de sus elementos en Twitter, cuando un visitante que use las aplicaciones de Twitter el enlace recibirá el elemento AMP. Lo mismo es cierto para el contenido a los que se accede con aplicaciones LinkedIn, Pinterest, Medium y Nuzzle.
Cuando alguien usa el navegador de un dispositivo móvil para realizar una búsqueda en Google de una noticia moderna, que debe escribir, se mostrará una selección de elementos de AMP en la sección “Historias principales” de los resultados de búsqueda. Si su artículo llega a esa sección, se mostrará la versión formateada de AMP.
Cada vez que una nueva plataforma agrega soporte de contenido AMP, su contenido se transmitirá a los usuarios de la plataforma respectivos en formato AMP.
¿Cómo funciona el amplificador? Los artículos de AMP se crean con una biblioteca especial de elementos personalizados HTML. AMP restringe ciertas funciones HTML, CSS y JavaScript para acelerar el contenido en dispositivos móviles. Algunas de las restricciones impuestas por el Lay incluyen:
Todos los guiones deben cargar asíncronos. Se deben agregar funciones interactivas utilizando HTML personalizado o Sandbox en un iframe. Esto permite que la página web cargue sin esperar a que se descarguen y procesen los scripts. Todos los recursos externos, tal especifican el tamaño para que el tamaño se pueda establecer antes de descargar el recurso.
Los estilos CSS deben declararse en una hoja de estilo en línea relacionado con una dimensión máxima de 50 kb.
Debido a que los scripts están cargados asincrónicos, las descargas de la fuente web, que a menudo son muy pesadas, se activan antes de cualquier otro recurso.
Las animaciones no pueden afectar la apariencia de la página.
Las descargas de recursos se priorizan de acuerdo con la posición, el contenido por encima de la página se carga primero.
Estas tácticas se aplican mediante una herramienta de validación integrada. Las páginas que no están validadas no pueden ser indexadas por Google o que se usan en aplicaciones que aceptan formato.
Una historia de dos documentos si se trata de un sitio web simple compuesto por un archivo HTML, un archivo CSS o dos y algunos scripts, puede reformar la página en un solo documento formateado. Sin embargo, en la mayoría de los casos, no tendrá sentido reformar cada página de su sitio. En cambio, querrá hacer un complemento para generar una segunda versión reducida de cada elemento que publique. Puede decir: “¡Esto creará contenido duplicado!” Y si tuviste este pensamiento, tienes la razón. Por lo tanto, es importante atar correctamente la versión de AMP de su página a la versión estándar usando elementos de enlace. La página web estándar está relacionada con la versión de AMP con un enlace que se ve así: “http://www.example.com /amp_article_url “> La versión de AMP se conecta a la versión estándar usando un elemento similar: Google y otras plataformas utilizarán los enlaces a Asocie las dos versiones de la página y entregue la versión AMP de los dispositivos móviles, al tiempo que ofrece la versión estándar de los visitantes en el escritorio. Además, Google reconoce estas etiquetas y no penalizará su sitio web para publicar el contenido duplicado cuando estas etiquetas estén presentes.
Hay un complemento para esto … Si te sientes un poco abrumado por la idea de que tienes que aprender un amplificador HTML y crear documentos especialmente formados, ¡tengo buenas noticias! Hay un complemento para eso. De hecho, ya hay algunos complementos diferentes en el director de complementos de WordPress que debe verificar. Busqué en las opciones disponibles en WordPress.org y encontré cuatro complementos que debe saber si tiene la intención de integrar el formato de AMP con sus páginas móviles (AMP) de WordPress.Proiect.
Instale y active el complemento, y los artículos en formato AMP se generarán automáticamente en http://example.com/article-permalink/amp/. Actualmente, este complemento genera solo elementos de AMP para publicaciones. Entonces, si tiene contenido de página que desea mostrar en formato AMP, este complemento no lo hará.
Instalé este complemento en mi blog personal y funcionó sin problemas. Los elementos del AMP se formatearon de manera atractiva, los elementos de enlace esperados se agregaron al código fuente y los artículos se validaron con éxito utilizando consolas de Desarrollo de Chrome> Consolas. ¿Está interesado en el proyecto Acceled Mobile Pages (AMP)?
Descargar
Amplificador personalizado

Plugin Personalized le permite personalizar el elemento AMP generado por el AMP del complemento. Después de instalar el complemento AMP, instale este complemento para agregar un amplificador personalizado a su interfaz de administración de WordPress. Dentro del panel, puede agregar un logotipo o imagen del sitio, puede elegir si desea o no mostrar comentarios, integrarse con WooCommerce, mostrar publicaciones asociadas, agregar un menú de navegación, agregar un código de seguimiento de Google Analytics, agregar CSS personalizado y agregar adicional Código HTML al sótano del amplificador. En la medida en que trabaje con este complemento, asegúrese de validar las páginas de AMP generadas por su sitio web para asegurarse de que los cambios que no realicen no condujeran a la falla de la validación de las páginas. ¿Estás interesado en personalizar?

Descargar
Páginas de Facebook y Google de elementos instantáneos de PageFrog
El complemento PageFrog funciona de la mano con el complemento AMP para permitir el estilo personalizado de los elementos de AMP. PageFrog también se puede integrar con el complemento de artículos instantáneos para controlar simultáneamente la apariencia de publicaciones en ambas plataformas móviles optimizadas. El complemento PageFrog es una opción más completa que el complemento personalizado. Incluye integración con múltiples plataformas de análisis, se conecta directamente a los anuncios de Facebook y Google AdSense y agrega automáticamente una imagen presentada sin interrumpir la validación.

Si desea una opción simple, PageFrog no es lo que está buscando. Pero si desea más control sobre la presentación y una integración más amplia con las plataformas de análisis y publicidad, PageFrog ofrece mucho de forma gratuita. ¿Estás interesado en los elementos instantáneos de Facebook y las páginas de Google AMA de PageFrog?
Descargar el complemento ¿Es el complemento correcto? Actualmente, el único complemento en el director de complementos de WordPress que genera artículos de AMP es el AMP del complemento. Al menos, deberá instalar y activar este complemento. Si desea un mayor control sobre el aspecto de sus elementos de amplificador o incorpora el código de seguimiento de análisis, deberá instalar al menos otro complemento.
Si desea un complemento simple para realizar ajustes de diseño menores y agregar el código de seguimiento de Google Analytics, el complemento personalizado es una opción simple que está a la mano. Si necesita más funciones que las ofrecidas por Plugin Plugin Personalized, PageFrog es otra excelente opción a considerar. PageFrog es particularmente atractivo si desea integrarse con un programa de análisis diferente al de Google Analytics o si desea incorporar anuncios de Google AdSense en sus elementos de AMP. Validar las páginas del último paso en el proceso de configuración de AMP es validar sus páginas. Las páginas que no validan no pueden ser indexadas y mostradas por Google o utilizadas por otras plataformas aceptadas. Afortunadamente, las pruebas de validación son simples, aunque la reparación de errores de validación puede ser mucho menor. Así es como puede probar la validación del amplificador:
Abra un navegador web y navegue por la versión AMP de uno de sus artículos.

Abra la consola JavaScript. En Chrome, puede encontrar esto abriendo el menú contextual (haga clic en la derecha en la ventana del navegador en una computadora o mantenga presionado CTRL y haga clic en una Mac), seleccionando y haciendo clic en la pestaña de la consola. Pasos similares abrirán la consola en otros navegadores.
Agregue #development = 1 al final de la dirección de AMP de URL, de modo que la URL se vea así: http://www.example.com/amp_article_url #develovelment = 1. Presione ENTER para cargar la página y ejecutar el validador de AMP. Trabaje la consola de mensajes.
Validar las páginas con la consola JavaScript
El mensaje que espera ver es la validación de la validación exitosa. Si la página no valida, deberá examinar los mensajes en la consola para determinar qué causó la falla y tomar las medidas necesarias para resolver el problema identificado. Terminando con plataformas máximas como Google, Twitter, Pinterest, Linked y muchos más a bordo, el formato de AMP ya es un jugador importante en el juego de optimización móvil. Si publica publicaciones de blog o artículos de noticias regularmente, generar artículos de AMP ya no es opcional. Debe comenzar a configurar su sitio web para generar elementos de AMP que se validan con éxito. Afortunadamente, ya hay algunos complementos en los complementos oficiales de WordPress que hacen que el proceso sea bastante simple.
¿Ha configurado su sitio web de WordPress para generar elementos de AMP? ¿Usaste un complemento que no mencioné aquí? ¿Cómo fue el proceso? Háganos saber en los comentarios a continuación.
Etiquetas:
móvil
complementos