How to create AMP landing pages for higher conversion ?


What is AMP (Accelerated Mobile Pages) ?

AMP or Accelerated Mobile Pages is an open-source library that provides a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users. AMP pages are just web pages that you can link to and are controlled by you.

As per amproject.org :

“AMP project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms”

How AMP Works :

AMP has three frameworks

AMP HTML:

AMP HTML is basically HTML extended with custom AMP properties.

AMP JS:

The AMP JS library ensures the fast rendering of AMP HTML pages.

AMP CDN:

An optional Content Delivery Network, it will take your AMP-enabled pages, cache them and automatically make some performance optimizations.

Note : USE HTTPS — When creating AMP pages and content, you should strongly consider using the HTTPS protocol (vs. HTTP). Although, HTTPS is not required for the AMP document itself or for images and fonts, there are many AMP features that require HTTPS (e.g., video, iframes, and more). To ensure your AMP pages take full advantage of all AMP features, use the HTTPS protocol.

Learn how to Create a AMP HTML Page

sample code :

  • <!doctype html>

  • <html amp lang="en">

  • <head>

  • <meta charset="utf-8">

  • <script async src="https://cdn.ampproject.org/v0.js"> </script>

  • <title>Hello, AMPs </title>

  • <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

  • <script type="application/ld+json">

  • {
  • "@context": "http://schema.org",
  • "@type": "NectarSpot",
  • "headline": "LandingPage AMP Version",
  • "image":[
  • "logo.jpg"
  • ]
  • }
  • </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><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

  • </head>

  • <body>

  • <h1> Welcome to NectarSpot </h1>

  • </body>

  • </html>

The below mentioned are the mandatory fields:

Doctype declaration is required.

This tells everyone that this is an AMP file.

The charset definition must be the first child of the tag.

The AMP runtime must be loaded as the second child of the tag.

AMP HTML files require a viewport declaration. It’s recommended to include initial-scale=1.

The AMP boilerplate:

The below script must be placed as it is. We should not give any spaces in between.

How To Inculde a Image in AMP HTML :

Most HTML tags can be used directly in AMP HTML. Certain tags, such as the <img> tag, are replaced with

Width and height should be mentioned. We cannot give class to the amp-img. If we want to change width and height of the image for media screens, it is advisable to the amp-img in a div and add class to that div.

How to Write CUSTOM CSS :

CSS must be embedded inline within these tags.

With this you can create a sample AMP Page that can run on AMP. In order to check whether the AMP page is validated or not.We need to use https://validator.ampproject.org/

If we get the page as validated without any errors ,then you are all set to go

Need Help in creating beautiful landing pages we can help you.Look at our version of AMP Page: https://nectarspot.com/landing/

Get a complimentary 30 minute marketing consultation and an audit report from our expert who has been awarded by LinkedIn Pro as ‘Best of 2017 & 2016’ in various categories including – ‘Marketing Consulting’, ‘Digital Marketing’ and ‘Lead Generation’.

Learn how other organizations are partnering with us for turnkey marketing services and solutions impacting real business outcomes.

Roy Lingam CEO,Delphi USMLE. Chicago

NectarSpot team successfully re-branded and revamped our old website delphiusmle.com to a fast loading and aesthetically pleasing within a short time frame of four weeks. NectarSpot designers and developers created a distinct UI/UX landing pages that communicates our brand as an established brand identity helping us to get more conversions. Our end users appreciate the site’s unique and polished presentation through an informative, well laid-out content and beautifully designed pages that helps a seamless interaction . The team is extremely organized and communicative and working with their team was seamless and highly collaborative. Their team is both technically and creatively talented. After creating relevant landing pages and revamping the entire site, NectarSpot is helping us to generate qualified leads through Google Ads campaign. We see a definitive increase in key web metrics such as higher conversion rate, lower bounce rate and higher engagement. We would highly recommend NectarSpot to anyone looking to up-brand their digital identity and get qualified leads.
Read More Testimonials....

Ryan Frederickson ArT Wine Preserver

NectarSpot team executed the Quick and solid build of AMP website. Not afraid of small tweaks here and there. The team has, from the beginning of project, focus on conversion and provided a seamless workflow for my prospects to visit, educate and finally purchase on my e-commerce portal. They provided design, development on AMP framework and helped to host e-commerce portal on scalable and secure google cloud. We are looking forward to working with them in future for other projects as well.
Read More Testimonials....

Read more to gain insights from our blogs.
Receive latest marketing insights, data and inspiration by subscribing .

Start Your Project Today (100% Satisfaction Guaranteed)

  • NectarSpot Inc. is an integrated digital marketing agency specializing in Design & Development of Web, Mobile & Voice Applications.
    We excel in providing Optimization, Automation, PPC & Analytics services to high performing brands across industries.

    Contact us today at +1 630 999 (7768) or email at info@nectarspot.com to know more.

Need help?

We are right here!