AMP

Overview

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

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 add 'amp' => true to a route to AMP it.

// config/statamic/routes.php
'routes' => [
    '/flat' => [
        'template' => 'flat',
        'amp' => true,
    ]
]

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.