Canonical AMP pages

Canonical AMP pages are standalone AMP pages. That is, they serve as both the desktop and the mobile web page. AMP has good media query support, as well as strong responsive layout features, and so AMP isn't mobile-only, rather it's mobile first: It is optimized for mobile, but can be expanded to other device types too. The canonical approach is being promoted by the AMP team, and reflects how much AMP has changed and grown beyond it's original purpose.

To support this, the AMP project runs a dedicated site, AMP Start (ampstart.com), that publishes a set of free-to-use-and-modify canonical AMP page templates, along with pre-built, reusable AMP UI components. These components include styled buttons, input types, annotated hero images, carousels, navigation elements, footers, and many other useful UI components:

It's a good place to start if you're looking for prebuilt, ready-to-use templates and components that you can get up and running quickly. Of course, you're reading this book because you want to learn how to build AMP pages yourself, so we won't go into any more detail about AMP Start here.

With canonical AMP pages, you still need to provide a canonical link in the document head, but it will point to itself:

<link rel="canonical" href="https://theampbook.com/canonicalpage.html" />

Note that when building canonical web pages that are intended to be viewed on desktops as well as mobile devices, responsive design techniques become very useful in ensuring that the page scales well on larger screens. We'll see some of these techniques in action in the next few sections of this chapter.