Skip to main content
Craft CMS

Return to Answer

Commonmark migration
Source Link
Community Bot
Community Bot
  • 1

Different Versions / Different Routes

#Different Versions / Different Routes# DependingDepending on how your site is setup, you'll want different versions of your content—one regular and one for AMP... not unlike the old m dot sites. (Taking it back to the old school WAP era I guess...)

[![enter image description here][1]][1]enter image description here

"Linking" to an AMP page

#"Linking" to an AMP page# You'llYou'll notice a <link rel="canonical" href="{{entry.url}}"> in that file as well to tell Google your main version is here.

Anything else?

#Anything else?# PrettyPretty much the rest is up to you. AMP is pretty easy to setup but you still need to use their custom tags.

Will be interesting to see how this affects page rank moving forward. Google confirmed it's not a ranking signal (yet) but that doesn't mean it won't be in the future. [1]: https://i.sstatic.net/KRdUt.png

#Different Versions / Different Routes# Depending on how your site is setup, you'll want different versions of your content—one regular and one for AMP... not unlike the old m dot sites. (Taking it back to the old school WAP era I guess...)

[![enter image description here][1]][1]

#"Linking" to an AMP page# You'll notice a <link rel="canonical" href="{{entry.url}}"> in that file as well to tell Google your main version is here.

#Anything else?# Pretty much the rest is up to you. AMP is pretty easy to setup but you still need to use their custom tags.

Will be interesting to see how this affects page rank moving forward. Google confirmed it's not a ranking signal (yet) but that doesn't mean it won't be in the future. [1]: https://i.sstatic.net/KRdUt.png

Different Versions / Different Routes

Depending on how your site is setup, you'll want different versions of your content—one regular and one for AMP... not unlike the old m dot sites. (Taking it back to the old school WAP era I guess...)

enter image description here

"Linking" to an AMP page

You'll notice a <link rel="canonical" href="{{entry.url}}"> in that file as well to tell Google your main version is here.

Anything else?

Pretty much the rest is up to you. AMP is pretty easy to setup but you still need to use their custom tags.

Will be interesting to see how this affects page rank moving forward. Google confirmed it's not a ranking signal (yet) but that doesn't mean it won't be in the future.

added 1311 characters in body
Source Link
RitterKnight
RitterKnight
  • 6.6k
  • 15
  • 24

enter image description here [![enter image description here][1]][1]

The page you linked to provides a simple skeleton toAMP docs start with a simple skeleton. I used {% extends "_layoutamp" %} in our _amp template so we need to make a ``_layoutamp.html" file to match inside Craft's templates folder.

   {# _layoutamp.html #}
    <!doctype html>
    <html amp lang="en">
      <head>
        <meta charset="utf-8">
        <title>{{entry.title}}</title>
        <link rel="canonical" href="{{entry.url}}" />
        <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": "{{entry.title}}",
            "datePublished": "{{entry.dateCreated.iso8601()}}",
            "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 <style>body1 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{opacityfrom{visibility:hidden}to{visibility:visible}}@-moz-keyframes 0-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>bodystyle><noscript><style amp-boilerplate>body{opacity-webkit-animation: 1none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
        <script async src="https://cdn.ampproject.org/v0.js"></script>
      </head>
      <body>
        {% block content %}
           {# brings in the content from the _amp.html content block #}
        {% endblock %}
      </body>
    </html>

AMP requiresrecommends some metadata near the top, in the form of JSON. Easy enough to spit out the required fields in Twig.

#Anything else?# Pretty much the rest is up to you. AMP is almost toopretty easy not to setup but you still need to use their custom tags.

Most notably, things like images and videos need to use custom tags like amp-img and amp-video, so the AMP runtime can intercept the loading of those assets and handle them. 

Will be interesting to see how this affects page rank moving forward. Google confirmed it's not a ranking signal (yet) but that doesn't mean it won't be in the future. [1]: https://i.sstatic.net/KRdUt.png

enter image description here

The page you linked to provides a simple skeleton to start with. I used {% extends "_layoutamp" %} in our _amp template so we need to make a ``_layoutamp.html" file to match inside Craft's templates folder.

   {# _layoutamp.html #}
    <!doctype html>
    <html amp lang="en">
      <head>
        <meta charset="utf-8">
        <title>{{entry.title}}</title>
        <link rel="canonical" href="{{entry.url}}" />
        <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": "{{entry.title}}",
            "datePublished": "{{entry.dateCreated.iso8601()}}",
            "image": [
              "logo.jpg"
            ]
          }
        </script>
        <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
        <script async src="https://cdn.ampproject.org/v0.js"></script>
      </head>
      <body>
        {% block content %}
           {# brings in the content from the _amp.html content block #}
        {% endblock %}
      </body>
    </html>

AMP requires some metadata near the top, in the form of JSON. Easy enough to spit out the required fields in Twig.

#Anything else?# Pretty much the rest is up to you. AMP is almost too easy not to setup. Will be interesting to see how this affects page rank moving forward.

[![enter image description here][1]][1]

The AMP docs start with a simple skeleton. I used {% extends "_layoutamp" %} in our _amp template so we need to make a ``_layoutamp.html" file to match inside Craft's templates folder.

   {# _layoutamp.html #}
    <!doctype html>
    <html amp lang="en">
      <head>
        <meta charset="utf-8">
        <title>{{entry.title}}</title>
        <link rel="canonical" href="{{entry.url}}" />
        <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": "{{entry.title}}",
            "datePublished": "{{entry.dateCreated.iso8601()}}",
            "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>
        <script async src="https://cdn.ampproject.org/v0.js"></script>
      </head>
      <body>
        {% block content %}
           {# brings in the content from the _amp.html content block #}
        {% endblock %}
      </body>
    </html>

AMP recommends some metadata near the top, in the form of JSON. Easy enough to spit out the required fields in Twig.

#Anything else?# Pretty much the rest is up to you. AMP is pretty easy to setup but you still need to use their custom tags.

Most notably, things like images and videos need to use custom tags like amp-img and amp-video, so the AMP runtime can intercept the loading of those assets and handle them. 

Will be interesting to see how this affects page rank moving forward. Google confirmed it's not a ranking signal (yet) but that doesn't mean it won't be in the future. [1]: https://i.sstatic.net/KRdUt.png

added 12 characters in body; added 107 characters in body
Source Link
RitterKnight
RitterKnight
  • 6.6k
  • 15
  • 24

#Different Versions / Different Routes# Depending on how your site is setup, you'll want different versions of your content—one regular and one for AMP... not unlike the old m dot sites. (BackTaking it back to the flip phone area, eh Google?old school WAP era I guess...)

#Anything else?# Pretty much the rest is up to you. AMP is almost too easy not to setup. Will be interesting to see how this affects page rank moving forward.

#Different Versions / Different Routes# Depending on how your site is setup, you'll want different versions of your content—one regular and one for AMP... not unlike the old m dot sites. (Back to the flip phone area, eh Google?)

#Anything else?# Pretty much the rest is up to you.

#Different Versions / Different Routes# Depending on how your site is setup, you'll want different versions of your content—one regular and one for AMP... not unlike the old m dot sites. (Taking it back to the old school WAP era I guess...)

#Anything else?# Pretty much the rest is up to you. AMP is almost too easy not to setup. Will be interesting to see how this affects page rank moving forward.

added 118 characters in body; added 75 characters in body; added 42 characters in body
Source Link
RitterKnight
RitterKnight
  • 6.6k
  • 15
  • 24
Source Link
RitterKnight
RitterKnight
  • 6.6k
  • 15
  • 24