Getting Started With AMP (Accelerated Mobile Pages)

WHAT IS AMP?

Accelerated Mobile Pages (AMP) is an Open Source framework used to create faster loading mobile web pages. AMP pages are built using AMP HTML, a subset of HTML. Although similar to regular HTML, AMP HTML has required markup, unique tags, and other restrictions that make it different than regular HTML. In addition, third-party JavaScript is not allowed and custom CSS must be used inline.

SEARCH ENGINE RANKINGS

Page speed is now a ranking factor in Google mobile search results. Consequently, having a fast-loading mobile website has the potential to help your website rank higher. Although using AMP specifically may not improve your search engine rankings, by using the AMP framework, your mobile pages will be optimized to load faster in mobile.

In Google’s mobile search results, AMP pages will appear with a next to them:

An AMP page in Google’s mobile search results

AN AMP HTML TEMPLATE

Below is a sample AMP starter template with all of the required markup:


<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>A Starter AMP Template</title>
    <link rel="canonical" href="https://www.dayaweb.com/blog/getting-started-with-amp-accelerated-mobile-pages/">
    <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>A Starter AMP Template</h1>
  </body>
</html>

Note: you can use amp in place of ⚡. Example: <html amp lang="en">

For a quick start to creating your own AMP pages, you can follow this tutorial. You can also try the AMP Boilerplate Generator.

COMMON AMP TAGS

In place of the <img> tag, you would use the <amp-img> tag:

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

Note: AMP requires that all elements have an explicit size. For example, images included on an AMP page will need to have height and width values set for that element.

AMP STYLES

AMP pages can be styled using CSS, but only inline. CSS properties are placed in an embedded stylesheet within a <style amp-custom> tag in the <head> of the web page.

Example:

<style amp-custom>
.alignright {
    float: right;
}
.alignleft {
    float: left;
}
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
</style>

USING AMP WITH WORDPRESS

You can automatically create AMP pages in WordPress using the official AMP plugin.

The AMP WordPress plugin in the WordPress Dashboard

AMP URL SCHEME

It’s important to distinguish your AMP pages with a unique URL scheme.

Some examples:

https://amp.dayaweb.com/http-to-https-migration-checklist/
https://www.dayaweb.com/amp/blog/http-to-https-migration-checklist/
https://www.dayaweb.com/blog/http-to-https-migration-checklist/amp

MAKE YOUR AMP PAGES DISCOVERABLE

In order for your AMP pages to be crawled and indexed by Google, your AMP pages must link to a canonical page. The canonical page can either be a non-AMP page or the AMP page itself.

If you have a non-AMP page and an AMP page:

On the non-AMP page, you need to specify the AMP version of the page using rel="amphtml":

<link rel="amphtml" href="https://www.dayaweb.com/blog/http-to-https-migration-checklist/amp">

On the AMP page, you need to specify the non-AMP page as the canonical URL:

<link rel="canonical" href="https://www.dayaweb.com/blog/http-to-https-migration-checklist/">

If you only have an AMP page, then the canonical URL should point to itself:

<link rel="canonical" href="https://www.dayaweb.com/blog/http-to-https-migration-checklist/amp">

VALIDATING YOUR AMP PAGES

There are several ways to validate your AMP pages. You can validate your AMP pages by going to the AMP Validator and entering your AMP page URL:

The AMP Test tool will check if your AMP pages meet Google Search Requirements

If you use the Google Chrome Web Browser, you can use the Chrome DevTools console to validate your AMP pages:

Open your AMP page in the Google Chrome Web Browser
Append #development=1 to the URL in the address bar. Example: https://www.dayaweb.com/blog/http-to-https-migration-checklist/amp/#development=1
Open DevTools to check for any errors

AMP TIPS

Use HTTPS. There are certain AMP features that require HTTPS, but there are many reasons why your website should be using HTTPS.
Use schema.org markup.
Use the same content and actions on the AMP pages that are on the canonical pages, if possible.

CONTACT US TO ADD AMP PAGES TO YOUR WEBSITE