Ok, I understand that an AMP page is a really hot topic these days. And if you want to rank on google it would be really difficult for you to do so without and amp page. You better be prepared with an Amp page for yourself, for your website to get a good ranking on Google, as AMP really boost-up the loading speed of a page.
If you are making a new webpage it’s better to go for a Google Amp Page.
If you are starting off with a new website and want to implement AMP into it. Then I would suggest you create an AMP page in PHP.
I was already having a website and it was really next to impossible for me to start off with new and go for the amp pages so all I could possibly do is to convert my existing HTML pages into AMP pages. Moreover, my pages weren’t normal static HTML pages they dynamic PHP pages developed in Codeigniter.
So I started searching for some answer to this for the question like “how to convert my HTML pages to normal AMP pages?”. But there were no good results for this so I personally came up with an idea to go for it by myself and then I learned how to actually convert a normal dynamic PHP page to dynamic an AMP page.
What should you keep in mind while converting HTML into an AMP Page?
Before starting off with the steps, I would like to make you note down some of the list factors that you should keep in your mind while going for the conversion of the HTML into an AMP page.
- You cannot import external custom CSS to your AMP PAGES.
- You cannot import external custom JS to your AMPpages
- Neither can you include custom JS on the page itself cause AMP only accepts the JSON format of JavaScript.
which means that you cannot use the custom style and the custom JS that has been used as an external file.
You can only use the In-page style and js for the AMP page.
NOTE: you cannot use the normal importation of files in AMP pages like you normally import in HTML.
A better recommendation would be to go for a different set of design Page for AMP. So that whenever someone visits you through mobile, you can redirect them to the AMP page, and whenever someone visits you through Desktop, you can send them to the original HTML page.
Hence, there would be two pages for two different purposes linked to each other.
But Before Starting off I want to share my perception about Is Google AMP worth it? | A Helpful guide | Developer perception
What are the steps to convert Dynamic PHP page to a dynamic AMP page on an existing website?
The following steps will help you convert the Dynamic PHP page to a dynamic amp page on an existing website:
1. First of all, you need to include the Amp library in the head section of your page.
<script async src="https://cdn.ampproject.org/v0.js"></script>2. Then before the start of the head section replace the normal <html> tag with
<html 
="">3. Set the meta charset as utf8
Therefore add the following code as the first line of the <head> tag
<meta charset="utf-8" />4. Add canonical link just below the meta character set that you have just recently added
<link rel="canonical" href="*page_name">
*page name is the link of the page itself as you are converting the page itself into an AMP page. The canonical tag is used to recognize the main page.
Basically the canonical tag is specified to avoid google from considering two different URLs having the same content.
For understanding, canonicalization check out Post by Moz.com on Canonicalization.
**if you would have made two different pages you would have to specify the Amp Page link in the canonical tag of the HTML page and the HTML page link in the canonical tag of the AMP page. so that both of them could refer to each based on the device they have been visited with.
5. Specify the attribute language type for AMP
<html lang="en">
please mention the language in the same HTML tag that you changed earlier to specify the AMP document type.
6. Another mandatory tag is the meta viewport you would have to specify a meta viewport just below the head tag of the document.
Specify the content with the minimum scale and initial scale in the viewport tag
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">7. Already told you that the external style sheets don’t work in Amp so you will have to mention in-page style for AMP.
Replace the external style sheets with the in-page style along with the special tag of amp-custom this tag is specified so that the browser gets to identify the style as the Amp custom style or else if you don’t specify this amp-custom tag in style tag then Amp would not be validated and your custom style will not work
Replace this kind:
<link href="base.css" rel="stylesheet" />
With this kind:
<style amp-custom>
/* The content from base.css */
</style>
In case you are using PHP code you can use something of this sort:
<style amp-custom>
<?php echo file_get_contents(css/blog.css);?>
</style>
*file_get_content is PHP function for getting the values of an external file..
I know copying the whole CSS into the code itself is a really bad idea. I came up with a better idea of using PHP tags for calling the external file in that case. The Amp won’t recognize that PHP is calling this from the external file. It would see the CSS tags as natively present in the document.
file_get_content imports the content of the file before the document loads, so the AMP would never be able to know that the Style Content came from an external file.
Using the file_get_content function would really reduce the Chaos and the number of codes in the page itself.
Note 1: AMP requires not only embedded styles but has a restriction as well.
AMP does not accept more than 50 kilobytes of styling information. so it is advisable that you use a CSS preprocessors like SASS or minify your CSS before lining the CSS in the AMP page.
Note 2: you can only have one style tag in the entire AMP document if you have several external style sheets reference by your AMP pages you will need to collaborate all of them and put it into a single style tag as per the Amp rules.
OR: you can call the PHP function file_get_content numerous times it gets you several CSS external content in the page itself and Amp won’t even recognize that you are calling to more than one style sheets.
That is a smart way to trick AMP document or AMP validations but you should always keep this in mind that the total styling information should not exceed 50 kilobytes. If it does exceeds the mentioned limits, in that case, AMP would not get validated.
8. Exclude third-party JavaScript functions
as I have already mentioned that the custom JavaScript or external JavaScript files don’t work with the AMP file. In that case, you will have to find whether your third party JavaScript file library exists for AMP document or not!
Remove this kind of javascript tags:
<script type="text/javascript" src="base.js"></script>
AMP provides various libraries, for example, it provides libraries for Google Analytics, Facebook shares, and social media shares. It provides libraries for carousal and all those things. But it doesn’t support any third-party JavaScript libraries.
keep this in mind!
So if you are planning to work with custom JavaScript you should better know how to use the JSON type of JavaScript cause only that kind of custom JavaScript can be used in an AMP page.
9. Include the Amp CSS boilerplate
it is required for validating your AMP document functions.
Amp won’t work until you include this AMP CSS boilerplate on your page.
<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>
just copy and paste it in your code. It should be placed between the head tag and custom style tag that you have made for your AMP page.
10. After the inclusion of the Amp boilerplate its time to replace all the <img> tag with the <amp-img> tags.
AMP has its own sets of image tags which sets a special feature for lazy loading.
<amp-img src="mountains.jpg"></amp-img>
Note: Image set in a container type may not be responsive as the container type is only applicable to the element that contains children element and the container type is incompatible with <amp-img> tag with which may result in an error.
One of the important features of AMP design is that it focuses on reducing the amount of Dom reflow to render the web page, which eventually reduces the time to render a webpage. To reduce a Dom reflow, AMP includes a layout system to ensure that the layout of the page is known as early as possible in the lifecycle of downloading and rendering the page.
11. Now let’s make the images responsive that have been added to the web page, and the way to do it is by adding the layout property in the <amp-img> tag.
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
12. Now let’s check the validation of the code that you have just written.
To check the validation of the empty code we must enter #development=1
just after the exact URL of the page. for example:
https://localhost/article.html#development=1Open the console, all the AMP errors will be logged in the console. Validate them and fix them.
check for any error in validation in your console
13. If all the validations are successfully validated. the template should roughly look like
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="/doodleish.html">
<link rel="shortcut icon" href="doodleish.png">
<title>News Article</title>
<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>
<style amp-custom>
<?php echo file_get_contents(css/doodleish.css);?>
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<header>
News Site
</header>
<article>
<h1>Doodleish page</h1>
<?PHP echo $content; ?>
<amp-img src="doodleish.jpg" layout="responsive" width="266" height="150"></amp-img>
</article>
</body>
</html>
If all the validations are validated successfully, then you would get a message in console stating that AMP validation successful
Final Amp Page may look like…
Conclusion:
And in case if your Google AMP page is not working check out these 6 Easy Steps to solve if Google Amp is not working?
Do you know that I was facing many problems and ultimately chose to remove Google Amp from my website……
To know Check out my Perception and about google amp pages and how it works check out Is Google AMP worth it? | A helpful guide | Developer perception. Check out the benefits and cons of Google Amp. Then You would know why I removed google amp from my website.
Related Reads:
How to implement amp in PHP? Without WordPress
Is Google AMP worth it? | A helpful guide | Developer perception