What is AMP?

What is AMP?

AMP is short for Accelerated Mobile Pages, and makes the experience for mobile visitors faster and easier.

What is it?

As described on the about page, AMP is an

open-source library that provides a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users.
Basically, it’s a restricted version of HTML, CSS, and JS. While AMP does not allow many HTML tags that are often used, it offers replacements, such as <amp-img> instead of just <img>, and a few more like that. In terms of CSS, the majority of it is allowed, as long as it is inlined and smaller than 50KB total. JavaScript is pretty much completely not allowed(except for in iframes), but many AMP-friendly alternatives exist. The point of these restrictions is to ensure that the page can load almost instantly, and is made even faster with the Google AMP Cache. The Google AMP Cache is basically a version of your AMP site that is hosted on Google’s CDN.

Why should I use it?

Well, there are quite a few reasons, but I will only cover the two main ones: SEO and User Engagement. Google will actually give websites that use Accelerated Mobile Pages a slight SEO boost as opposed to sites that don’t have this yet. This means that you can potentially rank higher, leading to more traffic from Google, which helps you grow your audience. The other reason, user engagement is slightly more important, in my opinion. The general idea is this: the faster your website loads, the faster your users can read what they came for, making for a more enjoyable experience. The more enjoyable the experience is, the more likely they will come back, and visit more of your pages, which of course leads to more ad revenue. Also, no one likes a slow website, and even if your on cheap shared hosting, the Google AMP cache will ensure fast load times.

How can I use it?

Well, there are many good tutorials online just a search away. However, if you are on WordPress, this post should help a bit. Other CMS’s, such as Ghost, have this built in, while others such as Jekyll require you to add an extension. If your website is hand-coded, then it shouldn’t take that long to make them AMP compliant. While it is possible to have an AMP version of your site, and a non-AMP version for desktop, it may just be easier to just have an AMP one. The AMP Project website is 100% AMP compliant, and looks good even on desktop.

Anatomy of an AMP page

AMP pages are very similar to normal HTML pages, but they must follow this structure:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

source

If you’re interested in building an AMP page, I strongly recommend you follow this tutorial.

Sources: AMP project website

Leave a Reply(Markdown is On)

%d bloggers like this: