Mega Guide: Customize AMP Pages To Add Logo, Make AMP Pages Adsense Responsive and Overcome From AMP Pages Error

In this article find the best ways to customize AMP Pages or Article by adding a custom logo, solving AMP validation errors, and the most important monetizing with Google AdSense Ads.

When the team of Accelerated Mobile Pages (AMP) set out the project of Google AMP HTML Pages, their objective behind this was not just only to optimize a user’s engagement with the content, but also to make the mobile experience ideal for everybody.

The great thing about AMP Pages is that it consumes very fewer data. That’s why if the person has a limited data plan, still they have the opportunity to access the website.

However, AMP pages do not add Google Adsense automatically. Advertising on website or blog is the way of potential earning for many webmasters. But few of them do not know how to setup and add Google AdSense in AMP.

Don’t worry, if you want to set AMP project with your site along with adding Google Adsense to it, there is good news for you.

AMP is now entirely comfortable with Google Ads. But the major question how to set Adsense with AMP?

In my previous article, I talked about How to setup AMP on your website or blog? Where I have covered all the steps to setup AMP with the Google Analytics tracking for your WordPress based website.

In this article I have added solutions to setup and add Google AdSense ads on your AMP Project enabled website or blog.

Before we head over to that solution, first we learn how you can fix the AMP Page Error.

How to Fix AMP Page Error in WordPress?

Typically, AMP Pages Error found under the Webmasters Tools (Search Console) Account, and Google also shows this error in search result while you are logged in.

AMP Pages Error found under the Webmasters Tools

When does AMP Pages error occur on WordPress site?

Well, this kind of mistakes only happens when you use Original AMP Plugin on your WordPess site. But to find the issues, you can validate an AMP Page for error. Let see how you can validate an AMP Pages to locate the problem.

# Step 1: First visit the official site of AMP Validator.

# Step 2: On AMP Validator site, you will find one filed namely URL. Add your site URL which contains /amp/ at the end. For instance, https://www.bforblogging.com/how-to-choose-the-best-and-secure-wordpress-hosting/amp/. Then hit Validate button.

Add your site URL to validate AMP pages

# Step 3: If there is any error then it will show you that, otherwise it will show you Validate Status Pass at the bottom left the corner.

Validate Status Pass if there is no error on AMP Pages

Or if you find any error then read the article further and you will find customization steps down in here, this will automatically remove the AMP Pages errors.

How to Customize AMP Pages in WordPress?

# Step 1: To customize AMP Pages, you need to install one plugin. Visit your Admin Panel → Plugin and find Facebook Instant Articles & Google AMP Pages By PageFrog.

Install and Active Facebook Instant Articles & Google AMP Pages By PageFrog

This is a free WordPress Plugin, add this plugin and activate it. This plugin used to manage Facebook Instant Article, but this is also used to customize AMP Pages on your site.

# Step 2: Under your Admin Panel, visit Mobile Formats. This will take you under Setup Option.

AMP Mobile Formate Settings

# Step 3: Find Google AMP HTML with a Ready option. And if not, then first activate original first AMP Plugin to enable this option.

Google AMP HTML is ready to use

# Step 4: Once you enabled this option, within Mobile Formats you will find Styling option tap on it.

Here, into the AMP HTML tab, you will be represented with many options. As per your desire, you can make changes to those fields.

How to Add Logo On AMP Pages?

# Step 1: Under Styling option, you will find the “Branding” Option. Click on Chose Logo and upload a transparent png file with minimum 300×300 pixel size. You can also choose a logo file from your media library.

upload and add logo to AMP pages

Once you complete the process, you will find the logo has been added

# Step 2: Now, under the Preview section, you will find one option of Article with a drop-down list. Here, you can choose any article from your site and can preview of AMP Page.

Preview AMP Article in WordPress

AMP Page Preview will also be shown when you write a new article. According to your desire, you can also select the font type and color.

#Step 3: In this step, you will also find the Featured Image on the top of the article. You can also eliminate it if you don’t want it.

But I will explain the process of how to remove the featured images from AMP articles in the next step.

# Step 4: Save all the changes.

How to remove WordPress Featured Image in Instant Article or AMP Pages?

# Step 1: Navigate to “Setting” under Mobile Formats in Admin Panel.

# Step 2: Move down and find “Other Settings”.

# Step 3: Uncheck the box of “Display Featured Image“.

uncheck display featured image to remove featured image from AMP articles

# Step 4: Click on “Save all Settings.

Now, preview any post for AMP compatibility. As I have mentioned before, make sure your post URL must contain the /amp/ at the end.

How to Make AMP Pages Adsense Responsive?

There are overall three ways to make AMP Pages AdSense responsive. Let see them one-by-one.

# Way 1:

