What is Accelerated Mobile Pages (AMP)?

Asked

Viewed 94 times

6

By chance I ended up reading on an administration portal where I talked about digital marketing trends for the year 2017 and what caught my attention the most was the AMP.

Which led me to the questions.

  • What AMP?
  • How to integrate it into an ASP.NET MVC project?
  • 1

    Just to update the link sent to the site with the documentation and everything about the AMP changed to: http://amp.dev/

1 answer

5


Google created the project called Accelerated Mobile Pages (AMP), a response to Facebook Instant Articles, Apple News, and Twitter Moments - all of the tech giants wanting to grab another piece of the web that once came under the domain of major publications. Google’s goal with the project is to ensure that web pages load almost instantly when the user clicks on a link, creating an experience as fast and responsive as native mobile apps.

AMP HTML is basically the enlarged HTML with custom AMP properties. The simplest AMP HTML file looks like this:

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <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>Hello World!</body>
</html>

Read more and learn more about the documentation here: AMP

Browser other questions tagged

You are not signed in. Login or sign up in order to post.