Setting AMP for WordPress site – Accelerated Mobile Pages

At WantExtra, we are bound to present you most useful topics which will enhance your online business. This time again we have created the most strongest content of its kind on Internet, about implementing Google AMP (Accelerated Mobile Pages).

What is Google AMP?

Accelerated Mobile Pages or AMP is an open source project created by Google to improve performance of web pages by making them load faster on mobile devices.

Google AMP for WP Accelerated mobile pages WordPress article image result

So by tweaking the existing coding structure of your web page according to guidelines in AMP project given by Google, we can make our web pages as AMP pages and can  also rank better in Google searches. The AMP pages created are well suited for SEO and will never hurt your existing SEO.

We have already discussed that the page speed is a major factor which is considered by Google for indexing you in higher search results.

In AMP implementation, normal web page is converted to appropriate mobile format web page which can load faster, by removing unnecessary JavaScript and CSS codes.

AMP project has set certain coding standards to convert web pages to AMP page structure. Also, Google has public AMP URL testing tool where you can test your AMP pages validation and see the errors if found.

Google Amp test tool image result

Accelerated Mobile Pages or AMP uses the minimal possible HTML and JavaScript codes to load. The AMP compatible pages are hosted on Google’s AMP cache. In March 2017, CloudFlare launched AMP cache to serve cached AMP pages for websites on its network.

So when you click an AMP link from Google search result, it loads instantly. The minimal code makes the page loading time very less while rendering pages on user device.

Here is the official Google video depicting the definition and importance of AMP pages

 

Importance of switching to Accelerated Mobile Page

In February 2017, Adobe reported that about 7% of total web page traffic was on AMP pages in US.

From beginning, Google has kept user experience to top priority, and has given the best search results for every query made on it. Targeting your mobile users with AMP web pages will boost the user experience to multiple folds.

WordPress.com was one of the leading collaborators in AMP project along with Twitter.

Also, as of January 2018, WordPress was used by more than 29.4% of the top 10 million websites. Due to its popularity, we have got some WordPress plugins to convert our web pages to AMP pages. The users coming through desktop will see the normal web page of your website but the user coming from mobile devices will see AMP pages with better loading speeds of your website.

 

Advantages of Accelerated Mobile Pages or AMP

Reference: CNBC (English News Channel) reported a 387% decrease in mobile page load time for AMP Pages over non-AMP pages.

  1. AMP pages have very less amount of HTML and JavaScript codes. So will load way faster.

Disadvantages of Accelerated Mobile Pages or AMP

  1. As of now, AMP technology is still in implementation by various webmasters and hence, is having less support question and answers over Internet.

 

How to setup AMP on WordPress

After lots of overnight research, we at WantExtra, started using AMP for WP plugin. This plugins is the best AMP plugin which integrates with your WordPress website seamlessly and activates AMP feature just by one click.

Advantages of AMP for WP plugin

  1. Can customize the ads position in AMP pages. (We already discussed AMP pages uses minimal HTML and JavaScript codes. To show ads, we need to add ad codes according to AMP criteria)
  2. At the time of publishing this post, this plugin only supports AdSense ad code integration in AMP pages.
  3. You can choose theme in AMP implementation.
  4. Show/hide comment section which is not much necessary to load each time user comes on your pages.
  5. Can control more SEO settings which will boost your AMP page to rank higher in Google Search Results.

 

NOTE: This plugin is most customizable and under regular new releases and the options available with this plugin may increase with time change. But it is one stop solution for implementing AMP pages for WordPress.

The major advantage with AMP for WP, is the redirection for mobile users to AMP pages will be automatically taken care by plugin. So you can switch back to your normal WordPress website just by disabling this plugin.

WantExtra has migrated its mobile responsive pages to AMP pages because we were getting about 65% of total monthly traffic only through mobile phones.

There are more AMP plugins for WordPress website, but you will be unable to customize your AMP pages according to your needs in those plugins. My recommendation is to use AMP for WP.

 

Setting Up Accelerated Mobile Pages or AMP in WordPress

  1. Install and activate AMP for WP plugin. See our step by step guide to install plugin.
  2. Click on AMP logo on left panel from WordPress dashboard.
  3. Expand Settings.

AMP for WP plugin Setting Menu Image Result WordPress

Here you can select theme for your WordPress AMP pages which is not available with many other plugins.

I will explain you all the major sections of AMP for WP plugin very neatly in order to make you master in AMP pages implementation for your WordPress sites.

The below subheading are the sub menu of this plugin explaining its importance and use for your WordPress web pages.

