{"id":2430,"date":"2016-04-11T18:05:32","date_gmt":"2016-04-11T23:05:32","guid":{"rendered":"https:\/\/mott.pe\/marketing-digital\/?p=2430"},"modified":"2023-08-30T08:14:04","modified_gmt":"2023-08-30T13:14:04","slug":"tutorial-como-implementar-amp-en-wordpress","status":"publish","type":"post","link":"https:\/\/mott.marketing\/tutorial-como-implementar-amp-en-wordpress\/","title":{"rendered":"TUTORIAL: \u00bfC\u00f3mo implementar AMP en WordPress?"},"content":{"rendered":"

En este art\u00edculo aprender\u00e1s c\u00f3mo implementar el proyecto AMP en WordPress<\/strong>. Adem\u00e1s, conocer\u00e1s que es el AMP y cu\u00e1l es su importancia en el desarrollo efectivo de los sitios web.<\/p>\n

\u00bfQu\u00e9 es el AMP?<\/h2>\n

La navegaci\u00f3n en la red a trav\u00e9s de dispositivos m\u00f3viles ha pasado a generar el 82% del tr\u00e1fico total de internet. Sin embargo, los sitios web mostraban un gran problema en su formato para m\u00f3viles ya que demoraban demasiado en cargar y gastaban muchos datos para el uso de un solo portal.<\/span><\/p>\n

Ante esta situaci\u00f3n, Google decidi\u00f3 implementar el proyecto AMP, o Accelerated Mobile Pages. Este proyecto consiste en una iniciativa de c\u00f3digo abierto que pretende ofrecer una experiencia de navegaci\u00f3n en Internet ultra-r\u00e1pida desde dispositivos m\u00f3viles. <\/span><\/p>\n

El Proyecto AMP, permite acelerar la velocidad de carga de los art\u00edculos para visualizarlos en dispositivos m\u00f3viles. De esta forma se logra mejorar la experiencia de usuario facilitando la lectura de informaci\u00f3n en los dispositivos m\u00f3viles.<\/span><\/p>\n

\u00bfLas webs AMP son el futuro?<\/h3>\n

Esta tecnolog\u00eda no surge como un sustituto al modelo tradicional de sitios web, sino que aparece como una opci\u00f3n accesible para todos los portales. Su punto a favor es que permite una carga r\u00e1pida al entrar al sitio, con la informaci\u00f3n y herramientas completas y con un menor gasto de datos para los m\u00f3viles de los usuarios. Gracias a ello, el tiempo de carga de un sitio web con AMP es de 0.7 segundos. En comparaci\u00f3n al promedio de carga de p\u00e1gina m\u00f3vil sin AMP que es de 15 segundos.<\/span><\/p>\n

Por ello se ha vuelto una configuraci\u00f3n necesaria para todos los sitios web que busquen posicionarse en los buscadores. La raz\u00f3n principal, es que cada vez m\u00e1s usuarios emplean sus dispositivos m\u00f3viles para buscar informaci\u00f3n y prefieren sitios web amigables que le faciliten el acceso. Caso contrario, abandonar\u00e1n el sitio web y eligir\u00e1n otros con formatos adaptados a los dispositivos.<\/p>\n

\u00bfTodos pueden implementar el AMP en sus sitios web?<\/h3>\n

Para poder usar el AMP Google busca simplificar las cosas y eliminar c\u00f3digos innecesarios y elementos que no funcionen y hagan m\u00e1s lenta la carga de sitios web. Para ello, plataformas como WordPress solo utilizan c\u00f3digos CSS que solo funcionan por conexi\u00f3n y soportan elementos de hasta 50kb. Adem\u00e1s, tampoco se puede usar lenguaje JavaScript personalizado para evitar que dificulte la carga del sitio web.<\/span><\/p>\n

En cuanto a los elementos multimedia, en el caso de las im\u00e1genes est\u00e1s tendr\u00e1n que usar el componente amp-img. Si se usa GIFs animados se tendr\u00e1 que usar el componente amp-anima_extended. Al igual que los v\u00eddeos HTML5 que tendr\u00e1n que usar un componente llamado amp-video y si son de YouTube: amp-youtube.<\/span><\/p>\n

\u00bfQu\u00e9 clase de anuncios se puede utilizar en AMP?<\/h3>\n

Usando el componente amp-ad extended se podr\u00e1 usar: AdReactor, <\/span>Google AdSense<\/b>, AOL AdTech, Google Doubleclick, Flote, Tabula, Adform, DotAndAds, lista, Smart AdServer y Yieldmo.\u00a0<\/span><\/p>\n

Pasos para instalar AMP en WordPress<\/h2>\n

Siguiendo los m\u00e9todos de instalaci\u00f3n para implementar AMP en WordPress hay dos alternativas. Para este tutorial se utilizar\u00e1 el modo seguro.<\/span><\/p>\n

Primer Paso:<\/strong> Descargar el plugin <\/span>AMP<\/span><\/a> desde el repositorio de wordpress.org, para su seguridad los archivos est\u00e1n comprimidos en formato .zip.<\/span>\"plugin<\/p>\n

Segundo 2: <\/strong>Se recomienda descartar c\u00f3digos maliciosos dentro del plugin AMP con\u00a0<\/span>Virus total<\/a>. Una vez descargado el plugin ser\u00e1 necesario subir el plugin a la herramienta mencionada. No obstante, esto no es obligatorio.<\/span><\/p>\n

\"virus<\/p>\n

Tercer paso: <\/strong>Despu\u00e9s de verificar que el c\u00f3digo est\u00e1 limpio, debe subir el plugin mediante <\/span>FTP, o Protocolo de transferencia de archivos,<\/span> a la carpeta \u201c<\/span>\/wp-content\/plugins\/\u201d. <\/b>Para realizar este paso tendremos que descomprimir para poder activar.<\/span><\/p>\n

\"ftp<\/p>\n

Cuarto paso: <\/strong>Activar el plugin desde el panel de administraci\u00f3n de WordPress.<\/span><\/p>\n

\"panel<\/p>\n

Quinto paso: <\/strong>Los enlaces permanentes deben estar configurados de manera amigable y f\u00e1cil de encontrar. En este caso como: <\/span>Nombre de la entrada.<\/b><\/p>\n

\"plugin<\/p>\n

Sexto paso: <\/strong>Verificar el correcto funcionamiento del plugin. Para este paso debemos probar con un art\u00edculo publicado, asignando el t\u00e9rmino \u201c<\/span>amp<\/b>\u201d despu\u00e9s del \u201c<\/span>\/<\/b>\u201d final de cada art\u00edculo.<\/span><\/p>\n

Ejemplo:
\n<\/strong>Vista normal <\/span><\/p>\n

https:\/\/mott.pe\/marketing-digital\/que-es-growth-hacking-y-como-aplicarlo-en-tu-startup\/<\/span><\/a><\/span><\/p>\n

Vista con AMP<\/span><\/p>\n

https:\/\/mott.pe\/marketing-digital\/que-es-growth-hacking-y-como-aplicarlo-en-tu-startup\/amp<\/span><\/a><\/span><\/p>\n

S\u00e9ptimo<\/b>\u00a0paso: <\/strong>Solicitar el rastreo de Google Search Console. Este procedimiento deber\u00e1 realizarse para que Google indexe el art\u00edculo con el nuevo formato de AMP. Para ello debemos ingresar a nuestra cuenta de Google Search Console, seleccionar el proyecto y dirigirnos a la opci\u00f3n <\/span>Rastreo. <\/b>Luego debe hacer clic en Explorar como Google<\/b>.<\/span><\/p>\n

\"webmasterOctavo paso: <\/strong>Como paso final tenemos el seguimiento de las indexaciones de AMP desde Google Search Console. Para ello debemos ir al men\u00fa <\/span>Aspecto de la b\u00fasqueda<\/b> y seleccionar <\/span>Accelerated Mobile Pages.<\/b><\/p>\n

\"accelerated<\/p>\n

Nota adicional<\/h3>\n

Al realizar este procedimiento recuerde que las p\u00e1ginas y los archivos dentro de WordPress a\u00fan no son compatibles con AMP. Esta configuraci\u00f3n es solo para las entradas de los art\u00edculos pero no para la configuraci\u00f3n total del sitio web.<\/span><\/p>\n

El plugin s\u00f3lo crea contenido con el formato de AMP para que sea visualizado autom\u00e1ticamente por los usuarios cuando visitan desde un dispositivo m\u00f3vil. Pero para ello debe antes indexar y actualizar los cambios del contenido en Google Search Console.<\/span><\/p>\n

Im\u00e1genes de proyectos con Google AMP<\/h2>\n

\"resultados<\/p>\n

Estas son algunos sitios web que implementan eficientemente el proyecto AMP de Google<\/p>\n

The Washington Post<\/h3>\n

\"TWP<\/p>\n

El pa\u00eds – Portal de noticias<\/h3>\n

\"portales<\/p>\n

Sitios Web con AMP de Google<\/h3>\n

\"paginas<\/p>\n

The New York Times<\/h3>\n

\"articulos \"amp<\/p>\n

Conclusiones<\/span><\/h3>\n

Al implementar el AMP en WordPress, estar\u00e1s sumando un Plugin que permitir\u00e1 que los usuarios de m\u00f3viles puedan acceder con una mayor velocidad al portal, lo cual generar\u00e1 un mayor tr\u00e1fico en el sitio web. Un punto a destacar es que implementar AMP en tu sitio web te permite me<\/span>jorar el SEO<\/a>. Esto quiere decir que Google identificar\u00e1 que tienes un contenido hecho para celulares por lo que te sumar\u00e1 puntos para colocarte en los primeros resultados de b\u00fasqueda.<\/span><\/p>\n

Esta clase de actualizaciones para mejorar la experiencia de usuario son parte necesaria de toda estrategia de marketing digital<\/a>. Por ello te recomendamos ponerla en pr\u00e1ctica y as\u00ed lograr\u00e1s mayores oportunidades de posicionamiento web.<\/p>\n

Tambi\u00e9n te puede interesar:<\/b><\/p>\n