How To Make WordPress Amp Mobile Pages and Advanced AMP ADS Easily No Code Needed

on July 26, 2017

How to make a WordPress AMP page easily or without coding? WordPress active bloggers, active content producers all have this question in their mind. AMP page is actually a clone with limited HTML and CSS code functions to perform effectively on mobile screens. So you need to maintain two versions separately.

make-wordpress-amp-mobile-pages-amp-ads

Now you might think that, We have already published 100’s of posts and have more than 40+ web pages how are we supposed to do it???

You no need to create each and every page again, you can do this easily within few minutes. If you have more contents and pages this may take few hours. But I assure you that these steps will not make your fingers twisted with codings.

In this post, we are going to see how to make WordPress amp mobile pages and also how to make your amp pages get optimized for the ads (Google Adsense). I have made a separate post about advanced AMP ads and how to create trendy advanced AMP ads, please take a look at it to know more.

Table Of Contents

What Are AMP Pages

Google AMP projects help your website to load faster on the mobile devices. According to mobile trends, nearly 60% of the traffic on the internet is through mobile devices.

Simple View with a complex task: To make the internet a better place for the users Google started the AMP projects. The project is very simple; make your code rich desktop friendly websites into mobile friendly websites simple pages with simple codes.

You might be wondering “why now?” 87% of the users turn to their smartphone to search something 20% of them mostly uses voice searches. The internet has become a part of our life after the advent of the smartphones.

mobile-searches-on-mobile

The figures are expected to be raising in the future. By keeping the future in mind it is the perfect time to think of mobile friendly internet world.

Google AMP mobile pages were launched in October 2015. In 2017 Marketing Next program Google claims more than 2 billion pages are added to AMP pages at a rate of 35 million pages are added per week.

How To Create AMP Pages

As said before AMP pages are the simplified version of the desktop version of the website. That is has restricted HTML and CSS structure built exclusively for AMP. In other words, you can take AMP as the advanced version of Read view on the mobile browsers.

To make this we need to completely restructure our present HTML and CSS structure. The result is impressive. The AMP pages load almost instantly than other Non-AMP pages, to make this happen we need to maintain a separate AMP version for our website.

The detailed documentation is given by them. To make the developing pages more simpler they also given us boilerplate, as shown below.


<!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>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }

But WordPress is a different platform, it suits for raw websites developed by people. Then how can we activate amp in WordPress? That’s what we are going to see next.

Creating WordPress AMP Pages With Plugin

The problem with the WordPress is, normal people can’t access to these file regions. So manually creating WordPress amp page is really a difficult task. To make this simple WordPress releases its own AMP plugin.

This plugin takes care of changing the website code structure for you that meets the AMP need. The step by step process as follows.

Step 1: First install the AMP plugin by AUTOMATTIC and activate it.

Step 2: After that go to Appearance> AMP and edit

In the screen, you can preview your WordPress AMP page. In this screen, you can change the background color and the text color.

wordpress-amp-editing

The process does not end here you have to validate the WordPress website. When your WordPress amp website pass the validator test then it will be displayed as the AMP page in the mobile search result.

WordPress AMP Page Validator

You can validate your WordPress AMP page by two methods, one is through their web validator tool and another is through their Google Chrome extension.

Once you completed converting your WordPress amp page you can see the amp page by adding amp to the URL.

For example: If the website URL is testsite.com the amp version of the page is testsite.com/amp

Now copy the amp URL that is testsite.com/amp and paste in the web validator tool it will show the errors in it.

If you use the addon the add-on symbol color will change, the meaning of it is shown below

google-validator-addon-symblos

But what if the validator shows some error? The WordPress AMP page of the post I have made with Gutenberg editor has shown some error when I checked with the AMP validator as shown below.

wordpress-amp-error

As I said before it is not able to access the HTML page of the post, for that I have to get in tune the theme file. When I change the theme file it affects my website’s overall look.

AMP For WP Plugin

