Configuración AMP en ASP.NET MVC

Introducción

Este es un ejemplo concreto en el que se muestra cómo incluir AMP en ASP.NET MVC. Este artículo va a ser técnico y bien enfocado a aspectos de programación por lo tanto NO vamos a hablar sobre las ventajas que puede tener incluir AMP en lo que respecta a aspectos de calidad y SEO; para los que estén interesados en este punto les recomiendo el artículo Conceptos SEO para Programadores donde se trabaja este aspecto y algunos más que puede ser útil conocer.

En este ejemplo vamos a comenzar con un proyecto ASP.NET MVC vacío en el cual vamos a agregar un HomeController, una View Index y su versión AMP en otro archivo Index.amp.cshtml. El ejemplo se enfoca en los ajustes que hay que hacer a nivel de MVC y en la View para poder incluir esta característica, no vamos a trabajar características específicas de maquetar con AMP ni analizar las restricciones que presenta el lenguaje.

En resumen lo que queremos hacer es que para un mismo action del controller se retornen 2 views diferentes una común y otra AMP. Para esto lo que vamos a utilizar se conoce como DisplayModeProviders y es una característica que se incluyó en ASP.NET MVC 4 que permite fácilmente diseñar Views para diferentes dispositivos las cuales responderán al mismo ActionResult.

Configuración Paso a Paso

Los pasos para realizar esto serían los siguientes

  1. Crear una solución vacía de ASP.NET MVC.
  2.  Agregar un controller y una view por ejemplo HomeController y ActionResult Index.
  3. Creamos la View Index correspondiente.
  4. Agregamos dentro de Views/Home una nueva vista llamada Index.amp.cshtml (en esta vista es donde vamos a incluir el código AMP).
  5. Creamos una carpeta DisplayModes y dentro incluimos una clase GoogleAmpDisplayMode.cs.
    En este punto la solución debería quedar similar a esta imagen.

Solución Proyecto ASP.NET MVC con AMP.

6. Ahora tenemos que agregar el siguiente código al final del método Application_Start() en el Global.asax.

DisplayModeProvider.Instance.Modes.Clear();
DisplayModeProvider.Instance.Modes.Add(new GoogleAmpDisplayMode());
DisplayModeProvider.Instance.Modes.Add(new DefaultDisplayMode());

DisplayModeProvider contiene una lista de objetos en los que cada uno representa un modo de display. En este caso tenemos DefaultDisplayMode para las view que creamos por defecto y agregamos GoogleAmpDisplayMode para las vistas AMP.

7. Ahora dentro de la clase GoogleAmpDisplayMode incluimos el siguiente código.

public class GoogleAmpDisplayMode : DefaultDisplayMode
{
     public GoogleAmpDisplayMode() : base("amp") // para archivo.amp.cshtml.
     {
          ContextCondition = context => context.Request.RawUrl.Contains("?amp");
     }
}

GoogleAmpDisplayMode hereda de DefaultDisplayMode y lo que hace es permitirnos que la view amp se cargue en el response cuando se agrega en la url el parámetro ?amp.

Probar que todo funciona

En este momento si ejecutamos nuestra solución por defecto nos va a mostrar la view que no tiene AMP, pero si al final de la url le agregamos el query string amp (http://localhost:18190/Home/Index?amp) ahora con la ayuda de la configuración de DisplayModeProvider el response generado se cargará la view Index.amp.cshtml. Por ahora NO incluimos el código AMP solamente hicimos la configuración para que se retorne la vista correspondiente en cada caso.

View con AMP

Ahora sí vamos a agregar los mark-ups requeridos para que una vista sea AMP, por lo tanto a partir de ahora vamos a trabajar sobre en el archivo Index.amp.cshtml. Este código al ser requerido yo recomiendo siempre tomarlo directamente desde la web AMP de Google y hacerle los ajustes particulares para nuestro código, para eso hay que ir a la siguiente url https://www.ampproject.org/docs/get_started/create/basic_markup.

Los únicos ajustes que tuve que hacer por estar trabajando con ASP.NET MVC fue agregar un @ delante de cada @ dentro del style.

Con eso ya podemos tener una vista simple, debajo de este código vamos a explicar las líneas importantes el cabezal de la página AMP.

En nuestro caso el código de la view quedaría así:

 @{
 Layout = null;
}
<!doctype html>
   <html amp>
     <head>
       <meta charset="utf-8">
       <link rel="canonical" href="~/Views/Home/Index.cshtml">
       <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
       <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>
       <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
 <h2>Ejemplo simple con AMP</h2>
 <div id="contenido">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 </div>
</body>
</html>

Algunas particularidades de una view AMP

  • <html amp> – Es el tag que indica que se trata de una web implementada con AMP.
  • <link rel=»canonical» href=»~/Views/Home/Index.cshtml»> – Aquí se incluye la URL de la vista regular correspondiente a la actual vista AMP.
  • <script async src=»https://cdn.ampproject.org/v0.js»></script> – Inclusión del código javascript de amp.

Conclusiones

En fin como se puede ver en este artículo la configuración es bastante simple. Tal vez lo que pueda llegar a complicar sea la maquetación por las limitaciones que parece tener el lenguaje según su documentación oficial, pero bueno esto será tema de artículos futuros donde pretenderé analizar en detalle el lenguaje AMP.

Espero el artículo sea útil y bueno cualquier consulta quedó disponible a través del formulario de Contactar.