Chapter 86 – Tips to Create AMP Pages for Web App using Python, HTML, CSS, JS
AMP page weight has been downsized after Google has sunset AMP icon in SERP and the function of automatically redirecting traffic to target website page in mobile end. However, it’s still one of the most important snippets to increase exposure and grow traffic from search and discover channels as you might be aware from the search console panel..
So in this piece, I would briefly walk through how to create AMPs for your web app mobile side users usng Python as the sample. By the end of this piece, you can learn the core components and are able to start your own projects using the module in this chapter.
AMP page weight has been downsized after Google has sunset AMP icon in SERP and the function of automatically redirecting traffic to target website page in mobile end. However, it’s still one of the most important snippets to increase exposure and grow traffic from search and discover channels as you might be aware from the search console panel..
So in this piece, I would briefly walk through how to create AMPs for your web app mobile side users usng Python as the sample. By the end of this piece, you can learn the core components and are able to start your own projects using the module in this chapter.
Table of Contents: Tips to Create AMP Pages for Web App
- Core AMP HTML, CSS & JS script
- 6 Checkpoints you must complete to pass AMP page validation
- Canonical tag with Jinja2
- Detect Mobile Traffic using user agent
- Redirect url_for to redirect mobile users to AMP route
- Full Python Scripts of AMP Page Creation for Web App
Core AMP HTML, CSS & JS Script
Accelerated Mobile Pages (AMP) is an open source project created to improve the performance of web pages for mobile devices. The project was spearheaded by Google and Twitter.
So it has a basic standard structure and fundamental components added to the Web app. Here are the basic component list you can download from AMP documentation website.
- Bass.css
- HTML template
- Base.js
Here are the stylesheet and script sample placed between <head></head> as follows:
<link href="base.css" rel="stylesheet" />
<script type="text/javascript" src="base.js"></script>
For the html page naming, for differentiating with the original html page, we normally name AMP in this form, such as abc.amp.html
6 Checkpoints you must complete to pass validation
Different with general web app mobile pages, there are five must-have elements we need to deploy to create AMP pages. It’s for successful validation by Google afterwards.
a. AMP library Script
First thing first, we need to add the AMP script library in the header as well as other open source project such as bootstrap, jquery, etc.
<script async src="https://cdn.ampproject.org/v0.js"></script>
b. Language and code indicator
Secondly, we need to add the language and encoding tag as follows in the header.
<meta charset="utf-8" />
<html ⚡ lang="en">
These two tags mainly show what language the page and language encoding version are using.
c. Canonical tag
Sequentially, a canonical tag is a must as it directs which page is the original one that is paring with this AMP page. I would walk through more details in a moment.
d. Viewport tag
Then, it’s the viewport tag. This is for optimizing the mobile end layout setting. Here is the sample tag.
<meta name="viewport" content="width=device-width">
e. Image html element setting
Different with non amp page in the image element, AMP image html element has an unique setting required. We use <amp-img></amp-img> instead of <img></img>
<amp-img src="mountains.jpg"></amp-img>
Other rest of element settings are no different, so we suggest changing them in bulk before AMP pages live.
f. Article schema
Although Valid AMP pages do not require schema.org structured data, but some platforms like Google Search require it for certain experiences like the Top stories carousel. It’s generally a good idea to include structured data. Structured data helps search engines to better understand your web page, and to better display your content in Search Engine Result Pages (e.g., in rich snippets). The structured data is included in the <head> tag of your AMP page via an application/ld+jsontype script tag.
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"https://example.com/my-article.html"
},
"headline": "My First AMP Article",
"image": {
"@type": "ImageObject",
"url": "https://example.com/article_thumbnail1.jpg",
"height": 800,
"width": 800
},
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "John Doe"
},
"publisher": {
"@type": "Organization",
"name": "⚡ AMP Times",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/amptimes_logo.jpg",
"width": 600,
"height": 60
}
},
"description": "My first experience in an AMPlified world"
}
</script>
In fact, the traffic from non-rich AMP appearance does perform better than those pieces without article schema
Canonical tag with Jinja2
For setting up AMP pages canonical tag, we can also leverage JINJA to set canonical variables connecting with your server side. The critical thing in AMP page canonical setting compared to other HTML pages is required to add amphtml tag as well in non-amp pages. Here are the sample as follows:
Tag deployed in amp page:
<link rel="canonical" href="/article.html">
Tag with the same final url deployed on non-amp page
<link rel="amphtml" href="/article.amp.html">
Detect Mobile Traffic using user agent
The original purpose of the AMP page is to increase the loading speed and UX in mobile client side. So, we need to add a detector to detect mobile traffic in the web app route. Here is the sample for reference
user_agent = request.headers.get('User-Agent')
if "iphone" in user_agent.lower():
elif "android" in user_agent.lower():
else:
Redirect url_for to redirect mobile users to AMP route
The final URL between non-amp and amp page is different. Either you can set an amp parameter to represent amp pages or a new path as well. Here are the sample routes to set a new page redirecting mobile users to amp url.
Non amp page:
@app.route("/<louis>/<lu>", methods=['GET', 'POST'])
def abct(louis, lu):
user_agent = request.headers.get('User-Agent')
if "iphone" in user_agent.lower():
return redirect(url_for('cde', easy2digtal=louis, buyfromlo=lu))
AMP page:
@app.route("/<easy2digital>/<buyfromlo>/amp/", methods=['GET', 'POST'])
def singlePostAMP(easy2digital, buyfromlo):
return
Full Python Scripts of AMP Page Creation for Web App
If you are interested Chapter 86 – Tips to Create AMP Pages for Web App using Python, HTML, CSS, JS – Guide to Deploy Web App on Google App Engine, please subscribe to our newsletter by adding the message “Chapter 86”. We will send you the script immediately to your mailbox.
I hope you enjoy reading Chapter 86 – Tips to Create AMP Pages for Web App using Python, HTML, CSS, JS. If you did, please support us by doing one of the things listed below, because it always helps out our channel.
- Support and Donate to our channel through PayPal (paypal.me/Easy2digital)
- Subscribe to my channel and turn on the notification bell Easy2Digital Youtube channel.
- Follow and like my page Easy2Digital Facebook page
- Share the article on your social network with the hashtag #easy2digital
- You sign up for our weekly newsletter to receive Easy2Digital latest articles, videos, and discount codes
- Subscribe to our monthly membership through Patreon to enjoy exclusive benefits (www.patreon.com/louisludigital)
