AMP

AMP (Accelerated Mobile Pages) is a web component framework by Google to serve fast, content-optimized versions of your websites. It's kinda dead now though.

Overview

Statamic supports AMP by providing a "pivot" route which serves an alternate set of views and layouts conforming to AMP requirements.

Best Practice

Google gave AMP pages a preferential rank in their search algorithm for a few years, but that stopped in June 2021. So, even though Statamic supports AMP, you probably shouldn't be using it anymore. Make your site as quick as you can and you'll do just fine (honestly, much better) without it.

Turn it On

Enable AMP globally as an option in config/statamic/amp.php. Any entry with a URL will then have its AMP version available at /amp/{url}.

'enabled' => true,

Collections

Once enabled, you will have the ability to enable AMP on your individual collections.

#content/collections/blog.yaml
amp: true

Routes

You can use the Route::amp() method to create the AMP version of a regular Statamic route.

Route::amp('blog/{slug}', 'blog.index');

AMP Views

Whenever you visit /amp/{url} it will attempt to load whatever entry would be found at {url}, and swap out the regular view for a magical AMP one ✨.

AMP views follow the same exact file locations as regular views, except in an /amp subdirectory.

resources/views/
amp/
blog/
index.antlers.html
show.antlers.html
blog/
index.antlers.html
show.antlers.html

For example, if an entry loaded a blog/show view by default, its AMP view would be amp/blog/show. You will need to create these alternate views yourself.

Variables

If an entry has an AMP URL, it will a corresponding amp_url variable. You can use this to point to your AMP document from the original.

<link rel="amphtml" href="{{ amp_url }}" />

Similarly, you can use the permalink on the AMP view to link back to the canonical original.

<link rel="canonical" href="{{ permalink }}" />

Live Preview

When enabled, the Live Preview feature has the ability to preview the AMP versions of your entries.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →