Home /How Do You Create an AMP Page?

How Do You Create an AMP Page?

How Do You Create an AMP Page?

You can find a great tutorial for creating your first AMP page on the official site. We’re going to follow the same basic principles, except we’ll explore each section in a little finer detail – hopefully to provide a much clearer tutorial for the layman.

Requirements

All AMP documents must have the following elements:

They must all start with doc type, written as

<!doctype html>

They must all have a top-level html tag, written as

<html>

or

<html amp>

They must all contain head and body tags, optional in traditional HTML, written as

<head>
<body>

They must include a link to the regular version of the AMP page or to itself if no such page exists, written as

<link rel="canonical" href="RANDOM_URL_HERE" />

They must define a meta charset as the first child of their head tag, written as

<meta charset="utf-8">

They must include a meta viewpoint tag inside the head tag, written as

<meta name="viewport" content="width=device-width,minimum-scale=1">

You can also use the above tag to define the scale, but it’s recommended to define

initial-scale=1

Include and call upon the AMP JavaScript library, written as

<script async src="https://cdn.ampproject.org/v0.js"></script>

You must also include the following code in your head tag:

<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>

Additionally, you can include a Schema.org definition in the head of your document if you want it displayed in certain places, like the Google Search News Carousel, and others. That is written as:

{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "ADD YOUR PAGE HEADLINE HERE",
"datePublished": "YEAR-MONTH-DAY-TIME",

"image": [

"logo.jpg"

]

}

Keep in mind, the last step is optional.

Step 1: Create the Template

Copy the following code, paste it into a text editor like Wordpad or Notepad, and then save it with the .html file extension.

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://www.amptutorial.com/amp/amp-example.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": "ADD YOUR PAGE HEADLINE HERE",
"datePublished": "YEAR-MONTH-DAY-TIME",
"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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
<h2>My name is ADD_YOUR_NAME.</h2>
<h3>I'm learning how to make AMP pages for my website, which is called ADD_SITE_NAME.</h3>
</body>
</html>

With the document above, you will have created a page that says welcome, your name, and introduces your website. You should also notice that the title is “Hello, AMPs”. You can change these text values by changing the text in the code.

You should be familiar with doing basic steps like that, as this is nothing different than working with regular HTML.

Step 2: Adding Images to Your Page

One of the things you’ll need to get used to with AMP design is that while a large majority of HTML tags still work, several have been replaced with a more efficient tag. The tag, which you’ve probably grown quite fond of, is one that has been replaced. The code required looks similar to the old tag, however.

Use the following markup to embed an image onto your AMP page.

<amp-img src="welcome.jpg" alt="Welcome to my page" height="400" width="800"><amp-img>

The reason why <amp-img> is being used instead of the standard image tag, is because AMP relies on Iframes to display media.

Step 3: Change the Look and Feel of Your Page

Since AMP works like HTML, and the resulting file is nothing more than a basic webpage, you can change the appearance and layout by using common CSS elements and properties.

You can do this by adding an inline stylesheet (in the main document) which deploys class and element selectors. The stylesheet is defined in the head tag, and it uses the tag <style amp-custom>.

The barebones code for the stylesheet is the following:

<style amp-custom>
/* any custom style goes here */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>

Unfortunately, you can only have a single stylesheet embedded in your document, as this helps keep the performance to a maximum. Furthermore, there are a few CSS selectors that you cannot use at all. You can see the list of unusable selectors here.

If you want to alter the actual layout of the page, you’ll need to rely on this official tutorial to do so.

Step 4: Preview and Validate Your Page

Since your AMP page is written with HTML, you can preview it just as you would a regular HTML file you’re authoring. You can preview it locally using a browser, or you can use a local server tool such as Apache 2 or Nginx.
One thing that makes AMP, well, AMP is that the pages must be validated before they can be discovered and distributed via Google Search. It’s important to note that if you do not validate your AMP pages, they will not be able to appear on third-party platforms either.
Luckily, validating your page is pretty easy.

  1. Open your page in a web browser (locally is fine too)
  2. Add the following code to the end of the page URL: “#development=1”
    • Example) http://localhost:8000/amptest.html#development=1
  3. Use the Chrome DevTools Console to check for validation errors in your page

Step 5: Link to Your Regular Page for Distribution and Discovery

As mentioned before, if you have a regular page and an AMP page you’ll need to link the two together so that Google knows where to find them.

This is done by adding <link> tags in the head of the document.

Add the following code to the regular page after replacing the sample URL with the URL of your AMP page:

<link rel="amphtml" href="https://www.SAMPLE.com/URL/TO/AMP/PAGE.html">

Add the next snippet of code to your AMP page, so that it links back to your regular page.

<link rel="canonical" href="https://www.SAMPLE.com/URL/TO/STANDARD/PAGE.html">

Even if you only have the one AMP page, you still need to include the canonical link on the page. The trick is to simply link the AMP page to itself, telling Google to pick it up instead of another version.

The code to do that is:

<link rel="canonical" href="https://www.SAMPLE.com/URL/TO/AMP/PAGE.html">

Step 6: Publish Your Page

Once you reach this step, it’s time to publish your page for public viewing!

If there’s only one thing you take away from this tutorial it should be this: always validate your AMP page before publishing, and fix any errors that crop up during that process. If you do not remember to do this, it could severely hamper your opportunity to be featured in Google Search listings and on third-party sites.

 

Next, we’ll find out if there are any tools you can use to Convert Regular Pages to the AMP Format.