AMP in Ghost

Recently I switched this blog from Wordpress to Ghost.

I'm self hosting Ghost via Digital Ocean and everything seems to be working so far. 🙏 And seems this switch had positive SEO effects.

However, there seem to be issues with AMP.

AMP stands for Amplified Mobile Pages - a Google technology, where your pages are served from Google server on mobile. And therefore are super fast.

AMP traffic can take 50%+ of all traffic.

How to install AMP in Ghost?

With Wordpress, I used one of many AMP plugins, which did the job.

Thankfully in Ghost - it is even easier to install AMP.

Go to Integrations -> AMP

Then you just need to check Enable AMP and click Save in the top right.

That's it. Now you enabled AMP in Ghost. 🎉

How to track Ghost AMP in Google Analytics?

On the same page, you need to enter your Google Analytics Tracking ID. Then you will be able to see AMP traffic in Google Analytics.

AMP issues in Ghost

I got email messages from Search Console, that my Ghost AMP pages have errors.

Then I checked in Search Console itself and yep - Ghost AMP pages are not valid.

Here are two types of issues with Ghost AMP pages in Search Console.

The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'

FYI: you can check AMP pages here https://search.google.com/test/amp - after your created Search Console account and verified your website there.

The main issue is The mandatory attribute 'amp-custom' is missing in tag 'style amp-custom'.

Line 79:0 <style>:root {--ghost-accent-color: #15171A;}</style>

I reached out to support in Ghost forum.

Thankfully the solution is simple - you just need to upgrade Ghost. This bug was fixed in 4.1.0 version of Ghost.

AMP HTML Tag has an invalid layout specified by its attributes

This issue is still not fixed.

Basically, if you embed iframe in Ghost - Giphy, SoundCloud and so on - AMP will have this error.

Solution: as for now, don't embed iframes in Ghost posts, where you want to have valid AMPs.