Implementación de una página web con AMP de Google

Página web básica con Accelerated Mobile Pages

Publicado en AMP 2018-03-17 12:49:54

Implementación de una página web con AMP de Google

Página web desarrollada con AMP

Diseño Web Google HTML AMP

Resumen: Usando la estructura estandar de AMP para el desarrollo de páginas web veloces en su carga. Ejemplo sencillo de una web estática con esta tecnología web.

¿La pregunta es porque debería implementars o desarrollar mi página web con AMP? y la respuesta es simple y sencille pero directa:

Porque Google lo está teniendo muy en cuenta a la hora de posicionar y clasificar las páginas en los resultados de búsqueda.

Está comprobado que las páginas con tecnología “Accelerated Mobile Pages” correctamente implementada tienen una carga inferior a un segundo y una reducción de 3 veces respecto a su versión sin el accelerated mobile pages. Esto hace que la experiencia de usuario respecto a la velocidad del sitio aumente de forma considerable. Desde Google nos informan que las tasas de rebote más elevadas vienen derivadas de la lenta carga de las páginas, y que “Accelerated Mobile Pages” te ayuda a reducir esas tasas.

Ejemplo práctico en Vivo : Ver en el siguiente link Página Web AMP

Vamos a ver la estructura básica de la página web según los standares que recomienda el equipo de desarrollo Google vinculado a este proyecto, yendo, de frente al grano veamos como se implementa en una web sencilla.

CODIGO HTML:

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Diseño de páginas web en Arequipa</title>
    <meta name="description" content="Apptiva Web, presenta sus servicios en Diseño de aplicaciones Web para negocios y empresas">
    <link rel="canonical" href="index.html">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet">
    <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>
    <style amp-custom>
	  amp-img {margin: 0;}
	  .body { margin:0 auto;max-width:900px;font-family:'Open Sans Condensed',sans-serif;}
	  h1,h2,h3,p{padding: 0 16px;}
	  h2{ color: #04488c }
	  .link{background: #04488c;color: white;padding: 10px 3px;text-align: center;width: 208px;display: inline-block;text-decoration: none;border-bottom: 1px solid #03377c;}
	  .link:hover{ background: white; color:#04488c; }
	  .active{ background: #c2de1d }
    .box{width: 49%;text-align: justify;display: inline-flex;}
	</style>
  </head>
  <body>
  	<div class="body">
      <a href="/">
  	<amp-img src="/img/pagina-web-arequipa.jpg" alt="Diseño de páginas Web Arequipa" width="780" height="280" layout="responsive"></amp-img></a>
    <h1 align="center">DISEÑO DE PÁGINAS WEB EN AREQUIPA</h1>
    <h3 align="center">Cel : 956337507 | info@apptivaweb.com</h3>
    <p align="center">
    <a href="web-basica.html" class="link">WEB BASICA</a>
    <a href="web-economica.html" class="link">WEB ECONÓMICA</a>
    <a href="web-pyme.html" class="link">WEB PYME</a>
    <a href="web-a-medida.html" class="link">WEB A MEDIDA</a>
    </p>
    <div class="box">   
      <p>En [<a href="http://apptivaweb.com/">APPTIVA WEB</a>] nos encanta desarrollar proyectos en internet que permitan a nuestros clientes rentabilizar su inversión. Diseñamos eficaces estrategias digitales para que tu negocio tenga éxito en un mundo interconectado. Somos un estudio creativo especializado en proyectos de marketing digital y diseño web en Alicante. Conoce nuestro trabajo.
    </p>
    </div>
    <div class="box">    
      <p>Hemos desarrollado más de 100 proyectos desde 2007, entre los que destacan páginas web para empresas y emprendedores, un soporte publicitario online propio, tiendas de comercio online, blogs, estrategias de posicionamiento en buscadores y Adwords (SEO y SEM), así como diseños de identidad visual corporativa.
      </p>
    </div>
    
    <h2 align="center">NUESTRO TRABAJO</h2>
    <h3 align="center">AUNAMOS DISEÑO Y USABILIDAD PARA QUE TU WEB SEA EFICAZ</h3>

    
	<h4 align="center"> Calle Paucarpata 130 Of. 212 | 2018  </h4>
	<p align="center">Página Web desarrollada con AMP por <a href="http://apptivaweb.com/">Apptiva Web</a></p>

    </div>
  </body>
</html>

Espero sea de ayuda.

 

Redacción:| Artículo leído: 277 veces | Publicación:


Compártelo con tus amigos


Publicaciones relacionadas de AMP