Anyone try an AMP page yet? Accelerated Mobile Pages

CMS > SEO
1

Just about to try to use the Page AMP feature. Any examples out there? Any tricks to recommend? Do any of the templates out there have an example?

Do you setup a separate content template for this? Or inline everything?

Thanks!
Shannon

2

Hi @shannonlynd. I haven’t played with AMP much but two tips I’ve found, which I didn’t think were initially obvious, are:

  1. you can view the AMP page by adding ?amp=1 to the URL.
  2. you can run AMP validation by further adding #development=1 (after the ?amp=1) which will show a validation result in the dev console (NOTE: this can take a while to run)

Best place to start and for templates I’d say is the AMP Project site:
https://amp.dev/

I don’t believe Content Templates work with AMP content. You need to inline everything - although Liquid seems to be supported here so you could create snippets, includes, etc…

I’m still not clear on how users get to the AMP version… I assume that’s all done in the search results by Google?

Would love to hear your findings and experience with this, and anyone else’s, also.

3

No luck yet, just submitted a support ticket:

I add the following AMP example just to start testing, but it doesn’t show up for mobile just yet:

<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://localhost/documentation/guides-and-tutorials/start/create/basic_markup">
    <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>This is a simple Google AMP page</h1>
  </body>
</html>
4

One thing I assume needs to be in place is correct rel="canonical" in the AMP page and rel="amphtml" in the non-amp page for Google to be able to find either page.
Then I assume we’d need to wait for either/both pages to be indexed by Google???