fbpx
Home » Blog » How to Integrate Amp Pages with your website

How to Integrate Amp Pages with your website

16Jun

How to Integrate Amp Pages with your website

What is Amp?
Amp is accelerated mobile pages. Amp is an open source project initiative that help publishers to create mobile optimize content.
Why Amp?
Amp pages don’t take much time to load, it will show article instantly. Demo of amp pages is on this link
https://www.ampproject.org/
How to setup:
Amp url on detail page of site

<link rel='amphtml' href='yoursite_detail_page_link/amp' />

Canonical url on amp page

<link rel="canonical" href="detail_page_link">

 
Amp page HTML Structure

  • Add amp keyword in the html tag
  • Add all meta tags like url, type, title, description, published_time, news_update_date, author_name , section
  • After meta tags we will have amp custom styling

Some restricted properties in Custom Styling in Amp Pages

  • All styling must be in the head tag of the page by using <style amp-custom>
  • !important not allowed in Amp
  • <link rel=”stylesheet”> is not allowed except of custom fonts
  • Classes names with the –amp- is not allowed
  • External sheet not allowed to add on amp page, only custom css is allowed.
  • But external fonts file can be include on page

 
Ref link: https://www.ampproject.org/docs/guides/responsive/style_pages.html
 

 

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": "http://cdn.ampproject.org/article-metadata.html",
"headline": "Lorem Ipsum",
"datePublished": "1907-05-05T12:02:41Z",
"dateModified": "1907-05-05T12:02:41Z",
"description": "The Catiline Orations continue to beguile engineers and designers alike -- but can it stand the test of time?",
"author": {
"@type": "Person",
"name": "Jordan M Adler"
},
"publisher": {
"@type": "Organization",
"name": "Google",
"logo": {
"@type": "ImageObject",
"url": "http://cdn.ampproject.org/logo.jpg",
"width": 600,
"height": 60
}
},
"image": {
"@type": "ImageObject",
"url": "http://cdn.ampproject.org/leader.jpg",
"height": 2000,
"width": 800
}
}
</script>

For more detail see this link https://www.ampproject.org/docs/guides/discovery.html

  • In the last add amp js file <script async src=”https://cdn.ampproject.org/v0.js”></script>

 
Amp page Body Structure
Add logo in the header tag with the <amp-img> tag and give width height to logo otherwise amp send an error in the console.
After logo add article tags and that has following

  • Title
  • Sub heading
  • Datetime
  • Author detail, name and image
  • Images/video/audio/iframes
  • Content
  • Footer

 
Images:

  • Layouts supported for images are FIXED, FIXED_HEIGHT, NODISPLAY, RESPONSIVE
  • Explicitly size of image is required as in width and height, otherwise get an error in console
  • Attributes for image are src, srcset, alt, attribution
  • Styling of image can be done by adding amp-img in the custom css tags like amp-img { background-color:grey;}

ref link: https://www.ampproject.org/docs/reference/amp-img.html
Audio:

  • Add js script for audio in the header (<script async custom-element=”amp-audio” src=”https://cdn.ampproject.org/v0/amp-audio-0.1.js”></script>)
  • Amp not allowed to add http url, therefore add url without http:
  • Give size of audio player by adding width and height attributes
  • Layouts supported by amp are FIXED, FIXED_HEIGHT, NODISPLAY
  • Fallback attribute is added in case of showing message that browser not support audio player

Ref link : https://www.ampproject.org/docs/reference/extended/amp-audio.html
 
Video:

  • Amp not allowed to add http url, therefore add url without http:
  • Give size of audio player by adding width and height attributes
  • Layouts supported by amp are FIXED, FIXED_HEIGHT, NODISPLAY
  • Fallback attribute is added in case of showing message that browser not support audio player
  • Poster attribute is use to add image that will show by default before video started.

Ref link : https://www.ampproject.org/docs/reference/amp-video.html
 
Add Analytics Code:

  • Add analytics js script in the head tags and before the amp js library.
  • Add following code in the body tags by replacing your account id
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>

Ref link : https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking
 
How to validate amp Page
Amp pages can be validate by appending #development=1 in the end of url.
 

Share this post