The AMP Project aims to create high performing websites that are consistently fast on different devices. To create Google AMP pages for your website requires knowledge on the components the AMP project provides, as well as its limitations or adjustments you may need to make to your pages in order to create a valid AMP web page.
To start with, your web page must be written in HTML5. The minimum requirements include having a doctype declaration, followed by either a <html ⚡> or <html amp> tag, which identifies the page as AMP content.
Although not required in HTML5, AMP content must contain a pair of <head> and <body>: tags.
<!DOCTYPE html>
<html amp>
<head>
</head>
<body>
<h1>Welcome to AMP</h1>
</body>
</html>
Add the <meta charset="utf-8"> just underneath the opening <head> tag.
The next line should contain the include to the AMP JavaScript library.
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js">
</head>
<body>
<h1>Welcome to AMP</h1>
</body>
</html>
Next, add a <link rel="canonical"> line specifying your web page’s canonical URL, and the viewport meta tag and contains the width=device-width,minimum-scale=1 within the content attribute.
It is also recommended to include initial-scale=1 within the content.
Finally, contain the Google AMP boilerplate code as the last item within the <head> tag.
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js">
<link rel="canonical" href="https://yourdomain.com">
<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>
</head>
<body>
<h1>Welcome to AMP</h1>
</body>
</html>
The first question you’ll probably be asking yourself is ‘Where does all my custom CSS fit in?’. All CSS should be added inside a <style amp-custom> tag in the head of the document. This is usually placed underneath <style amp-boilerplate>.
This means that any CSS you have added previously to your web pages needs to be moved into the <head>.
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js">
<link rel="canonical" href="https://yourdomain.com">
<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>/* Your styles here */</style>
</head>
<body>
<h1>Welcome to AMP</h1>
</body>
</html>
Another main change to regular HTML document is that AMP doesn’t support the default HTML media such as <img>.
To include an image in an AMP document, add a <amp-img> tag.
<amp-img alt="My Image" src="images/my-image.jpg" width="200" height="200"> </amp-img>
If your web pages are designed to be responsive on different devices, you may have CSS that ensures that the width of the images resize correctly for mobile and tablet devices.
You might have a max-width: 100% style for your img elements for example.
AMP makes it much easier than with standard CSS/HTML to create fully responsive images. Simply add a layout="responsive" attribute to amp-img.
<amp-img alt="My Image" src="images/my-image.jpg" width="200" height="200" layout="responsive"> </amp-img>
To use with AMP documents, the <amp-form> component is required.
Simply include the JavaScript library in your site’s head.
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
Then, add a Form component as per the AMP Form Component page.
Fortunately, the AMP project takes into account that the vast majority of websites contain Google Analytics tracking code.
Again, an Analytics component is needed within your site’s head.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
This Analytics component will then allow you to add a <amp-analytics> element to your web page using the code below.
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Using AMP will help improve user experience and speed up loading times, especially those on mobile devices. Despite some its limitations, like not allowing synchronous JavaScript, it may be a good solution for ‘simpler’ websites that don’t rely a lot on third party JavaScript manipulating the DOM.
The AMP project is not the finished article, so expect more features and functionality included by keeping an eye on its Github repository.