Nowadays I have seen that everyone is talking about AMP, But what actually AMP is? there are many websites on the internet which would explain to you what amp is? and how AMP serves the purpose or if implementation od AMP is worth the craze?
Most of all the official website of AMP documentation will explain it the best because they are the developers and they know what they are talking off!
Many websites give generic information. But other than the documentary official website, no one gives specific information on how It actually works? Or how to develop it without any plugins.
I really don’t like using third-party plugins, because I really don’t trust every one of them!
I believe in the custom core codes on which I have full control.
The official website is well documented but there is something missing that the official website doesn’t give information on!
The official website show AMP over the static websites. But we don’t get information on how I can implement AMP on my dynamic websites built on PHP.
I have got a website on PHP and I really didn’t knew, how to implement AMP in PHP.
And I had to go through something really new to me. So, I had to learn and experiment on my own. and I came to know something new about it.
So, I am gonna share it with you so that you don’t have to be waste your time researching it.
If you are starting off with an altogether new website. and don’t want to develop two different pages then this article is for you!
You can serve the AMP page as your main page, and don’t have to make two different pages (one as the main page another the AMP page).
But if you already have an existing website and want to add AMP to it, then you have to check Convert to Dynamic AMP page.
Over there we talk about adding AMP pages to an existing website
Follow the step-by-step process to make a dynamic amp page in PHP:
1 Include <html 
> tag
Start by including the above tag. This tag is really important to make the browser understand that the current page that it is trying to open is an AMP page. This tag can also be substituted with <html amp>
<html >2 Include the <meta charset = “utf-8”>
It helps the browser identify the character encoding of the webpage. This should be added just at the starting of the <head> section of your codes.
<meta charset = "utf-8">3 Includes the AMP JS library.
Include the following code:
<script async src="https://cdn.ampproject.org/v0.js"></script>Include the above code within your <head> section of the page. This code loads the all the AMP functionalities over you page!
4 Include the canonical tag for the page
Include a canonical tag for the page.
The canonical tag actually helps to prevent duplication of content with reference to the URL.
For example,
If your URL to your original content is supposed to be www.doodleish.com, but you have some parameters along with that.
For example www.doodleish.com?post=123
So in that case, for every different parameter, google will recognize them to be different pages, but the content will be the same. so it will fall under plagiarised content.
So it is better to add a canonical tag that actually tells Google or any search engine to recognize the original source of content. And by adding the canonical tag, your content will not fall under the category of duplicate content.
And that is why we add a canonical tag for our amp page because we are gonna have the same content for our original page as well as amp page, so it is better to add a canonical page tag in the amp page with reference to the original page
<link rel="canonical" href="https://doodleish.com/">5. Define the meta viewport
We need to add the viewport meta tag to make the document responsive to the browser.
Remember this is an important tag and you should not miss it!
If you miss this, first of all, your AMP validation will fail, and second of all your page won’t be responsive.
Add the following code and make the AMP document responsive to the viewport
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">6. Include the CSS boilerplate for AMP
AMP CSS boilerplate is the masterpiece of AMP. This CSS code actually makes the lazy loading happen in AMP.
Include the following code within the head section.
<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>
7. You cannot include images in AMP with normal <img> tag
This is not normal HTML, so normal HTML <img> tag won’t work in AMP.
Amp has got a special set of image tag for itself.
<amp-img src="https://doodleish.com/image.jpg" alt="Doodleish" height="500" width="300"></amp-img>
To make the above image responsive, please add a layout tag as responsive.
<amp-img src="https://doodleish.com/image.jpg" alt="Doodleish" height="500" width="300" layout=”responsive” ></amp-img>
Point to be noted, adding the height and width of the AMP-IMG is really important.
Do not miss it or else Amp will not be validated!
8. Style you AMP page with CSS
Style your amp page with CSS,
Include the following tag under the head section
<style amp-custom>
/* any custom style goes here */
</style>
Points to remember, like normal HTML, AMP doesn’t support importing third party CSS.
This also means that you can not include or import CSS on the amp page.
An AMP page only works with in-page Custom CSS.
That is included within the AMP style as shown above.
Points to remember, You can have only one <style amp-custom> tag on an AMP page.
And the CSS should be minified and should not have size more than a KB.
For PHP you can play smart over here, you can include an external CSS file by using
<?php
echo file_get_contents("doodleish.css");
?>
So, we can use it like
<style amp-custom>
<?php
echo file_get_contents("doodleish.css");
?>
</style>
In this case, the browser or the search engine would recognize this as native in-page CSS.
As the CSS is getting imported by the PHP before the page load, and not during the page load. Normal importing loads the CSS during the page load.
So in that case, if you import an external file in the normal way, AMP would not be validated. But if you Import the external CSS with PHP your AMP validation would be successful.
9. Link your main original content page to the AMP page.
Add the following tag in the original content page
<link rel="amphtml" href="https://www.doodleish.com/amp.html">
To make the browser or search engine recognize the amp page linked to the original page.
Link in the above tag is the link to your amp page.
<link rel="canonical" href="https://www.doodleish.com">
As I told you already, you have to specify the canonical tag in the amp page, so that whenever your amp page gets crawled by google, google doesn’t treat it as a duplicate content against you original content page.
Now if you have only one page, which means the main page you have is an AMP page then you have to just include a canonical tag on the AMP page.
<link rel="canonical" href="https://www.doodleish.com">
10. Check for the AMP validation
Run an AMP validation test and check if the validation is successful or the validation fails.
Add the following to the URL
#development=1
And reload the AMP page.
The URL should be something like :
https:doodleish.com/amp.html#development=1
Open the console log and look for errors, if you see any errors, fix them.
Until and unless you fix the error, your AMP validation would not be successful, and until your amp validation is successful, your AMP page won’t get crawled by google.
Now finally your Template should look like this
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Doodleish</title>
<link rel="canonical" href="https://www.doodleish.com">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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("doodleish.css"); ?>
</style>
</head>
<body>
<h1>Doodleish</h1>
<?php echo $put_the_dynamic_content_with_php; ?>
</body>
</html>Point to be noted: AMP doesn’t support javascript, it only supports JSON type javascript, to converting an established PHP page isn’t really a good idea to do. If you have an already established page do not spoil it by including AMP.
It is better to go and create a new AMP page
Related Reads:
Step-by-step | Convert Dynamic Google Amp Page in PHP
Is Google AMP worth it? | A helpful guide | Developer perception