Как сделать простой сайт с помощью Google AMP?

Опубликовано: 12 Апреля, 2022

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=
    "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=
"https://amp.dev/documentation/examples/introduction/hello_world/index.html">
 
<!-- 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>

Можно отметить, что большинство тегов HTML можно напрямую использовать на странице AMP, в то время как некоторые теги, такие как img, заменяются переопределенным тегом AMP.

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=
        "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=
"https://amp.dev/documentation/examples/introduction/hello_world/index.html">
 
    <!-- 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>

Выход:

Этот вывод предназначен для iPhone 6/7/8.

РЕКОМЕНДУЕМЫЕ СТАТЬИ