Tutorial
AMP HTML, an Overview
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
AMP stands for Accelerated Mobile Pages and is an open source initiative put forth by Google to create a unified way to make sites load faster on mobile devices by an order of magnitude. AMP should prove to be a great way to make the web better on mobile, especially for those on slow connections.
AMP restricts certain parts of HTML, CSS and JavaScript to ensure a fast experience. To make up for the extra restrictions, it also comes with components to let you do things like embed videos, integrate carousels and a bunch of other neat things. AMP will be used by outlets such as Twitter, Pinterest and Google to link to a super fast version of a page on mobile. Try out a demo of AMP pages in Google here.
Getting Started
Start your AMP HTML pages like the following:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical"
href="https://path/to/regular/page">
<meta name="viewport"
content="width=device-width,
minimum-scale=1,initial-scale=1">
<style amp-boilerplate></style>
A few things to keep in mind:
- Notice the use of ⚡ with the opening html tag to indicate that this is an AMP HTML page.
- Also notice the use of the canonical tag to indicate the location of the regular non-AMP page.
- Don’t forget the meta charset right after the opening head tag.
- Load the AMP JS runtime right before the closing head tag. Notice the use of async, which is very important here. All scripts need to load asynchronously in order for the page to validate as AMP HTML.
- The boilerplate style wasn’t included in the snippet above for brevity, but here’s the full code for it:
<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>
With this inline CSS boilerplate, the content will be hidden at first, then displayed when the assets are loaded. This way, you’ll prevent a flash of unstyled content (FOUC) that happens when loading fonts asynchronously.
Content & Components
After the head section, your AMP HTML pages will mostly be just plain old html, with a few key exceptions. For example, img tags aren’t supported and amp-img should be used instead:
<amp-img src="../alligator.svg"
width="400"
height="150"
layout="responsive"
alt="Dead Gator">
</amp-img>
For amp-img, you define both the width and height. Browsers will be smart enough to downsize proportionally if needed.
Here’s a list of a few more components that are available with AMP HTML: amp-accordion, amp-instagram, amp-sidebar, amp-youtube, amp-audio…
For most of these additional components, you’ll need to load an extra JavaScript file in the head section. For example, for the amp-instagram component:
<script async
custom-element="amp-instagram"
src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js">
Testing, Debugging & Publishing
In order for your AMP HTML pages to be served, they first need to be valid. Simply add #development=1 at the end of an AMP page and the JavaScript console will be in debug mode and let you know if anything is wrong.
The next step is to make sure that you include a rel tag on your original page that points to the AMP version like this:
<link rel=”amphtml”
href=”https://alligator.io/some-post.amp.html" />
Learn More + Resources
Here are some good resources to learn more about AMP HTML and to get involved:
0 Comments