Creating AMP Content

Tuesday Jul 4th 2017 by Rob Gravelle
Share:

In a previous article, Rob Gravelle provided an overview of Google's AMP project, whose aim is to dramatically improve the performance of the mobile Web. In today's tutorial, we'll create a basic AMP page and validate it on our local server.

The What are Accelerated Mobile Pages (AMP)? article provided an overview of Google's AMP project, whose aim is to dramatically improve the performance of the mobile Web. If you've been following the buzz about AMP you will have heard Google share its test results of achieving up to 85% speed boosts with early partners' pages. Pinterest ran some tests of their own recently and found that "AMP pages load four times faster and use eight times less data than traditional mobile-optimized pages". It's results like those that are really driving developers towards AMP. In today's tutorial, we'll create a basic AMP page and validate it on our local server.

The HTML Template

AMP is a web standard built on existing web technologies whose primary focus is on static content. It's comprised of three different components:

  1. AMP HTML: modified HTML with the restriction of certain regular HTML/CSS features and introduction of new custom tags
  2. AMP JS: enforces best practices in order to decrease page load time such as asynchronous loading of external resources
  3. AMP CDN: a cache with a built-in validation system, that optimizes your site even further

This standard template includes all three of the above features and will be the basis of our AMP page:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First AMP Page</title>
    <link rel="canonical" href="/index.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>
    <h1>My First AMP Page</h1>
  </body>
</html>

Running the AMP Validation

The cdn.ampproject script that we referenced in our page performs validation on it. It can provide valuable information about potential issues.

The best way to run your AMP pages is on a local server because that most closely resembles the final environment in which your pages will reside. For this tutorial we'll be serving our page on MAMP's server and viewing it in Google Chrome. More than just a server, MAMP is a solution stack composed of free and open-source and proprietary commercial software used together to run dynamic web sites on the Apple Macintosh and MS Windows platforms. MAMP is an acronym of macOS, the operating system; Apache, the web server; MySQL, the database management system; and PHP, Perl, or Python, three popular web development programming languages.

Setting up the Server

The server installation executable may be downloaded from the MAMP & MAMP PRO site. The setup wizard will guide you through the installation process.

One minor drawback to the MAMP installation is that both the free and pro versions share the same executable. Hence, it's a big one!

At one point, the wizard will ask you whether or not to install MAMP PRO in addition to the free version. You can opt out of the PRO edition by deselecting the checkbox:

mamp_setup (35K)

Once you have MAMP installed, you may want to configure the port that the server listens to. Under the covers, MAMP is running an Apache Web server, with a default port of 8888, but I prefer to use 8080 for my projects, so here's what you wind up with:

mamp_port_settings (38K)

Documents are served from the htdocs folder. On Mac you will typically find it at "/Applications/MAMP/htdocs", and on Windows at "C:\MAMP\htdocs\".

Inside it, create a new folder to house your project, e.g. "AMPProject". Then move the index.html file you created in the previous step into the folder.

project_hierarchy (83K)

Run MAMP and you should now be able to preview your AMP template by going to the URL "http://localhost:8080/AMPProject/" in Chrome. I strongly urge you to use Chrome as we'll be using Chrome Developer Tools in the next step.

Your AMP page should currently look like this:

amp_page_in_chrome (78K)

To view the console, press the F12 key.

Debug Mode

I like to turn on AMP's debug mode so if I accidentally do something that doesn't pass validation, Chrome will alert me right away. To do this, I add "#development=1" to the end of the preview URL, e.g. "http://localhost:8080/AMPProject/#development=1". If you do the same and go to the Console tab in the Chrome Developer Tools, you should see the following "Powered by AMP ⚡ HTML..." message:

amp_page_in_chrome_debug_mode (77K)

Including JSON Metadata

In addition to the bare requirements, you might also want to include a Schema.org definition in the head. While not necessary for AMP, it is a requirement to get your content distributed on certain sites, such as in the Google Search news carousel demo.

To learn more about all the meta-data you'll need in various other sites, e.g. Twitter, explore the AMP project's samples on Github.

google_amp_roundtable (108K)

Place the metadata between the viewport meta tag and the style block:

<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": "Creating AMP Content",
    "datePublished": "2017-06-02T12:02:41Z",
    "image": [
      "logo.jpg"
    ]
  }
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s ...

You can view the full source code in Codepen.

Viewing the AMP Carousel Demo

To see AMP in action:

  1. Navigate to the the Google Search news carousel demo on either a mobile device or using a mobile simulator such as the Chrome DevTools' Mobile Device Simulator.
  2. Enter a search query in the search bar. As Google AMP currently works mainly with news sites, the best choice is a news story. For instance, here are the results for the search term "rio olympics":

    amp_search (106K)
  3. See the link inside the blue rectangle. Click it to proceed to the news story, which is just a sample AMP page in the demo:

    amp_preview_in_chrome_mobile_emulator (111K)

Conclusion

In upcoming instalments, we'll cover how to add images, custom AMP elements, and how to style our page to produce a responsive layout.



Rob Gravelle

Rob Gravelle resides in Ottawa, Canada, and has built web applications for numerous businesses and government agencies. Email him.

Rob's alter-ego, "Blackjacques", is an accomplished guitar player, that has released several CDs and cover songs. His band, Ivory Knight, was rated as one of Canada's top hard rock and metal groups by Brave Words magazine (issue #92) and reached the #1 spot in the National Heavy Metal charts on ReverbNation.com.

Share:
Home
Mobile Site | Full Site
Copyright 2017 © QuinStreet Inc. All Rights Reserved