AMP for WP plugin will help you solve this issue. This plugin works along with the WordPress official AMP plugin which I mentioned before. You have to install both the plugins in your WordPress website.

After you have activated the plugin, you can see a separate text editor below your content.

Check the box “Use This Content as AMP Content” if you need to convert the particular page to a WordPress AMP page.

As far as I checked it works well, no matter what page I throw to this plugin it converts the page into a perfect WordPress AMP page that passes the validator.

This plugin also fixes the navigation menu problem. If you want to add a navigation menu to your WordPress AMP page this plugin is the solution for you.

Yoast Amp Glue

Glue for Yoast SEO & AMP Plugin is an extension plugin to the YOAST SEO plugin. YOAST gives you an additional option to customize your WordPress AMP mobile page. You can enable this AMP setting to any post type you want. YOAST glue gives you the following features.

Features

  • Set your logo on your AMP page
  • Default image for the AMP page if the particular page does not have any image
  • Can edit the content colors, link colors. You can even add your own custom CSS
  • Connect your Google Analytics to the WordPress AMP page, just copy and paste the analytics code

Advanced AMP ADS

The major talk in the Google’s Marketing Next 2017 is the artificial intelligence in the Google Ads and the fast ads. Google also launches the AMP pages from Search ads beta to show the ads in the search result.

Recommended Reading: How To Make Google Ads Without Getting Blocked By Google’s New Official Blocker

As of now all the ads in the Google Ad network is automatically scaled to the AMP page. So it is also important to make your WordPress AMP page compatible to the AMP ads. Check how fast the AMP ads and non-AMP ads load

amp-ad-load-time

Mobile users are more volatile than normal desktop users. Your site has to be speed optimized to meet their needs. For every second delay in loading the page your conversion rate falls by 20%. Google found this after examining 900,000 mobile landing pages in 100 countries.

Fortunately, we have the solution for the WordPress AMP ads too. The AMP for WP plugin itself provides advanced AMP ads extension plugin to help you manage the AMP ads on your WordPress AMP page, but the extension need to be bought separately for $19.99 with limited time support.

advanced-amp-ads

Advanced AMP Ads Features

  • Incontent Ads: It allows you to add ads in between the content.
  • Below the header, below the footer, above the post content and Sticky ads.
  • To manage any ad network options custom AD options are provided
  • Supports Link AD Units from Google Adsense

Make Your WordPress AMP Page

So that’s all you need to make your WordPress AMP page. I kept my promise, right? No coding only easy solutions.

Before we conclude you might be having doubt “is WordPress AMP page is really important?”

Well, the answer is up to you. If you have an equal amount of traffic from the mobile or mobile traffic is crucial for you then go ahead and make a WordPress AMP page. If you only have a meager amount of mobile traffic it is better to skip this.

What’s the benefit: It is not proven technically yet, but the bloggers do felt that SEO wise making their content AMP ready will be an added advantage over other website contents.

If your blog theme is a responsive theme and you have done the server side optimizations with CDN installed then Google AMP is not necessary for now. Of course it is developing rapidly but still, it is not a deal breaker.

What do you think of AMP and do you really think making AMP for WordPress is important? Let me know in the comment section. Happy Website!!

Altaf Rahman

Altaf is in the field of online from 2006 starting his career as WordPress trainer for students and completed number of projects. He is a successful entrepreneur of Cyberspace Builder started in 2011 and served nearly 4000+ customers helping them to complete about 3000+ projects.

WordPress SupportAnd Maintenance Services
  • Bill Parlaman

    “ Really great to work with. Listens to my issues and works hard until they get it done perfectly. ”

  • Alex Petrou

    “ Always a pleasure working with WPTS. Their work is fantastic and timely. Maintain our website regularly. ”

  • Thomas Carlson

    “ WP Team Support was very responsive and Increased my website efficiency by 53%. ”

Get Started Now
Feature

Support teams across the world

Feature

Safe & Secure online payment