Google AMP Pages: Why They’re Important for SEO & How to Get Started
Since Google started considering speed as a SERP ranking factor, the web got faster. And it makes sense for speed to be a part of SEO. Google’s algorithm prioritizes websites that offer valuable information and a competitive UX. And page speed is crucial to delivering a good experience. Especially on mobile devices.
Google reaffirmed its vision for a faster internet in 2015, with the launch of Accelerated Mobile Pages (AMP).
AMP pages recently made the news, after Google was accused of manipulating the loading speed of non-AMP ads, to make AMP look better in comparison. Most of the information around this accusation isn’t publicly available, so there’s little to judge by ourselves. But it’s a good opportunity to review the general benefits and downsides of AMP pages, and how you can use them to boost your site’s SEO.
Let’s get started.
What Are AMP Pages?
An AMP page is a mobile-exclusive version of a website, optimized for mobile speed. According to Google’s Paul Bakaus:
“An AMP Page is just a normal HTML with a couple of restrictions and extras.”
These pages are stripped of non-essential design elements, animations, and CSS-heavy components. While AMPs usually display websites’ logos, fonts, and brand colors, overall, they share a very characteristic “neutral” look:
Accelerated Mobile Pages were originally designed for media sites. But soon, their usage extended to most types of websites.
There are several pros and cons to implementing AMP pages. Some general disadvantages will depend on your degree of coding expertise or the stack your website’s using. To keep this post as useful to as many people as possible, I’ll center on general pros & cons that almost all AMP sites share.
The UX & SEO Pros of AMP Pages
Implementing AMP pages generally comes with three benefits:
- Competitive site speed
- Higher click-through-rates (CTRs)
- Better discoverability
Competitive Site Speed
The main value behind AMP pages is that they’re blazing fast. AMP makes things faster by doing two things:
- Making your website simpler
- Caching and pre-rendering your content
When you set up AMP, you reduce the number of assets your pages have to load on mobile. And through AMP, Google also caches & pre-renders the content as soon as it appears on your users’ search results. Basically, your accelerated content is there, ready to be enjoyed, even before the user has chosen it.
In most cases, AMP results are shown through the Google AMP viewer. This means that the URL of your content will be Google’s, while the original URL will appear on a banner, below it.
Higher CTRs
AMPs have been associated with higher click-through rates on mobile.
Last year, Search Engine Journal conducted a study on the CTRs of rich results. Among other interesting findings, it concluded that:
“Non-rich AMP results generate the greatest amount of clicks per 100 searches, with a CTR of 92%”.
Additionally, on mobile search results, your AMP pages appear with a bolt badge. For users that know what they’re looking for, this badge is a competitive advantage.
Better Discoverability
While the general public is unaware of the internal workings of Google’s algorithm, some things we do know. For example, that Google prefers fast websites. AMP is a surefire way to get competitive mobile performance, which translates into a privileged position in the SERPs.
Aside from the bolt badge, AMP pages are prioritized on mobile search results. And, in the case of media articles, they’re shown on a special banner, above regular search results.
The Cons of AMP Pages
While AMP pages come with clear benefits, they have some downsides.
An Unbranded User Experience
Or rather, a Google-branded user experience. With a limited amount of CSS & JS on your mobile accelerated page, you can only express your brand’s visual identity through your logo, your fonts, and some accent colors.
These limitations can make your website’s UX a little less competitive. That’s why some recommend that you only use AMP on informative pages. For instance, blog posts or important guides.
Limited Lead Capture Tools
Another reason not to implement AMP is that it forces you to hide the CSS and JS you need for lead capture forms and user behavior tracking.
Mobile users tend to convert less than desktop users. Hiding your high-performing and extensively tested lead capture tools could make things worse.
Two Separate Websites
Your AMP pages shouldn’t replace your website’s regular pages. As a consequence, you’ll have to maintain both your AMP site and your regular pages. So, two sites in one.
How to Implement AMP Pages
AMP is best for:
- Blog articles
- Media articles
- Information sources & long reads
How to Set Up AMP Pages on WordPress
On WordPress, the easiest way to add new functionalities tends to be installing a plugin. While too many plugins will make your site slow (and potentially unsafe), an AMP plugin is worth installing.
For example, you can use the AMP project’s official plugin. Making heavy, site-wide changes to your site can come with undesirable SEO side effects. If you’re using WordPress, you can keep your code SEO-optimized through plugins. I recommend RankMath for general SEO and SEORadar for automated code audits.
How to AMP-Optimize a Static Website
Implementing AMP pages on WP is as easy as installing and setting up a plugin. But, in the case of static websites, it’s even simpler — as long as you’re a developer.
The project’s official page provides a handy guide to implementing AMP on static sites. It also includes some rules that will help you validate your HTML code.
Making your static site AMP-friendly is as simple as copying and adapting your code. You’ll have to minimize your existing CSS and replace existing tags with AMP-supported alternatives. The process will also involve importing the AMP boilerplate code and JS, which is as simple as including them in your <head> tag.
How to Create AMP Pages on the JAMStack
Implementing AMP pages on the JAMStack requires considerable technical knowledge. You’ll probably want to forward this to your development team.
If you’re running a JAMStack website (Javascript + APIs + Markdown), the ideal approach will depend on the framework you’re using. For example, Next.JS supports AMP out of the box. On Next.JS, when you set a page’s configuration to “amp=true”, the framework automatically imports AMP components. These components will guarantee that even the most minimal version of your site has certain important functionalities. But if you’re using Nuxt, you’ll have to import AMP as a Node/Yarn package and then create a series of AMP-friendly components.
Check your framework’s documentation for more specific information.
Bento AMP
Let’s say you’ve tried AMP, and found it extremely convenient. But still, you don’t want the stripped-down UI that AMP forces you to adopt. Then, Bento AMP may be the solution. Bento AMP allows you to implement AMP components on non-optimized pages. Basically, it offers low-weight alternatives to common UI elements, such as accordions. Even if you’re skeptical regarding AMP pages, it’s worth checking out.
Key Takeaways
AMP pages make your website’s mobile experience faster, more competitive, and more discoverable. But still, they come with some disadvantages. It’s up to you and your team to decide whether the pros outweigh the cons.
If you choose to go for AMP, take it one step at a time, to prevent site-breaking errors — even if you’re on WordPress.
How about you? Are you using AMP pages on your website? Have you implemented AMP with a client? Let me know in the comments below.