Settings -> General
AMP for WP plugin General Settings image result amp WordPressYou can add logo for your AMP pages and enable AMP views for pages, posts, homepages, etc separately just by toggle of button.
Settings -> Advertisement
Setting AdSense codes with AMP for WP image result amp WordPressYou can create mobile ad codes specific for your AMP pages and you can place those ad codes in this section. It is very easy and efficient. The ad codes existing or placed on regular web page will get separated from the ad codes you place here for your AMP pages, automatically.
It means that if you placed your ad code previously for your web page, then it will be not shown on AMP pages. Since AMP pages are shown on mobile phones, its better to place mobile ad codes for AMP for better user experience and more conversions.Create AdSense Ad codes for mobile and place the ad codes in this section like the image shown below. You are now good to go.

NOTE: The mobile ad code which you specifically generate for your AMP pages, loads faster along with AMP page. Sometimes, if user is on slow network, then your content would have loaded but your ads loading takes time. This results in less ads impressions. It is a loss for you, if you are using AdSense because AdSense ads pays for ads impression too.

Settings -> SEO

If you are using Yoast plugin, then it’s a big advantage while integrating AMP pages for your website.

If you release a post then you have an option to select meta tags and description of your choice. The articles containing tags are said to have good On Page SEO. To ensure your tags implemented for your posts also loads on AMP pages for better user experience, you can show the tags saved with Yoast for your AMP pages.

Settings -> Performance

The minified pages loads faster because they are compressed and doesn’t takes much bandwidth to load. So turning minify AMP page ON, ensures that your AMP pages loads more faster on small devices.

Settings -> Analytics

AMP for WP plugin analytics tracking code section image result amp WordPressI hope you use Google analytics for your website to track your site visibility in Google searches. The analytics code which you must have added between your regular <head> and </head> tags, now resides on normal web pages of your site but not on AMP version.

So, copy the main tracking code from your Analytics code and then paste it here. You can also track your AMP pages by integrating tracking code from Piwik Analytics, Segment Analytics, Quantcast Measurement, comScore, Effective Measure, StatCounter, Histats Analytics, etc.

Settings -> Structured Data
Setting Structured Data in AMP for WP image result amp WordPressThis is very important setting to customize according to the pages you own. The Structured data is the data which helps search engine bots to better understand the type of content available on your pages.

Structured data is added directly to a page’s HTML markup. Search engines bots use structured data to generate rich snippets, which are small pieces of information that will then appear in search results.

For example, if you have a post about product but you have not selected any Structured data for your page, then Google bots might not understand the relevant sections of your pages and you might miss the chance of getting higher ranking in google search results.

If you have a news article on your blog, and you select structured data type as “news“, then search engines bots can better understand your content. This is because on selecting “news” structured data,  your HTML codes gets organized automatically, so that search engine bots get better understanding of the news information you want to present.

Settings -> Notice Bar
AMP for WP plugin notice bar option image result amp WordPressYou can show cookies notification or other notifications by help of this Setting. Note that the code written for cookies notification on your web pages are greater in size when compared with AMP code. So AMP provides you solution to just switch ON and OFF the notification with adding very small amount of codes, good for loading your web pages faster.
Settings -> Comments
AMP for WP plugin comment section image result amp WordPressYou can enable/disable your comment section view, which needs extra codes to load. Disabling it will reduce the web page size and your pages will load faster.

Remember that every user coming to your page doesn’t make a comment. If a user want to comment, you can still show the link to use non-AMP version of your web page where comment section will be available automatically.

You can turn Facebook, Disqus and WordPress theme integrated comment just by flick of buttons.

Settings -> Advance Settings
AMP for WP plugin Advance Setting image result amp WordPressYou can enable/disable the automatic redirection of your mobile users to your AMP pages. If the automatic redirect is enable, the user visiting your site from mobile devices will automatically get redirected to AMP version of your site.
Design -> Theme

You can select a theme for your AMP pages for good User experience along with faster page loads.

NOTE: The responsive web pages takes more time to load on mobile devices when compared with AMP pages.

 

Now, you can explore the entire settings further. We covered all the major settings which were crucial for your website. If you still have any doubts regarding any other AMP settings then you are most welcome to ask in comment section.

After doing all these changes, you need to navigate to your WordPress dashboard Settings and refresh your Permalinks so that the AMP pages changes can take affect throughout your site.

