Archives

How to convert your HTML pages to AMP using the Lullabot/amp-library

As you probably already know, Google puts more and more SEO value on AMP HTML pages. We’ve made here a little tutorial on how to convert your HTML pages to AMP using the Lullabot/amp-library tools. This is a PHP library and console utility to convert HTML to AMP code.

This tutorial is for Windows operating systems.
AMP Logo
AMP Logo

 

Steps:

1. Install Apache(w/ PHP)

We need a web server with PHP installed. To achieve this, an easy solution is to download and install XAMPP.  XAMPP will install  Apache + MariaDB + PHP + Perl. Download the setup from here https://www.apachefriends.org/index.html . Install it. The default installation path is C:\xampp\ . 

Open the program and start the Apache server (click the Start button). You don’t need to start the other servers(MySQL, Mercury, Tomcat, FileZilla).

XAMPP

To test it open a web browser window and access the url http://localhost/dashboard/ – you should see the default XAMPP page.

2.Install Composer

Composer is a tool for PHP dependency management. It will manage(install/update) libraries that a PHP project requires.  Download Composer from here https://getcomposer.org/download/. Install it.

Composer Setup

Let’s test if Composer is installed. Search Windows for “cmd”. Click the right mouse button and select “Run as administrator”.

cmd Windows Search

At the command line type: composer -V . The result should be something like:

Microsoft Windows [Version 10.0.14393]
(c) 2016 Microsoft Corporation. All rights reserved.

C:\Windows\system32>composer -V
Composer version 1.4.1 2017-03-10 09:29:45

Do not close the Command Prompt window.

3. Download the amp-library

Download the Lullabot/amp-library from here https://github.com/Lullabot/amp-library  Click the Clone or download green button, then select the Download ZIP option.
Extract the archive to c:\xampp\htdocs\amp-library-master\

amp-library github

In the Command Prompt window type cd c:\xampp\htdocs\amp-library-master\ (this will change the working directory to amp-library-master). Now we will install the project’s dependencies. Type composer install. The window should look like:

C:\Windows\system32>cd c:\xampp\htdocs\amp-library-master\
c:\xampp\htdocs\amp-library-master>composer install
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 33 installs, 0 updates, 0 removals
  - Installing masterminds/html5 (2.2.2): Downloading (100%)
  - Installing querypath/querypath (3.0.5): Downloading (100%)
  - Installing marc1706/fast-image-size (v1.1.3): Downloading (100%)
  - Installing sabberworm/php-css-parser (8.1.0): Downloading (100%)
  - Installing guzzlehttp/promises (v1.3.1): Downloading (100%)
  - Installing psr/http-message (1.0.1): Downloading (100%)
  - Installing guzzlehttp/psr7 (1.4.2): Downloading (100%)
  - Installing guzzlehttp/guzzle (6.2.3): Downloading (100%)
  - Installing symfony/yaml (v3.2.7): Downloading (100%)
  - Installing sebastian/version (1.0.6): Downloading (100%)
  - Installing sebastian/global-state (1.1.1): Downloading (100%)
  - Installing sebastian/recursion-context (1.0.5): Downloading (100%)
  - Installing sebastian/exporter (1.2.2): Downloading (100%)
  - Installing sebastian/environment (1.3.8): Downloading (100%)
  - Installing sebastian/diff (1.4.1): Downloading (100%)
  - Installing sebastian/comparator (1.2.4): Downloading (100%)
  - Installing doctrine/instantiator (1.0.5): Downloading (100%)
  - Installing phpunit/php-text-template (1.2.1): Downloading (100%)
  - Installing phpunit/phpunit-mock-objects (2.3.8): Downloading (100%)
  - Installing phpunit/php-timer (1.0.9): Downloading (100%)
  - Installing phpunit/php-file-iterator (1.4.2): Downloading (100%)
  - Installing phpunit/php-token-stream (1.4.11): Downloading (100%)
  - Installing phpunit/php-code-coverage (2.2.4): Downloading (100%)
  - Installing webmozart/assert (1.2.0): Downloading (100%)
  - Installing phpdocumentor/reflection-common (1.0): Downloading (100%)
  - Installing phpdocumentor/type-resolver (0.2.1): Downloading (100%)
  - Installing phpdocumentor/reflection-docblock (3.1.1): Downloading (100%)
  - Installing phpspec/prophecy (v1.7.0): Downloading (100%)
  - Installing phpunit/phpunit (4.8.35): Downloading (100%)
  - Installing psr/log (1.0.2): Downloading (100%)
  - Installing symfony/debug (v3.0.9): Downloading (100%)
  - Installing symfony/polyfill-mbstring (v1.3.0): Downloading (100%)
  - Installing symfony/console (v2.8.19): Downloading (100%)
