Related Articles

Related Articles

How to make Simple Website using Google AMP ?
  • Last Updated : 25 Oct, 2020

 

Google AMP is a good way to make a mobile website with fast loading feature. It is entirely built on the latest web technologies. Google AMP has achieved such speed by restricting some parts of HTML, CSS and JavaScript to load the web pages at the best possible speed without losing its beauty. Those restrictions lead to a definition of custom elements and rules.

Rules:

  • The doctype declaration is required.
<!doctype html>
  • Designer must use <html ⚡> or <html amp> instead or standard <HTML> tag to start the AMP page code. This tells the browser that the file is an AMP file.
<html amp>
  • The HEAD tag must contain the following links and code in it to make the AMP code work.

HTML




<!-- The charset definition must be the
    first child of the `<head>` tag. -->
<meta charset="utf-8">
<!-- The AMP runtime must be loaded as
    the second child of the `<head>` tag.-->
 
<script async src=
</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=
 
<!-- AMP HTML files require a viewport declaration.
It's recommended to include initial-scale=1 -->
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
 
<!-- The AMP boilerplate -->
<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>


  • Custom CSS can be added in the AMP page by writing CSS in AMP CSS tag as shown:

HTML




<style amp-custom>
  <!-- Custom CSS -->
</style>


 



It can be noted that most of the HTML tags can directly be used in an AMP page while some tags like img are replaced with the redefined AMP tag.

Example:

HTML




<!-- Doctype declaration is required. -->
<!doctype html>
 
<!-- This tells the browser that this is
    an AMP file. `<html ⚡>` works too. -->
<html amp>
 
<head>
    <!-- The charset definition must be the
        first child of the `<head>` tag. -->
    <meta charset="utf-8">
 
    <!-- The AMP runtime must be loaded as the
       second child of the `<head>` tag.-->
    <script async src=
    </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=
 
    <!-- AMP HTML files require a viewport
        declaration. It's recommended to
        include initial-scale=1 -->
    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
     
    <!-- CSS must be embedded inline -->
    <style amp-custom>
        h1 {
            color: forestgreen;
        }
    </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>
    <h1>
        Hello World!<br>Welcome to
        GeeksForGeeks
    </h1>
</body>
 
</html>


Output:

This output is for iPhone 6/7/8




My Personal Notes arrow_drop_up
Recommended Articles
Page :