Is Hugo support AMP ( Accelerated Mobile Pages )?

Is Hugo supports AMP ( Accelerated Mobile Pages ) or not yet?

2 Likes

Hey @akinrt,
Amp pages run as alternate versions of a page. I’ve read some recommendations that one could create separate pages (which head links to the original) and let Google find these. However, a sweeter alternative would be to use conditionals. The question is what would trigger the conditional for amp pages? Thinking out of the box, one could have to major divs one every page, one for desktop and one for amp. With CSS you could then display:none on the desktop version if the user is on mobile.

Or, you could just make your whole site into amp pages.

@akinrt Coincidentally, I’ve been reading up on AMP recently as well. There are a few considerations if you are really hell-bent on perf:

  1. Hugo is an SSG, so the grind and complexity of RDBMSs, caching layers, etc is already a non-issue. This means silly fast page loads. If you really want to up the ante, I’d recommend putting all your static assets into static/assets (this could be done as part of your Gulp/Grunt build process) and then using CloudFlare’s free plan as a CDN and to set caching levels for images, stylesheets, and scripts.
  2. Depending on your content (ie, are people going to one page at a time and leaving or going to multiple pages instead), you might want to implement some best practices w/r/t critical rendering path. Eg, embedding all above-the-fold css in <style> tags in the html <head>, caching your script (note: only one script) that has been minified, uglified, etc, optimizing every single image, embedding SVGs as HTML, using @font-face, etc, reducing HTTP requests.
  3. Not sure as to when HTTP 2.0 will become a reality, but basically everything I wrote above is (supposedly) going to be a non-issue.

Not sure if that helps. Cheers.

Hi @RickySpanish , @rdwatters :slightly_smiling:

Thanks for your reply,
yeah it seems like alternate page that accelerate website loading faster for mobile browser.

@rdwatters your answer great points of view !!

The question was is there any support to generate default html pages and its amp pages together with option?

# ex. generate static files with just a simple theme not specified way for amp-html
hugo -t xxxxxx

# what I want is following
# normal html
/publish_dir/post/hello.html
# also generate amp html with amp html format
/publish_dir/post/hello-amp.html

But now I think I was asking wrong question…
Once I made sample amp html along amphtml , I realised that I should prepare layout for amp html. The critical point on amp-html was we can’t use JavaScript on amp html, but we can write amp html with html tags and AMP HTML Components.

However AMP seems like be able to show better search result and user experience for blogs and news sites.
I’m still curious to generate amp html with html.

@akinrt @RickySpanish - have either of you made any progress with AMP?

I know @bep had weighed in on this on a different thread, but it seems that AMP is really building momentum; of note for those who follow the Google webmaster blog and are interested in SEO, it seems that AMP was featured at Google I/O this year. Look at #3 in the most recent webmaster blog.

Hey @rdwatters,
I’ve been working on a Rails project so haven’t been engaged in Hugo during the last couple of months. But it’s soon time to return to this wonderful community again :slightly_smiling: So unfortunately I haven’t tried to hack forth AMP-pages

But if you want my two cents its really worth focusing on. Google is still the main way for people to find solutions to problems, and I think a lot of us will produce content that gets discovered through the search engine.

Any news on this?

Someone build a new theme called amp that makes use of the same-named project. Maybe it’s worth a look.

There is also an open issue to add support for amp:

1 Like

I’ve noticed how much weight Google has started to give AMPs, I’m about to have a look at this in the coming weeks. Getting the link to the AMPs is probably the easy part, tougher to get Hugo to generate it for us.

Expanding a bit while it’s fresh in my head. What we need to create is an AMP-template that serves up the pages. With this in mind, I’ll get back to you. If I succeed I’ll write a guide (just beware, I’m a total noob).

For guys and gals in a hurry, check out @bep s inuput here https://github.com/spf13/hugo/issues/1905

PS. Feels good to be back working with Hugo, feels like the good old days pre year 2000.

2 Likes

Trying to get back into the game again here after a longer period with RoR. Creating the template shouldn’t be too much of a problem, the official AMP site provides a lot of guidance. The main issue I see is how to get the content into the AMP-version without having to duplicate our markdown-files (if possible).

