AMP Up Your Site! ⚡️

on February 26th, 2019

AMP stands for Accelerated Mobile Pages, a Google-backed project designed as an "open standard" for any publisher to have pages load quickly on mobile devices. While it's value is hotly debated, there's no question that enough sites use it that we decided it would be important to support.

In a nutshell, an AMP page is a version of your content with stripped down markup, styling, and no JavaScript of your own. It's usually an entirely separate URL that Google will use to display in search results. When you click on an AMP-ed result in Google, it'll look like you're still on Google. But you're not. But you are. Sorta.

Statamic 3 will ship with the ability to let you create an AMP version of your entire (or select sections of) site.

By enabling AMP, the AMP version of any given url will be prefixed with /amp/. For example, /blog/mmm-bacon is a regular URL and /amp/blog/mmm-bacon is your AMP URL. If that URL normally loads the template, the AMP version will render with the template instead.

Essentially, you'll be able to create an entirely separate set of templates that mimick your standard ones, following the same template directory structure.

|-- amp/
|   |-- blog/
|   |   |-- index.antlers.html
|   |   `-- post.antlers.html
|   |-- home.antlers.html
|   `-- layout.antlers.html
|-- blog/
|   |-- index.antlers.html
|   `-- post.antlers.html
|-- home.antlers.html
`-- layout.antlers.html

Live Preview will even let you see your AMP versions right from the Control Panel.

You can enable AMP on a collection level, or even just for specific routes and URLs. You don't have to AMP your whole site. You're in control. ⚡️

Jason Varga
Jason Varga, Lead Deveoper @ Statamic
Lead Developer

Copyright 2020 Statamic