AMP & SEO

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

                            <body>
                                <h1>Welcome to the mobile web</h1>
                            </body>

                            </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, SEO Consultant