Let’s take a blog post as an example (after years in SEO, I can say with confidence that AMPs are most important for the type of longtail content that can be found in blog posts or similar).

Say you want to create AMP-versions of all your posts

Alt 1

  1. Your template for blog posts would probably be located in theme-name/layout/posts/single
  2. The text for your posts would probably be located in content/posts/
  3. So ideally we would want to create a template, perhaps called single-amp in theme-name/layout/posts/ (i.e. same as in step 1)
  4. The old template should have a canonical that links to AMP path, the new template should have a canonical that links to original
  5. Step four could probably be handled with frontmatter (for example a second slug-tag named amp-slug or similar

Not superfamiliar with Hugo so wondering if this is possible or if we have to do something like the following…

Alt 2

  1. Somehow duplicate all posts in content/posts/ on build so duplicates can be found in content/posts/amp/
  2. Create a template called single in theme-name/layout/posts/amp/
  3. Same as step 4-5 above

Reflections on this?

This enables proper handling of images in amp:

1 Like

Wow, while browsing the Netlify-blog (also great service, no affiliation) I found this https://mercury.postlight.com/amp-converter/ has anyone tried it? @akinrt @Igor_Kulman @rdwatters @RickySpanish @bep @digitalcraftsman

Not sure if its what you are looking for, but I took the AMP-Challenge with Hugo the last couple of days as well and came up with a theme that doesn’t look nice but mainly contains shortcodes and partials for AMP elements, generates structured data and a workflow to inject AMP specialities like having css directly in the head section.

Feel free to have a look at the repository: https://github.com/wildhaber/gohugo-amp - I’m open minded for any hints or improvements. Hope this helps you out in some cases.

Cool @rwi, will have a look!

Just took a good look into AMP. And I am really not interested into turning my content into a stripped down modal that opens directly in Google’s search results without users ever visiting my site, on mobile.

Right now I just closed an AMP modal and the site that I was reading doesn’t even show up in the browser’s history!

I really cannot understand what all the hype is about.

If you do intend to support AMP in Hugo then please offer it as a non mandatory option so that those of us who don’t want to use it (like me) can ignore it. Thank you.

2 Likes

@alexandros It’s definitely controversial, but it’s also growing in popularity. I agree with (some of) your sentiments. Mostly, it’s just another route to SEO…

@rdwatters
Nope. It’s not another route to SEO, since there is no traffic to the actual mobile website -not even an entry in the browser’s history-.

From my perspective usage of AMP Is contributing to Google’s walled garden. I have noticed that wordpress.com is using AMP. Maybe this way they save on resources by serving the content with Google’s CDN, but that’s not very good for individual bloggers since their articles cannot even be bookmarked.

1 Like

Right, and I agree with you that it’s not the most ethical play on Google’s part.

But still, it is a matter of SEO…since these results are at the top of SERPS…hence search-engine optimized. Ideally, a search result brings the user to the actual site (again, I’m not arguing with you on this), but having an AMP ready page improves discoverability, brand awareness, clout, etc. Accessed content is still measurable through AMP analytics. Plus, you have the convenience of half-second pageloads. It is not a formal ranking factor yet, but it can affect clicks, impressions, UX, etc…which are all tethered to SEO to different degrees. It is indeed walled garden-ish, in a way, but it’s also entirely open source. An AMP page CAN include links to your site, remember.

I’d rather people go to my site, but my point is that it’s not ALL bad…

1 Like

@alexandros, although I agree with your sentiment, google any type of guide on your phone and you’ll see that the top ten results are quickly filling up with AMPs. As I see it, it’s not something the Hugo community can ignore (especially not if Hugo wants to gain commercial usage). Also, it is possible to add Google Analytics. But I absolutely agree with you, it should be optional.

My thinking is it could be activated the same way as the RSS-referral, i.e. through code in <head>

1 Like

I understand all of your points, but -at least for me- there is really no point being at the top of SERPS, or having half-second loads, if the juice does not flow to my website.

1 Like