Accelerated Mobile Pages - second attempt

PHP
1

The first attempt was a disaster and produced over 565 AMP pages with errors!!!

Most common problem was using an embedded img style (which satisfied Google Mobile Friendly Pages) :

<img style"max-width:888px; width:88%; margin:auto">

Also there were other problems in the common header, menu, content and footer files.

Fortunately it was quite easy to revert to the original setup which consisted of the PHP Framework including a header, imported database data for the content and a footer.

Further thought about separation of concerns produced the following:


Web-Page for testing:

  1. index-001.php

Include files:

  1. _heading-amp.php
  2. _header-amp-static.php
  3. _menu-top.php
  4. _content-to-test.php

To install and start testing your “Accelerated Mobile Pages:”

  1. copy and paste the contents of “index-001.php”
  2. copy and paste the contents of “_heading-amp.php”
  3. copy and paste the contents of “_header-amp-static.php”
  4. create your own “_menu-top.php”
  5. create your own “_content-to-test.php”
  6. create your own “_footer.php”
  7. save all files into a new directory
  8. browse to “index-001.php”
  9. validate with Chrome Browser CTRL-SHFT-i

Online Demo - Can also test AMP validation using Chrome Browser ONLY

There is a vast amount of information about Google’s AMP, far too much in fact :frowning:

This simple demo is a start and ideal for PHP Frameworks and possibly some CMSs.

Source file: index-001.php

<?php // index-amp-test-page.php

  declare(strict_types=1); // PHP 7 ONLY
  error_reporting(-1);
  ini_set('display_errors', 'true');
  // function fred($val) {echo '<pre>', print_r($val, true), '</pre>';}

  $title      = 'My Second attempt at installing Google\'s Accelerated Mobile Pages'; 
  $title      = isset($title)     ? $title : '!!! YES we have NO TITLE !!!';
  $sp         = '#'; 
  $canonical  = isset($canonical) ?: '/' .$_SERVER['REQUEST_URI'];
 
?><!DOCTYPE HTML>
<html amp lang="en">
<head>
<?php 
    // My ORIGINAL Header copied and renamed 
    // so I could easily rollback changes
    if(1) {include '_header-amp.php';}

    // new stuff from Google's head
    if(1) {include '_header-amp-static.php';}
?>
</head>
<body>

  <div class='hdg'>
    <?php require '_menu-top.php';?>
  </div>
  <h3 class="cgr"> Chrome Validation: <i class="cgg">CTRL-SHFT-i</i> </h3>

  <div class="w88 mga bdd p42 bgs">
    <?php if(1) { echo nl2br( file_get_contents('_content-to-test.php') );} ?>
  </div>    
  

  <div class="w88 mga bdd bgs">
    Source file: &nbsp; <b> index-001.php </b>
    <hr>
    <?php if(1) {highlight_file(__FILE__);} ?>
  </div>  

  <div class="w88 mga bdd bgs">
    Source file: &nbsp;  <b> _header-amp.php </b>
    <hr>
    <?php if(1) {highlight_file('_header-amp.php');} ?>
  </div>  

  <div class="w88 mga bdd bgs">
    Source file: &nbsp; <b> _header-amp-static.php </b>
    <hr>
    <?php if(1) {highlight_file('_header-amp-static.php');} ?>
    <?php if(0) {include '_footer.php';} ?>
  </div>  

</body>
</html>

Source file: **_header-amp.php** ``` <?php // _header-amp.php

declare(strict_types=1); // PHP 7 ONLY

?>

<?=$title;?> /* body {background-color: lime;} */ ```

Source file: **_header-amp-static.php** ``` <?php // _header-amp-static.php

declare(strict_types=1); // PHP 7 ONLY

?>

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}} body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none} 
<br>
**Edit:**
I forgot to mention that using the following validation tools fails because of ***amp*** tags :frowning:

 [W3.org HTML Validator](https://validator.w3.org/)

[W3.org CSS Validator](https://jigsaw.w3.org/css-validator/)

It is essential to validate using the Chrome Browser?

<br>
2

Having done it, how do you feel, John?

Was it worth the trouble?

1 Like
3

It is not the completed task but the journey :smile:

Yes delighted that I managed to convert most of my pages, I learnt a lot but there is still hundreds of pages to do. Isolated images must be done individually, thumbs to align because styling is now forbidden, videos to do, the list goes on and on…

I am hoping to increase my Google SEO Brownie Points but as you well know it does not happen overnight in fact it takes months because everyone is at it :frowning:

The simple text page loading time has now increased due to a lot of additional JavaScript and JSON files in the <head section. I think it is best even if the page load time has slightly increased, not to revert back to the previous version because AMP will be recognised and give an additional benefit,

I have only just managed to render the page without errors and it was no simple task. I think there is a vast amount of optimisation still to do and subtle changes could make a big difference.

3 Likes
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.