Good content takes time and effort to come up with.

Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.

Getting Started With AMP (Accelerated Mobile Pages)

25th July 2020 6 mins read

Share On

In this article, we shall start writing AMP (Accelerated Mobile Pages) along with your standard website.

We will cover the following topics in this article

What is AMP ? Why should I use it?
Tools & Tips To Get Started With Development
Basic AMP Boilerplate Syntax
How To Design Your URLs ?

1) What is AMP ? Why should I use it?

AMP (Accelerated Mobile Pages) is an open source HTML framework with some stricter rules.

Basically, it adds syntactical sugars on top of the regular HTML markup language and forces the users to excluded external CSS, JS, Fonts & how Images should be added and much more stuff.

Following are the reasons why you should start implementing AMP

Your webpage loads faster - as you would have eliminated many CSS code & would have removed Javascript from the webpage.
Cached on the servers like Google, Bing, Cloudflare etc which will help your webpage serve faster.
It will also help directly or indirectly in SEO Optimization.
Customer retention.

2) Tools & Tips To Get Started With Development

AMP Validator

You can use this webpage to instantly validate your AMP pages AMP Validator

VS Code Plugin

If your using VS Code then this is a must plugin AMP HTML Validator.

AMPHTML Validator

VS Code AMP HTML Validator

Chrome Extension

Chrome is the browser that supports out of the box for AMP pages development with the help of this extension Chrome Extension.

Chrome Extension Console Debugger

If you are using Chrome Extension and you can use the following cool utility to get the errors displayed in Console tab of the Chrome browser.

http://127.0.0.1:5500/index.html#development=1

Chrome Extension Console Debugger

3) Basic AMP Boilerplate Syntax

As I said earlier AMP is the extension of HTML markup language most of the code remains the same. The following is the basic AMP syntax

AMP Boilerplate

<!doctype html>
<!-- This tells everyone that this is an AMP file. By default there will be a lightining bolt sybmbol -->
<html amp lang="en">
    <!-- The charset definition must be the first child of the `<head>` tag -->
    <head>
        <meta charset="utf-8">
        <!-- The AMP runtime must be loaded as the second child of the `<head>` tag.-->
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <!--AMP HTML files require a canonical link pointing to the regular HTML. If no HTML version exists, it should point to itself -->
        <link rel="canonical" href="index.html">
        <title>Getting Started With AMP</title>
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
        
        <!-- Custom CSS must be embedded inline-->
        <style amp-custom>

       
        </style>


        <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>
        Some Body
    </body>
</html>

Let me break down boilerplate

Document Type

<!doctype html>

This is a must else you will get the following error

The parent tag of tag 'html' is '$root', but it can only be '!doctype'.

The mandatory tag 'html !doctype' is missing or incorrect.

Specifying HTML is AMP

<!-- This tells everyone that this is an AMP file. By default there will be a lightining bolt sybmbol-->
<html amp lang="en">

With the help of AMP attribute in html tag it will be rectified as AMP page.

You can specify the AMP attribute in 2 variants one is with amp as you saw another is using lightning bolt ⚡ symbol.

Character Set

<!-- The charset definition must be the first child of the `<head>` tag -->
<meta charset="utf-8">

This should be first child of head tag and must be compulsorily added.

AMP Script

<!-- The AMP runtime must be loaded as the second child of the `<head>` tag.-->
<script async src="https://cdn.ampproject.org/v0.js"></script>

This script is plays the vital role and decides which elements needs to be loaded and when to be loaded. For example the off screen images ie the images that are down of the article wont be loaded unless you scroll. And many more stuff will be decided by this script during the runtime.

Title & Viewport

<title>Getting Started With AMP</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

Even these are mandatory elements.

Canonical Links

In simple terms, canonical links are basically used to overcome duplicate content in HTML pages and give boost in your SEO

AMP HTML Pages

<link rel="canonical" href="CURRENT_URL OF THE PAGE">

Your AMP pages should have the canonical to your original Non AMP pages.

Normal HTML Pages

<link rel="amphtml" href="AMP URL OF THE PAGE">
<link rel="canonical" href="CURRENT_URL OF THE PAGE">

Your normal pages should contain amphtml & canonical tags both.

NOTE: If you don't have normal HTML page for AMP version HTML then add AMP version HTML URL

Custom CSS

<!-- Custom CSS must be embedded inline-->
<style amp-custom>

       
</style>

Your CSS wont work if you directly add inside style tags.

TIP: If your using PHP or any other server side programming that you can dynamically include it as show below

<style amp-custom>
	<?php include_once public_path('css/app-amp.min.css') ?>
    /* you can add your normal css here also */
</style>

This is really cool because you can maintain different style and can dynamically import CSS based on the pages your going.

AMP CSS Boilerplate (Don't change this piece of code)

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

Make sure not to touch this piece of code. It's usually used by AMP.

4) How To Design Your URLs ?

Basically you can have many identifiers in the URL to check the if the current page is AMP HTML page or normal HTML page.

Having AMP prefixed to URLs (I have implemented this one in my website)

Normal URL - https://stackcoder.in/posts
AMP URL   - https://stackcoder.in/amp/posts

Normal URL - https://stackcoder.in/posts/post_url
AMP URL   - https://stackcoder.in/amp/posts/post_url

I have implemented this to my own website and you can find detailed article in this link

Setup AMP (Accelerated Mobile Pages) In PHP Laravel.

Having AMP suffixed to URLs

Normal URL - https://stackcoder.in/posts
AMP URL   - https://stackcoder.in/posts/amp

Normal URL - https://stackcoder.in/posts/post_url
AMP URL   - https://stackcoder.in/posts/post_url/amp

Having AMP as GET parameters

Normal URL - https://stackcoder.in/posts
AMP URL   - https://stackcoder.in/posts/?amp=true

Normal URL - https://stackcoder.in/posts/post_url
AMP URL   - https://stackcoder.in/posts/post_url/?amp=true

Having AMP Subdomain

Please don't use this method as much as possible, as you will end up writing lot of code.

Normal URL - https://stackcoder.in/posts
AMP URL   - https://amp.stackcoder.in/posts

Normal URL - https://stackcoder.in/posts/post_url
AMP URL   - https://amp.stackcoder.in/posts/post_url

Conclusion

Hope this article helped you. Please share it with your friends.

Articles For You

Upload Files In PHP?

PHP extension ext-intl * is missing

Integrate Google Translate Into Your Website

Install Letsencrypt SSL Certificate for RabbitMQ Server and RabbitMQ Management Tool

Sass or SCSS @mixin vs @extends vs Placeholder (%)

Setup AMP (Accelerated Mobile Pages) In PHP Laravel

Install Apache Web Server On Ubuntu 20.04 / Linux & Manage It

Why namespace And use Keywords Used In PHP

Laravel Clear Cache Of Route, View, Config Command

Resolve 404 Not Found In NGINX

Securely Connect Server MYSQL DB From Sequel Pro / MYSQL Workbench

Multiple GIT Key Pairs Or Account In The Same Computer

Upload Image In PHP?

Global Data In All Laravel Blade Pages

Supervisor For Laravel Queue Scheduling

AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing