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


Getting Started With AMP (Accelerated Mobile Pages)


AMP ACCELERATED MOBILE PAGES
25th July 2020 6 mins read
Share On     Share On WhatsApp   Buy Me Coffee | StackCoder Buy Coffee


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


  1. What is AMP ? Why should I use it?
  2. Tools & Tips To Get Started With Development
  3. Basic AMP Boilerplate Syntax
  4. 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


  1. Your webpage loads faster - as you would have eliminated many CSS code & would have removed Javascript from the webpage.
  2. Cached on the servers like Google, Bing, Cloudflare etc which will help your webpage serve faster.
  3. It will also help directly or indirectly in SEO Optimization.
  4. 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

AMPHTML Validator


VS Code AMP HTML 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

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 &#9889; 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.


Related AMP Articles


Setup AMP (Accelerated Mobile Pages) In PHP Laravel

Add Analytics To AMP (Accelerated Mobile Pages) HTML Pages







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