NOTE: This AMP plugin adds “/amp” at last of every URL of your site automatically. Whenever an AMP compatible device is detected, the page requested is redirected to “…/amp” slug of your existing URL. To enable this feature, we should refresh our Permalinks settings.

WordPress dashboard Permalinks section image result amp

  1. Go to Settings.
  2. Click Permalinks.
  3. Click Save changes.

If you find this article helpful, then share it with your groups and friends to make them aware of this interesting topic so that they don’t loose any of their users because of more loading time of your site. Covert your site into AMP pages today.

Summary
Seting AMP for WordPress site - Accelerated Mobile Pages
Article Name
Seting AMP for WordPress site - Accelerated Mobile Pages
Description
At WantExtra, we are bound to present you most useful topics which will enhance your online business. This time again we have created the most strongest content of its kind on Internet, about implementing Google AMP (Accelerated Mobile Pages).What is Google AMP?Accelerated Mobile Pages or AMP is an open source project created by Google to improve performance of web pages by making them load faster on mobile devices.So by tweaking the existing coding structure of your web page according to guidelines in AMP project given by Google, we can make our web pages as AMP pages and can  also rank better in Google searches. The AMP pages created are well suited for SEO and will never hurt your existing SEO.We have already discussed that the page speed is a major factor which is considered by Google for indexing you in higher search results.In AMP implementation, normal web page is converted to appropriate mobile format web page which can load faster, by removing unnecessary JavaScript and CSS codes.AMP project has set certain coding standards to convert web pages to AMP page structure. Also, Google has public AMP URL testing tool where you can test your AMP pages validation and see the errors if found.Accelerated Mobile Pages or AMP uses the minimal possible HTML and JavaScript codes to load. The AMP compatible pages are hosted on Google’s AMP cache. In March 2017, CloudFlare launched AMP cache to serve cached AMP pages for websites on its network.So when you click an AMP link from Google search result, it loads instantly. The minimal code makes the page loading time very less while rendering pages on user device.Importance of switching to Accelerated Mobile Page-In February 2017, Adobe reported that about 7% of total web page traffic was on AMP pages in US.From beginning, Google has kept user experience to top priority, and has given the best search results for every query made on it. Targeting your mobile users with AMP web pages will boost the user experience to multiple folds.WordPress.com was one of the leading collaborators in AMP project along with Twitter.Also, as of January 2018, WordPress was used by more than 29.4% of the top 10 million websites. Due to its popularity, we have got some WordPress plugins to convert our web pages to AMP pages. The users coming through desktop will see the normal web page of your website but the user coming from mobile devices will see AMP pages with better loading speeds of your website.Advantages of Accelerated Mobile Pages or AMP-Reference: CNBC (English News Channel) reported a 387% decrease in mobile page load time for AMP Pages over non-AMP pages.AMP pages have very less amount of HTML and JavaScript codes. So will load way faster.Disadvantages of Accelerated Mobile Pages or AMP-As of now, AMP technology is still in implementation by various webmasters and hence, is having less support question and answers over Internet.How to setup AMP on WordPress-After lots of overnight research, we at WantExtra, started using AMP for WP plugin. This plugins is the best AMP plugin which integrates with your WordPress website seamlessly and activates AMP feature just by one click.Advantages of AMP for WP plugin-Can customize the ads position in AMP pages. (We already discussed AMP pages uses minimal HTML and JavaScript codes. To show ads, we need to add ad codes according to AMP criteria).At the time of publishing this post, this plugin only supports AdSense ad code integration in AMP pages.You can choose theme in AMP implementation.Show/hide comment section which is not much necessary to load each time user comes on your pages.Can control more SEO settings which will boost your AMP page to rank higher in Google Search Results.NOTE: This plugin is most customizable and under regular new releases and the options available with this plugin may increase with time change. But it is one stop solution for implementing AMP pages for WordPress.The major advantage with AMP for WP, is the redirection for mobile users to AMP pages will be automatically taken care by plugin. So you can switch back to your normal WordPress website just by disabling this plugin.WantExtra has migrated its mobile responsive pages to AMP pages because we were getting about 65% of total monthly traffic only through mobile phones.There are more AMP plugins for WordPress website, but you will be unable to customize your AMP pages according to your needs in those plugins. My recommendation is to use AMP for WP.Setting Up Accelerated Mobile Pages or AMP in WordPress-1.Install and activate AMP for WP plugin. See our step by step guide to install plugin.2.Click on AMP logo on left panel from WordPress dashboard.3.Expand Settings.Here you can select theme for your WordPress AMP pages which is not available with many other plugins.I will explain you all the major sections of AMP for WP plugin very neatly in order to make you master in AMP pages implementation for your WordPress sites.The below subheading are the sub menu of this plugin explaining its importance and use for your WordPress web pages.Settings -> General-You can add logo for your AMP pages and enable AMP views for pages, posts, homepages, etc separately just by toggle of button.Settings -> Advertisement-You can create mobile ad codes specific for your AMP pages and you can place those ad codes in this section. It is very easy and efficient. The ad codes existing or placed on regular web page will get separated from the ad codes you place here for your AMP pages, automatically.It means that if you placed your ad code previously for your web page, then it will be not shown on AMP pages. Since AMP pages are shown on mobile phones, its better to place mobile ad codes for AMP for better user experience and more conversions.Create AdSense Ad codes for mobile and place the ad codes in this section like the image shown below. You are now good to go.NOTE: The mobile ad code which you specifically generate for your AMP pages, loads faster along with AMP page. Sometimes, if user is on slow network, then your content would have loaded but your ads loading takes time. This results in less ads impressions. It is a loss for you, if you are using AdSense because AdSense ads pays for ads impression too.Settings -> SEO-If you are using Yoast plugin, then it's a big advantage while integrating AMP pages for your website.If you release a post then you have an option to select meta tags and description of your choice. The articles containing tags are said to have good On Page SEO. To ensure your tags implemented for your posts also loads on AMP pages for better user experience, you can show the tags saved with Yoast for your AMP pages.Settings -> Performance-The minified pages loads faster because they are compressed and doesn't takes much bandwidth to load. So turning minify AMP page ON, ensures that your AMP pages loads more faster on small devices.Settings -> Analytics-I hope you use Google analytics for your website to track your site visibility in Google searches. The analytics code which you must have added between your regular <head> and </head> tags, now resides on normal web pages of your site but not on AMP version.So, copy the main tracking code from your Analytics code and then paste it here. You can also track your AMP pages by integrating tracking code from Piwik Analytics, Segment Analytics, Quantcast Measurement, comScore, Effective Measure, StatCounter, Histats Analytics, etc.Settings -> Structured Data-This is very important setting to customize according to the pages you own. The Structured data is the data which helps search engine bots to better understand the type of content available on your pages.Structured data is added directly to a page's HTML markup. Search engines bots use structured data to generate rich snippets, which are small pieces of information that will then appear in search results.For example, if you have a post about product but you have not selected any Structured data for your page, then Google bots might not understand the relevant sections of your pages and you might miss the chance of getting higher ranking in google search results.If you have a news article on your blog, and you select structured data type as "news", then search engines bots can better understand your content. This is because on selecting "news" structured data,  your HTML codes gets organized automatically, so that search engine bots get better understanding of the news information you want to present.Settings -> Notice Bar-You can show cookies notification or other notifications by help of this Setting. Note that the code written for cookies notification on your web pages are greater in size when compared with AMP code. So AMP provides you solution to just switch ON and OFF the notification with adding very small amount of codes, good for loading your web pages faster.Settings -> Comments-You can enable/disable your comment section view, which needs extra codes to load. Disabling it will reduce the web page size and your pages will load faster.Remember that every user coming to your page doesn't make a comment. If a user want to comment, you can still show the link to use non-AMP version of your web page where comment section will be available automatically.You can turn Facebook, Disqus and WordPress theme integrated comment just by flick of buttons.Settings -> Advance Settings-You can enable/disable the automatic redirection of your mobile users to your AMP pages. If the automatic redirect is enable, the user visiting your site from mobile devices will automatically get redirected to AMP version of your site.Design -> Theme-You can select a theme for your AMP pages for good User experience along with faster page loads.NOTE: The responsive web pages takes more time to load on mobile devices when compared with AMP pages.You can explore the entire settings further. We covered all the major settings which were crucial for your website. If you still have any doubts regarding any other AMP settings then you are most welcome to ask in comment section.After doing all these changes, you need to navigate to your WordPress dashboard Settings and refresh your Permalinks.1.Go to Settings.2.Click Permalinks.3.Click Save changes.
Author
Publisher Name
WantExtra
Publisher Logo
Setting AMP for WordPress site – Accelerated Mobile Pages
4.5 (90%) 12 votes

Apoorv Sukumar

A blogger and a Software Developer, exploring trending technologies in market. A philomath, web explorer, who learns many things and want to deliver them to the world. Founder of wantextra.com

You may also like...

1 Response

Leave a Reply

Your email address will not be published. Required fields are marked *