sebastian/global-state suggests installing ext-uopz (*)
phpunit/phpunit-mock-objects suggests installing ext-soap (*)
phpunit/php-code-coverage suggests installing ext-xdebug (>=2.2.1)
phpunit/phpunit suggests installing phpunit/php-invoker (~1.1)
symfony/console suggests installing symfony/event-dispatcher ()
symfony/console suggests installing symfony/process ()
Writing lock file
Generating autoload files

Do not close the Command Prompt window.

4.Convert an HTML page to AMP HTML

Now everything is configured and we should try to convert a simple HTML page. Our test page (c:\xampp\htdocs\amp-library-master\test.html) is:

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Test document</title>
<link rel=”canonical” href=”https://www.domain.com/test.html” />
</head>

<body>
<p>This is a test file.</p>
<p><img src=”https://wwww.domain.com/logo.jpg” width=”1024″
height=”768″ alt=”domain logo”/></p>
</body>
</html>

The command to run is php amp-console amp:convert test.html --full-document. Use php amp-console amp:convert test.html --full-document --no-lines if you don’t want AMP lines displayed.

 

c:\xampp\htdocs\amp-library-master>php amp-console amp:convert test.html --full-document
Line 1: <!DOCTYPE html>
Line 2: <html amp><head>
<meta charset="utf-8">
<title>Test document</title>
<link rel="canonical" href="https://www.domain.com/test.html">
<noscript>
<style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
</noscript>
<meta name="viewport" content="width=device-width,minimum-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<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>
</head>

<body>
<p>This is a test file.</p>
<p><amp-img src="https://wwww.domain.com/logo.jpg" width="1024" height="768" alt="domain logo" layout="responsive"></amp-img></p>
</body>
</html>
Line 3:


ORIGINAL HTML
---------------
Line  1: <!doctype html>
Line  2: <html>
Line  3: <head>
Line  4: <meta charset="utf-8">
Line  5: <title>Test document</title>
Line  6: <link rel="canonical" href="https://www.domain.com/test.html" />
Line  7: </head>
Line  8:
Line  9: <body>
Line 10: <p>This is a test file.</p>
Line 11: <p><img src="https://wwww.domain.com/logo.jpg" width="1024" height="768" alt="domain logo"/></p>
Line 12: </body>
Line 13: </html>


Transformations made from HTML tags to AMP custom tags
-------------------------------------------------------

<img src="https://wwww.domain.com/logo.jpg" width="1024" height="768" alt="domain logo"> at line 11
 ACTION TAKEN: img tag was converted to the amp-img tag.


AMP-HTML Validation Issues and Fixes
-------------------------------------
FAIL