To add in AMP Pages, there is one WordPress plugin available on the web. Basically, this plugin is known as AMP for WP-Accelerated Mobile Pages.

Add AMP for WP Accelerated Mobile Pages to enable Google AdSense Ads

Along with the first AMP Plugin, you can use this plugin, and you will be able to add Google AdSense ads to many places on a single post.

There are 4 ad placement options:

  1. Below the Header
  2. Below the Footer
  3. Above the Post Content
  4. Below the Post Content

4 Google AdSense ad placement options in AMP articles or pages

Apart from this, you can add related posts, social media sharing buttons and a lot more things to engage users on AMP Pages.

# Way 2:

# Step 1: First tap on Mobile Formats under Admin Panel where you will find Ads tab, hit that tab.

# Step 2: Click on Sign in with Google button and logged into your Google Account to authorize.

sign in to Google AdSense account to add ads in AMP Pages

# Step 3: Then one pop up window will appear this is your Adsense Account, click on Choose button.

allow pagefrog wordpress plugin to view your AdSense data to add ads in amp pages

# Step 4: Click on choose button and you will see all the Ad Banner that you have created on Adsense. It will also show you the banner name, Ad dimensions and Ad slot number.

Select suitable one by just clicking on Choose button, but if you don’t find any then create a new one and go back to WordPress.

# Step 5: Now, on the page of Google AMP HTML check the box of Enable Google AdSense for AMP HTML Pages.

Google AdSense AMP Pages addd unit and enabled ads in amp articles

You will also find Ad Placement, under this choice, see the option Show an Ad Every Words. Automatically, this option saved to 250 Words. This means the AMP page will show the Ad at every 250 words. However, you can change the settings.

As per the AdSense Policy, your mobile-friendly site should not appear 2 Ads on a single screen at the same time. Thus, make sure you don’t break the rules and regulations of AdSense Policy.

That’s all, now, you will see that AMP Pages will show you the AdSense Ads.

#Way 3:

You can add AdSense to AMP Pages through code inserter tool, such as Quick AdSense Reloaded.

Install Quick AdSense Reloaded WordPress Plugins to Add Google AdSense ads in AMP Article

With the help of this plugin, you can add ads to AMP Pages as per your desire. You can add ads anywhere on your articles like begging of the post, middle of the post, End of the Post, and few more places in the AMP Pages. With this plugin, you can serve up to 10 Ads on a single AMP Page.

In the next tab “AdSense Code,” add your previously created Google AdSense code. Over here you will find two options to add Google AdSense Code 1) Copy Paste the AdSense Code or 2) Add Ads details.

AMP Page does not support JavaScript code. Below is the AMP AdSense code to be added manually.

type=”adSense
data-ad-client=”ca-pub-XXXXXXXXXXXXXXXXX”
data-ad-slot=”XXXXXXXXX”

Replace ca-pub-XXX with your publisher id, replace XXXX with your Data Slot and alter the width and height of the ad.

Copy Paste the AMP AdSense Code

Another and very simple way is to add few details like Ad Slot ID, Publisher ID, Ad Type, Width, and Height of the ad.

Add AdSense Code details to add ads in AMP Articles

By adding this details, this plugin will auto generate the AMP AdSense code to place the ads in the AMP Page.

Select the layout to place the ads and click on save changes.

Are you still suffering from AMP-AD error?

Basically, AMP Validator shows the error of amp-ad extension.js script. This means this tag is missing or incorrect.

There are many webmasters, who face this problem after performing all the above-given steps test on their website URL on the validator. If you are finding errors, then following steps are the solution.

# Step 1: Visit the Admin Panel, where a tap on Plugin tab. Here, you will find all the installed plugins.

# Step 2: Find AMP plugin and tap of Edit option. Here select amp/includes/amp-helper-functions.php on the right and add the given below code at this file.

add_action(‘amp_post_template_data’, ‘abc_add_amp_ad_script’); function abc_add_amp_ad_script($data){if(! isset($data[‘amp_component_scripts’][‘amp-ad’])){ $data[‘amp_component_scripts’][‘amp-ad’] = ‘https://cdn.ampproject.org/v0/amp-ad-0.1.js’;}return $data;}

Edit AMP Plugins code to solve AMP Validations errorsEdit AMP Plugins code to solve AMP Validations errors

Here, you can change the ABC with anything as per your desire.

That’s all.

You are now aware and educated yourself with all the major setup/installation instruction. I know now you can tackle things like:

  • Fixing AMP Pages errors in WordPress
  • Customize AMP Pages
  • Adding logo in AMP Pages/Posts
  • Removing featured image, which has been added by default in WordPress
  • Adding Google AdSense Code in 3 different manually and automated ways
  • Altering AMP Plugin code to fix AMP Validator Errors

Questions?
Comment them below, and I will personally look into this.