Create AMP pages and validating
The AMP is introduced by Google which stands for Accelerated Mobile Pages. These pages are mobile friendly replica of the webpages and loaded up to 4 times faster than their standard webpage counterpart. This is because these pages are written in specific AMP-html and served from Google Cache server. In this topic, we will cover the process to create AMP pages and validating on AMP validator.
This will also include the restrictions in writing AMP html so that the pages are validated and AMP works correctly. If the AMP page has any issue like invalid attribute, then Google Console will show errors and stop serving AMP pages in mobile search results.
The AMP pages are cached at Google Server using indexing process. When any user search for related content on mobile devices, the AMP page is displayed in search results. This page is loaded very fast because being served from Google Server.
To create AMP pages, some steps are mandatory so that Google understands that the page is used as AMP and parses accordingly. The steps are following:
AMP URL Link in Standard Page
The AMP pages will be on a different URL than standard webpage. We need to mention this AMP URL in standard webpage <head> tag with “amphtml” meta tag value.
<link rel="amphtml" href="URL of standard page" />
Mention AMP in html
First of all, we need to mention “amp” as an attribute in main <html> tag like this:
<html amp>
This will indicate that the html written in this page is in AMP format.
Canonical Linking With Standard Page
Since the AMP page is a replica of the standard webpage, we would not want both pages to appear in search results. So we will add canonical link of Standard page in meta tag of AMP html head.
<link rel="canonical" href="URL_of_standard_page">
The amp-custom attribute
The AMP Html does not allow any external URL for Stylesheets or javascript. The javascript is completely prohibited (except <amp-script>) while we can write the css only as Inline or Internal stylesheet. The Internal stylesheet is written inside the style tag with “amp-custom” attribute like this:
<style amp-custom> </style>
AMP script
We need to include amp script so that the AMP-specific html is parsed in AMP format. This script is included in <head> of AMP html like this:
<script async src="https://cdn.ampproject.org/v0.js"></script>
AMP boilerplate CSS
The AMP boilerplate CSS is required for Google server to internally parse DOM and CSSOM correctly. Basically this is CSS code to hide content until page is fully rendered and then fade in to perceive a higher performance metrix.
<style amp-boilerplate>
body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
</noscript>
Using AMP specific tags
The main difference between regular html and AMP html is that the AMP html uses special tags specified by Google. These tags are supported with AMP scripts so we need to use appropriate tags for each element. For example, the <img> tag is used as <amp-img>. There are also some special AMP tags which render an element without using any javascript (e.g. <amp-carousel>).
For list of html tags which are changed in AMP html version, please follow this link : https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/#html-tags
Restrictions in AMP html:
As we already discussed, the AMP html is very specific and will disable if any issue occurs. So it is very important to write correct AMP html. Please check below list for most important and common issues made in AMP html:
- Avoid any external or internal javascript.
- Avoid using external CSS URL. We must write all styles as Internal CSS with amp-custom attribute.
- Every AMP html must start with “<!doctype html>”
- Every AMP page must have a defined meta “charset” and “viewport”. E.g.
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width">
- The <head> and <body> tags are mandatory in AMP-html.
- AMP script and boilerplate css must be included.
Validation of AMP html
Just like we use PageSpeed Insights to validate and check regular html webpages, Google has provided a separate validator for validating AMP html. Please follow this URL : https://validator.ampproject.org/
In AMP validator, you can provide your AMP page URL. You can also copy-paste AMP html content if the AMP page URL is not available. This validator will check for issues and all points (required and optional) in the given AMP url/html.
That’s all about create AMP pages and validating the content. If any issue or doubt in the above process, please feel free to let us know in the comment section.
I would be happy to help.
Also, you can explore our PrestaShop Development Services and a large range of quality PrestaShop Modules.
For any doubt contact us at support@webkul.com.