¿Cómo generar contenidos AMP en Microsoft ASP.NET MVC?
En el post AMP. La nueva forma de navegar a máxima velocidad os hablábamos de las posibilidades del Proyecto AMP (Accelerated Mobile Pages Project), y de cómo Google está impulsando esta iniciativa ofreciendo un mejor posicionamiento en los resultados de sus búsquedas desde dispositivos móviles a contenidos desarrollados bajo este modelo.
A continuación os mostramos una breve guía para que podáis dar vuestros primeros pasos en la elaboración de contenidos AMP sobre Microsoft ASP.NET MVC.
Requerimientos AMP HTML
Según las especificaciones de AMP un documento AMP HTML debe cumplir al menos los siguientes requerimientos:
- Debe empezar con la etiqueta doctype:
<!doctype html>. - El resto del documento debe ser un bloque
<html⚡>(<html amp>también es aceptado). - Debe contener un bloque
<head>y otro<body>. - Debe contener una etiqueta
<link rel="canonical" href="$SOME_URL" />anidada en el bloque head que apunte a la versión HTML estándar del propio documento o a sí mismo si la versión estándar no existe. - Debe contener una etiqueta
<meta charset="utf-8">como primera etiqueta hija dentro del bloque head. - Debe contener una etiqueta
<meta name="viewport" content="width=device-width,minimum-scale=1">dentro del bloque head. Además es recomendable incluir en esta etiqueta la propiedadinitial-scale=1. - Debe contener una etiqueta
<script async src="https://cdn.ampproject.org/v0.js"></script>dentro del bloque head. - Debe contener la siguiente etiqueta dentro del bloque head:
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
La validación de esta etiqueta se realiza actualmente a través de expresiones regulares, por lo que es importante evitar en lo posible alteraciones de la misma.
Con los requerimientos indicados arriba ya contamos con la información necesaria para elaborar nuestro primer documento AMP sobre ASP.NET MVC.
Ejemplo de contenido AMP sobre ASP.NET MVC
A la hora de aplicar AMP HTML sobre un proyecto ASP.NET MVC, si el proyecto cumple correctamente con el patrón de diseño MVC solo será necesario tener en cuenta AMP en los componentes de tipo Vista (componentes que definen la interfaz de usuario de la aplicación). A continuación mostramos ejemplo de vista ASP.NET MVC que cumple con los requerimientos básicos de AMP HTML descritos más arriba, nuestro primer contenido AMP sobre ASP.NET:
Conclusiones
Dada la forma de estructuración del patrón MVC donde los elementos HTML quedan recogidos en componentes de tipo Vista, la tarea de aplicar AMP HTML sobre ASP.NET MVC puede considerarse equivalente a aplicarlo directamente sobre HTML. Esto sitúa a ASP.NET MVC como una tecnología muy apropiada para sacar provecho de las características que ofrece AMP y de las concesiones que puede ofrecer Google a la hora de posicionar nuestros propios contenidos.
Referencias
- AMP Project: El proyecto AMP es una iniciativa de código abierto que busca mejorar la web para todos. El proyecto permite la creación de sitios web y anuncios consistentemente rápidos, bellos y de alto rendimiento en dispositivos y plataformas de distribución.
¿Quieres profundizar más en AMP?
- AMP Components: Componentes de la librería AMP HTML.
- AMP HTML Specification: Especificación de AMP HTML.
- AMP HTML Common Attributes: Atributos comunes de AMP HTML
Autor
Isidro Ruiz
Dpto. de Soporte
