Google AMP Questions

1

Im looking at the Hugo and Amp docs and I am still not sure how they essentially work together.

Do I use the output-formats to create second versions of all pages in my site, and push 2x to the repo?
I see in the Amp docs that there is some different formatting in the head… (for example)

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

How would I template the different head sections (right now I have head in baseof.html) should I create two head partials (regular & amp), and include the hugo output-formats code in the baseof.html?

Where do I split the code and say all mobile users get the amp version and others get a full version? Is this based on screen size or should I query network bandwidth somehow? I will be using netlify for deployment.

I like the idea of increased search visibility, and faster load experience for mobile users. Does anyone have experience with Amp, were the results worth implementation?


2

How you organize your partials is a little bit up to you, but you will typically have 2 base templates e.g. baseof.html and baseof.amp.html.

Where do I split the code and say all mobile users get the amp version and others get a full version? Is this based on screen size or should I query network bandwidth somehow? I will be using netlify for deployment.

You don’t split the code, you “tell the world” (or Google) that your page is available in different formats (including AMP):

{{ range .AlternativeOutputFormats -}}
<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
{{ end -}}

If you put the above in your head section of both the regular and AMP template you should be good in that department.

6 Likes