Removing Fonts from AMP pages

So for those of you who would like to further increase the performance of AMP pages by getting rid of the HTTP call’s for Fonts

Here is a piece of code that you can add as a separate custom plugin which will be Update proof and also serving our purpose

And you’re done! This will remove all the HTTP call’s related to fonts from your AMP pages

If you don’t know how to create custom plugin, you can refer to these tutorials

Making changes to featured-image file [Update Proof]

In order to making changes to featured-images file and retaining changes even on Plugin update for all Designs

You could do as follows here

1. Create a Custom Plugin with the boilerplate code as follows

2. Now the code that does your magic is in this section, But before that create a file in the same folder as our main Custom plugin file called ‘featured-image.php’ with you custom code for featured Images on all designs

This should be your folder structure

Your code for featured-images.php file along with your custom code

Now code that actually is doing the magic goes into index.php as below

These changes will stay even if you update the plugin

Entire Code as a Plugin available here: download zip file from here and put it in /wp-content/plugin folder along with your modifications in featured-image.php

How to Add Analytics in AMP

AMP for WP let’s you add Analytics for AMP version of your website.

I am dividing How to Add Analytics in AMP into two ways.

  1. Standard Way of Adding Analytics in AMP
  2. Two Different Analytics in AMP.

1. Standard Way of Adding Analytics in AMP [STANDARD]

Go to AMP settings > Getting Started > Analytics 

Here you can add different kinds of Analytics for your website.

Here you just need to enter parameters. You should not paste any codes here.

Continue reading How to Add Analytics in AMP

Search Console Reporting Duplicate Titles with AMP

A lot of people have been reporting ‘Duplicate Title’ tag issue in the AMP version. This error has been reported specifically under the ‘HTML Improvements’ section of Google Search console. And It’s not just our plugin, it’s been happening with every AMP user in the World.

You have to understand that AMP is supposed to show the same content, title, and description as it is on the main page. You wouldn’t want to serve different content on AMP & Non-AMP version, right?

So, the question is how to solve this?

From my experience, the search console should not report these errors in the first place. The reason why I say this is because we are already using canonical tag properly on AMP. So, you should not at all worry about the content duplication. AMP is very new and I think Search console is yet to calibrate to it.

I have also researched this on the web and went through the google webmaster forums. Here are my findings:

Barry Hunter on this thread is saying “They are duplicate, so can be reported as such. … doesn’t mean its problem. You’ve got canonical setup. You can move on to worrying about something else.”

We still don’t have an official word from Google on this. but I will keep on updating this document when I have something worth sharing on this topic.

How can I Access the AMP version of my Website?

To find AMP-URLs of your website, kindly visit website.com/amp. From there you can see the AMP version of your website.

PS: Replace website.com with your website URL.

You might think, Will it create Duplicate Content Issues?  The Answer is No.

It will not create Duplicate Content issues because we use Rel Canonical Tag which relates AMP content to its Original content without losing ranking or causing duplicate pages.

How to place DoubleClick ADs in AMP?

After installing & activating both AMP & AMP for WP plugins, you have to Upload one more extension Named “ Advance AMP Ads ” Extension, in order to use DoubleClick Ads (DFP), In content Ads, Sticky Ads on your AMP. You can also place Third Party Ads using Advance AMP Ads.

Here are few simple steps to place DFP Ads in AMP using Advance AMP Ads Extension.

After downloading Advance AMP Ads Extension follow the below given steps.

1. Go to AMP settings > select Advance AMP ADs as you can see plenty of Ad Options in this Extension plugin.

2. I am choosing Incontent Ad #1,  for better understanding the Use of  DFP Ads in AMP.

  1. Turn ON Incontent Ad #1
  2. Choose Ad Network. Here I am choosing DoubleClick (DFP) because I want to show DFP Ads.
  3. Choose Where do you want to show Ads? Here I want to show Ads After 50% of the content.
  4. Width & Height. These two are Mandatory fields.
  5. Finally Data Slot. Data AD Slot is a Unique Ad Id which is available inside the Ad code.

How to Embed Instagram Images & Videos in AMP

It is easier to show Instagram Embeds in AMP version of your website.

To Embed Instagram Images & Videos, Simply copy and paste the URL of your Instagram Image / Video. You need not to use any plugin to Embed Instagram Images & Videos

For Ex:

  1. Open any Instagram post and Copy the URL of the Post

    Copy Instagram image URL
  2. Go to WordPress Dashboard > All Posts > Add New > While creating post simply paste Copied Instagram Post URL

    paste instagram post URL
    paste Instagram post URL
  3. Let’s see how it looks after publishing.
    embedded successfully on desktop website
    embedded successfully on desktop version of your website

    you can see Instagram Post successfully Embedded on desktop version of your website.

  4. Let’s see how it looks in AMP version of your website.
    looks perfectly embedded in AMP version
    looks perfectly embedded in AMP version

    you can see Instagram post successfully embedded even in AMP version of your website.

Which means you need to use plugins/complex codes to Embed Instagram Posts or Videos.

You can simply Copy & Paste Instagram post URLs to Embed in your website, which shows up even in AMP version of your website.

PS: The Same Method applies for Instagram Videos As well