Building AMP Templates

Developers perform this task.

The following steps are required to build and deploy AMP: create an AMP-compliant template, and provide a link from the native template to the AMP template.

After implementing these steps, the Brightspot server intercepts requests for native templates that have a corresponding AMP-compliant template, and delivers the latter to the visitor.

Step 1: Create AMP-Compliant Template

After completing the standard (non-AMP) template, create a parallel AMP-compliant template in the same directory. The filename must end with the compound extension .amp.hbs. For examples and tools for developing AMP-compliant templates, see the following resources:

Step 2: Add Discovery Link to AMP Template

In the native template’s <head> tag, add a <link> tag to the AMP template.

Discovery Link to AMP Template
1
2
3
4
5
6
7
8
<!-- Filename: MyTemplate.hbs -->
<!DOCTYPE html>
<html>
    <head>
        <link rel="amphtml" href="http://domain.com/path/page?_amp=true">
    </head>
    <body> </body>
 </html>

In the previous snippet—

  • Line 1 indicates that the template’s filename is MyTemplate.hbs. The associated AMP template’s filename is therefore MyTemplate.amp.hbs.
  • Line 5 adds a <link> tag. This tag informs AMP providers that the native version of the template also has an AMP-compliant version. (For details about this form of the <link> tag, see Make your page discoverable.)