AMP




Description

AMP stands for 'Accelerated Mobile Pages'. Developed by Google it indends to reduce load time and improve user experience.

Example


<html amp lang="en">

<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
    {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "headline": "Open-source framework for publishing content",
    "datePublished": "2015-10-07T12:02:41Z",
    "image": [
        "logo.jpg"
    ]
}
        </script>
        <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>
    </
    <body>
        <h1>Welcome to the mobile web</h1>
    </
    </html>

Images 

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

Linking

Add the following to the non-AMP page:

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

And this to the AMP page:

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">











Alex Bieth, Owner @ SEO Berlino and SEO Consultant

E - [email protected]


Consulting