AMP: Accelerated Mobile Pages /
How to Add More AMP Pages
How to Add More AMP Pages
Every page in your store can have an AMP counterpart. Good candidates are the About Us page, Privacy Policy, and other static pages.
The "About Us" (ABUS) page is a great place to start.
Step 1. Open the "About Us" (ABUS) page in the admin.
Step 2. Click on the ITEMS tab and activate the AMP item.
Step 3. Click on the new AMP tab and add your AMP content (see Basic Page Configuration below.)
Step 4. Add the following code to the top of page to AMP it up. This line creates the AMP page display. Make sure it is the first line on the page:
<mvt:item name="amp" />
Put this page item inside the <head>....</head> area of your page. This line makes your AMP page discoverable by search engines and other AMP crawlers:
<mvt:item name="amp" param="discover" />
Basic Page Configuration
Is this the homepage? - this is an option to tell AMP crawlers that this is the homepage of your website, normally SFNT. Only use it for your homepage because you're only allowed one and there could be SEO repercussions if it's used for more than one page.
Page Content
The information in the module is most relevant here, however if you keep in mind the following guidelines your AMP pages will have a good chance of validating.
The most important rules are:
- use amp-img tags for all images
- all images and links must use https
- inline CSS will not validate
- all javascript must be loaded in the <head></head>
See the AMP project reference docs for more information.
Simple Setup
The easiest way to create an AMP counterpart to a "basic" page in your store is to add a secure link to an image for the page, enter the category code for the bottom slider (new products, best sellers, something along those lines), and then use the following code to display basic pre-existing page content.
Page Header: this page entity will display content from the built in page header. If you do not want to use the existing header content, you can create it here.
&mvt:amp:page:header;
Main Page Content:
If the existing page content is "legal" AMP HTML, then you can load it up using the &mvt:amp:page:content; entity here. If the existing page content does not validate, you can create basis page content here.
<p>
Some basic page content. A good place for whatever text is normally displayed on the page.
</p>
Page Footer: this page entity will display content from the built in page footer. If you do not want to use the existing footer content, you can create it here.
&mvt:amp:page:footer;
Important: be careful pulling in content that contains illegal AMP HTML/CSS/JS. Be sure to validate your page before finishing up.
updated November 10, 2016