GLOBAL WARNING
- The mandatory tag 'meta name=viewport' is missing or incorrect.
   [code: MANDATORY_TAG_MISSING  category: MANDATORY_AMP_TAG_MISSING_OR_INCORRECT see: https://www.ampproject.org/docs/reference/spec.html#required-markup]
   ACTION TAKEN: meta name=viewport tag was added to the document.
- The mandatory tag 'amphtml engine v0.js script' is missing or incorrect.
   [code: MANDATORY_TAG_MISSING  category: MANDATORY_AMP_TAG_MISSING_OR_INCORRECT see: https://www.ampproject.org/docs/reference/spec.html#required-markup]
   ACTION TAKEN: amphtml engine v0.js script tag was added to the document.
- The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
   [code: MANDATORY_TAG_MISSING  category: MANDATORY_AMP_TAG_MISSING_OR_INCORRECT see: https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md]
   ACTION TAKEN: noscript tag was added to the document.
- The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect.
   [code: MANDATORY_TAG_MISSING  category: MANDATORY_AMP_TAG_MISSING_OR_INCORRECT see: https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md]
   ACTION TAKEN: head > style[amp-boilerplate] tag was added to the document.
- The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect.
   [code: MANDATORY_TAG_MISSING  category: MANDATORY_AMP_TAG_MISSING_OR_INCORRECT see: https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md]
   ACTION TAKEN: noscript > style[amp-boilerplate] tag was added to the document.


c:\xampp\htdocs\amp-library-master>

So, the AMP HTML code is:

<!DOCTYPE html>
<html amp><head>
<meta charset=”utf-8″>
<title>Test document</title>
<link rel=”canonical” href=”https://www.domain.com/test.html”>
<noscript>
<style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
</noscript>
<meta name=”viewport” content=”width=device-width,minimum-scale=1″>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
<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>
</head>

<body>
<p>This is a test file.</p>
<p><amp-img src=”https://wwww.domain.com/logo.jpg” width=”1024″ height=”768″ alt=”domain logo” layout=”responsive”></amp-img></p>
</body>
</html>

Now copy the AMP HTML code to a new file, like test-amp.html. You can verify the AMP HTML code with the AMP Validator at https://validator.ampproject.org/

Use the same command for other HTML files.

To see more options for the amp:convert tool use: php amp-console amp:convert --help

c:\xampp\htdocs\amp-library-master>php amp-console amp:convert --help
Usage:
  amp:convert [options] [--] []

Arguments:
  filename                Which file do you want to convert to AMP HTML? (Default is stdin)

Options:
      --no-orig-and-warn  If set, the original HTML and warnings/messages encountered during conversion will not be printed out
      --no-lines          If set, the line numbers will be not printed alongside the AMPized HTML.
      --diff              If set, a diff of the input and output HTML will be printed out instead of the AMP html. Note that the original HTML will be formatted before being diffed with output HTML for best results. This is because the output HTML is also formatted automatically.
      --js                If set, a list of custom amp components and the url to include the js is printed out
      --full-document     If set, assumes this is a whole document html document and not an html fragment underneath the body (which is the default)
      --options=OPTIONS   If set, loads options from the file indicated
  -h, --help              Display this help message
  -q, --quiet             Do not output any message
  -V, --version           Display this application version
      --ansi              Force ANSI output
      --no-ansi           Disable ANSI output
  -n, --no-interaction    Do not ask any interactive question
  -v|vv|vvv, --verbose    Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug

Help:
  Convert some HTML to AMP HTML

c:\xampp\htdocs\amp-library-master>
You will need to manually check/adjust the AMP HTML code! The tool is not perfect.

Resources:
https://github.com/Lullabot/amp-library
https://getcomposer.org/download/
https://www.ampproject.org/
https://validator.ampproject.org/

Related KB post: AMP Support for WordPress

Share this post:

Add AMP HTML support to your WordPress blog

Accelerated Mobile Pages (AMP) is an HTML type language that is optimized for mobile using. Google puts more and more SEO value on AMP pages. For example, you can see statistics for your AMP pages in Google Analytics. In this post we will show you how to install the AMP WordPress plugin by Automattic.

The steps to support AMP in WordPress:

  1. Log in to your WordPress installation (usually the url is domain.com/wordpress_directory/wp-login.php)
  2. Go to Plugins->Add New
  3. Type “AMP” in the Search plugins edit box
  4. You’ll see a list of available plugins. Install the AMP by Automattic plugin by clicking the Install button. 
  5. Activate the plugin by clicking the Activate button.
  6. Now you will have AMP support for your WordPress blog. To see the AMP pages, just add /amp/ to any URL on your blog.(eg. domain.com/post-1/amp/)

Here is a short video tutorial:

You can verify your /amp/ posts with the official HTML AMP Validator https://validator.ampproject.org/

To customize the look of the AMP pages, you can install the AMP for WP – Accelerated Mobile Pages (it requires the AMP plugin by Automattic)

WordPress AMP Plugins
WordPress AMP Plugins

For other AMP related plugins, search the WordPress site https://wordpress.org/plugins/search/amp/

Related KB post: How to convert HTML to AMP

Share this post:

How to remove .php, .html extensions with .htaccess

Many times you will want to have user-friendly URLs on your site. Instead of https://www.example.com/index.html you will want to have https://www.example.com/index . The second URL looks much better. Also, from the SEO point of view is better to don’t use file extensions.

 The steps to remove file extensions are:

  1. Login to your cPanel account.
  2. Go to File Manager – in the FILES Section
  3. In the File Manager go to the Settings button on the top right corner.
  4. On the Preferences window that will appear check the Show Hidden Files (dotfiles) option. Click Save button to apply the settings.
  5. Now navigate to the .htaccess file. If the file doesn’t exist you will need to create it.
  6. Click the Edit button from the File Manager top menu.
  7. Add the below lines to the .htaccess file. Click the Save Changes button and then the Close button. 
    #remove php file extension-e.g. https://example.com/file.php will become https://example.com/file
    RewriteEngine on 
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME}\.php -f
    RewriteRule ^(.*)$ $1.php [NC,L]
    
  8. Now the Apache web server will remove .php extension from URLs.

To remove .html extension use:

#remove html file extension-e.g. https://example.com/file.html will become https://example.com/file
RewriteEngine on 
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html [NC,L]
Notice that many PHP scripts (like WordPress, Drupal, MediaWiki etc) need the .htaccess files to function properly. Don’t delete these files. Also take care when editing them.

Check the video tutorial we made:

You can also edit .htaccess files on your web hosting account via an FTP client like FileZilla.
Share this post:

How to create HTTP error pages for your site in cPanel

You want to show a custom page when someone access a page that does not exist on your server? This can be easily achieved via the cPanel interface.

The steps on how to configure custom web pages for web servers errors (HTTP status code 4xx or 5xx) are:

  1. Log into your cPanel account
  2. Go to Advanced section, select Error Pages.
  3. From the drop-down list select the domain you want to manage error pages for. (it can be the main cPanel domain, a subdomain, an addon domain)
  4. Select the page you want to edit (for example 404 – File Not found)
  5. Now you will just need to edit the error file (you can use the HTML syntax). Also, cPanel has some tags that you can insert.
  6. Click Save. 
cPanel Error Pages
cPanel Error Pages

The web servers errors for which you can create web pages are:

400 (Bad request)
401 (Authorization required)
402 (Payment required)
403 (Forbidden)
404 (Not found)
405 (Method not allowed)
406 (Not acceptable)
407 (Proxy authentication required)
408 (Request timeout)
409 (Conflict)
410 (Gone)
411 (Length required)
412 (Precondition failed)
413 (Request entity too large)
414 (Request URI too large)
415 (Unsupported media type)
416 (Request range not satisfiable)
417 (Expectation failed)
422 (Unprocessable entity)
423 (Locked)
424 (Failed dependency)
500 (Internal server error)
501 (Not Implemented)
502 (Bad gateway)
503 (Service unavailable)
504 (Gateway timeout)
505 (HTTP version not supported)
506 (Variant also negotiates)
507 (Insufficient storage)
510 (Not extended)

A video tutorial in which we show you how to configure and test an error page:

Share this post:

International Women’s Day 2017 Google doodle

Today is the International Women’s Day. For this year Google presents 13 of the past doodles honoring great women in the history.
“This International Women’s Day, we’ve chosen to look to the past to celebrate some of the female pioneers who paved the way to where we are today.” says the Google Doodle post.

You can see below the carousel that appears when you search for “International Women’s Day” on google.com website, as of March 8, 2017.

Here are the thirteen images shared by Google (we linked each woman name with her corresponding Wikipedia page):

Ida Wells

Lotfia El Nadi

Frida Kahlo

Lina Bo Bardi

Olga Skorokhodova

Miriam Makeba

Sally Ride

Halet Çambel

Ada Lovelace

Rukmini Devi

Cecilia Grierson

Lee Tai-young

Suzanne Lenglen

You can read more details at the International Women’s Day 2017.

We wish you a Happy Women’s Day!

Share this post:
Page 1 of 2
1 2