29th Jun 2017 by Karen Lee

Insight Blog: Creating Accelerated Mobile Pages For Object Orientated PHP

Accelerated Mobile Pages (AMP) are simplified pages aimed for mobile devices. The purpose of AMP are to make the pages load faster, look tidier and are more to the point for mobile device users. AMP only show up in the google search results on mobile devices.

Now we know what AMP are; let’s get into the coding…

As this tutorial focuses on object orientated PHP, we will learn how to create AMP for blog posts.

Firstly, we need to copy the blog content template to a new file (in this instance I’ve named mine amp.php), if you have the separate pages for header and footer called in, you can also include these in your new file

Now, check you have a page that has all the html required tag;

<html> 
    <head> 
    </head> 
    <body> 
    </body> 
</html>

Now you’ll need to add a function for your AMP, to populate the new template page in your blogs class (this function will be similar to the function to populate your original blog template). After creating the function for the new page, it should look the same as the blog page. Below is an example of how the URLs may look:
- Original blog URL: www.example.com/blog/profile/1
- New amp URL: www.example.com/blog/amp/1
Now we have the new page working, we can remove some elements to simplify the page. For this part, I have removed the entire footer, the menu from the header and centred the logo

Now that we have the page how we want it to look like, we can start making the page an actual AMP - at the moment it is just a simplified html page on a new URL.

Convert
```
<html> 
```
to
```
<html amp> 
```
,
```
<head> 
```
needs to include:

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> 
// this URL needs to be the original blog page, if you only have AMP, this can be the current URL. 
<link rel="canonical" href=" www.example.com/blog/profile/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> 
<script async src="https://cdn.ampproject.org/v0.js"></script> 
// inline CSS (and remove external CSS link) 
<style amp-custom></style>

Validate schema markup (https://developers.google.com/search/docs/data-typ...). You can use this URL to check if the schema is working: https://search.google.com/structured-data/testing-....
Convert
```
<img>
```
to
```
<amp-img>
```
, add
```
</amp-img>
```
to end image tag, and include width and height attributes.

Convert

<iframe>

to

<amp-iframe>

, and include width, height and sandbox attributes. If your pages include iFrames you also need to add

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

to

<head>

.

Now these pages should be classified as AMP, to check and validate your pages go to: https://search.google.com/search-console/amp.

This is the result of a valid AMP on Google’s validator.

Using Google’s validator, you can also submit your pages to Google and preview how they will look in the search results.

If there are any errors, this link has a more detailed explanation of the errors and the location of the errors.

This is what an invalid AMP looks like (AMP project’s validator and using original blog html)

Lastly, we need to add the new AMP link to the

<head>

of the original blog post page. For example;

<link rel="amphtml" href="http://www.example.com/blog-post/amp/1">

, this can be a dynamic URL, for example;

<link rel="amphtml" href="http://www.example.com/blog-post/amp/<?php echo $blog->id; ?>">

Karen Lee, Web Developer

Hi, I’m a Web Developer here at 10 Yetis digital. I work on all things web, including custom built sites, fun micro-sites and eCommerce sites for our clients. I've worked with Confused.com, Hillarys Blinds, Lee Kum Kee and Superdry. When not coding I can still be found sitting in a dark room staring at a screen (the cinema).

karenwingyee winggfashion

Get the Know How

Get the latest thought leading industry comment and information from our “no sales” newsletter.

Insight Blog: Creating Accelerated Mobile Pages For Object Orientated PHP

Karen Lee, Web Developer

Get the Know How

Want to work with us?

GET THE KNOW HOW