Setup completed
From that point on, assuming you have some articles that match the rules you setup, wbAMP will create an Accelerated Mobile Pages of your site. In practice,it means:
AMP pages are advertised
Assuming you have selected the Normal
operation mode, a rel
tag will be inserted in your regular pages, when they have an AMP version:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="http://local.web/products/wbamp/src/main/sample-sites" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Joomla" />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>Sample Sites</title>
<link href="http://local.web/products/wbamp/src/main/sample-sites/amp" rel="amphtml" />
If you selected earlier Development
as the operation mode, this rel
tag will not be inserted in your normal pages until you select again Normal
. This is to give you time to verify and validate your AMP setup.
AMP pages are served
When a user or a search engines, requests the AMP URL specified in the rel
tag above, wbAMP will detect it and serves a specially formatted page:
This page in turns contains a canonical tag, that points back to the main, regular HTML, version of the page, so that no duplicate content happen and search engines can relate both pages:
<!doctype html>
<html lang="en-GB" amp>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic|Open+Sans:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<title>Parks Home</title>
<link rel="canonical" href="http://local.web/products/wbamp/src/main/parks-home" />
<style>body {opacity: 0}</style><noscript> <style>body {opacity: 1}</style></noscript>
This example is extremely simplified, but you can use your own CSS, images, and some AMP-specific tags that we will cover in the Going further section of this documentation.