Instructions on how to install AMP for WordPress website


how-to-install-amp-for-website-wordpress

How to install AMP for WordPress website - Because mobile phones are quickly dominating the way users consume content on the web, it is imperative to optimize the website with mobile devices.


According to Google, page load speed is an important ranking signal, which is why every website owner tries to get rid of the millisecond speed score. However, optimizing page loading speed for mobile devices is a challenge for everyone.


Google, the current standard for search engine optimization, launched the Mobile Page Acceleration (AMP) project in February 2015. The idea is to provide a set of standards that the website uses to reduce load time. page, thus improving the user experience for smartphones and similar devices.


Now what am I talking about AMP? The same way you configure AMP for WordPress website.


how-to-install-amp-for-website-wordpress


What is AMP?


The AMP project is an open source project of Google that helps provide quick distribution of website content. In addition to speeding up page loading, AMP also improves content navigation in mobile devices.


In essence, the AMP page is the barebone website that retains all the important content elements when distributing. AMP bookmarking is different from regular HTML code in websites, to reduce page size, it imposes restrictions on the use of JavaScript / CSS.


Let's take a look at AMP versus non-AMP website:


how-to-install-amp-for-website-wordpress


When compared to standard HTML markup, AMP improves page load speed by up to 85%, as demonstrated by several tests.


how-to-install-amp-for-website-wordpress


A survey showed that nearly 40% of visitors leave the website takes more than three seconds to load. This means that the website works faster, especially with mobile devices, is an essential element with conversion rate optimization. Certain AMP-enabled websites are better positioned than other websites in this respect.


how-to-install-amp-for-website-wordpress


The goal from the AMP site is to load the website immediately, usually 90% faster than the current standard. Due to this fact, the mobile user experience varies significantly, according to the study, improving bounce rate.


how-to-install-amp-for-website-wordpress


Despite its simple format, the AMP project also introduces capabilities including images, videos, object tracking scripts as well as advertisements.


How does AMP work?


AMP uses its own component, for example: card replacement HTML standard. This agrees that the browser sets the download priority by device.


AMP also uses the expanded version with certain tags, such as Facebook or Twitter tags displaying interactions specific to the platform.


how-to-install-amp-for-website-wordpress


How are AMP pages built?


The AMP framework has the following three core components.


how-to-install-amp-for-website-wordpress


  1. AMP HTML: The website is written in simplified HTML, in which all such standard HTML elements slow down the page to be replaced with a simpler version. For example, the card The standard is replaced with an equivalent card.

  2. AMP JS: third-party JS scripts are prohibited, except in special cases using extremely fast, predefined libraries.

  3. AMP Cache: Google maintains the AMP page archive so that page loading speed is further optimized through the cached version.

You also add additional features to the website with ready-to-use components categorized into Integration, Extensibility, and Testing.


how-to-install-amp-for-website-wordpress


Advantages of AMP


According to SEO experts, AMP provides important benefits such as:


  • Faster page load time.

  • Decreasing bounce rate, frequency of skip sessions improves significantly.

  • AMP guarantees significantly better visibility at the search engine results page (SERP).

  • AMP supports advertising, paid search. The goal is to open the advertisement page faster than the AMP non-ready page.

Disadvantages of AMP


Although AMP looks great, the process is straightforward. At a minimum, it has the following problem:


  • AMP proves difficult to implement or validate.

  • Because JavaScript / CSS is limited in AMP, some features, plugins or widgets and other dynamic scripts do not work on mobile devices. However, the AMP guide covers the use of custom JavaScript.

  • It is compatible with a few limited platforms.

However, even though the issue was mentioned, experts admit that AMP is better positioned to rank higher in the SERP, website owners see increased traffic from mobile search.


See more: How to add related posts in WordPress


Why (and when) to use AMP?


AMP is equivalent to a responsive website optimized with two advantages:


  1. AMP agreed website appears in Google Top Stories

  2. They provide website optimized version

The AMP page is ideal for pages focused on content that requires additional optimization to display on smartphones. AMP speeds up the distribution of this site to all devices.


However, you have a choice between.


  • Responsive website for desktop, mobile / tablet and AMP version for Google mobile search results.

  • Website for desktop with AMP version for mobile phone

  • Website responsive for desktop, mobile devices / tablets

As long as the website is correctly optimized for performance, accepting Rich Snippets, no problem if you are not using AMP. This avoids many SERP listings that are confusing to users.


For example: At the website with the AMP version for mobile devices, the website is responsive for desktop visitors.


how-to-install-amp-for-website-wordpress


Back in December 2018, AMP project contributors announced the AMP plugin for WordPress that helps to automatically create the AMP website version. When writing this article, the accelerated mobile site WordPress plugin only works for posts, however future versions are also planned to work with the cached page.


The plugin configuration is very simple, creating an AMP version for the post by adding / amp to the URL. The Google Mobile Bot will then index the URL and display the AMP website version in the search results.


how-to-install-amp-for-website-wordpress


Install AMP for WordPress


If you have decided to create an accelerated Mobile Page (AMP) version of the WordPress website, you must install and activate the AMP plugin for WordPress.


Go to Plugins → Add New → search for “AMP for WordPress” → click Install Now, then activate the plugin.


how-to-install-amp-for-website-wordpress


Once the plugin is activated, you will see the AMP option in the control panel.


In the General section, you have the Model / Model mode option supported. By default, you will see the Reader and Posts options are enabled. However, you only need to enable / disable this option and then click the Save Changes button.


how-to-install-amp-for-website-wordpress


Once you have configured the template settings, go to Control Panel → Interface → AMP. You view the rendering of the website at mobile devices.


how-to-install-amp-for-website-wordpress


You change the website title background color. Note plugin occupy logo or favicon when interface agrees. When done, don't forget to save changes!


You now view all AMP content by adding / amp / to the end of the URL.


how-to-install-amp-for-website-wordpress


AMP for SEO


When you check the page source, you will see the following two lines:


how-to-install-amp-for-website-wordpress


The standard URL will avoid duplicate content between the regular page and the AMP page and then notify Google the desktop version is the original. The following script is used to call the AMP JS library.


how-to-install-amp-for-website-wordpress


Note: if you get a 404 error when viewing a WordPress AMP site, go to Settings → Permalinks, just click Save Changes without making any changes.


Verify AMP page


If you want to check AMP validity, insert the page URL and then click the Test Run button.


how-to-install-amp-for-website-wordpress


Customize AMP for WordPress sites


WordPress AMP plugin only contains basic customization options. Some other plugins agree that you go beyond the basic options. For example, if you are using Yoast SEO, you need to install and activate an extension called Keo for Yoast SEO & AMP.


how-to-install-amp-for-website-wordpress


Once the plugin is activated, go to the left menu bar in SEO → AMP. At the Post Type tab, you agree to AMP for the article, page / media.


how-to-install-amp-for-website-wordpress


On the Design tab, choose different colors, download the default logo / header image when the article does not have its own image.


how-to-install-amp-for-website-wordpress


In the Analytics tab, you enter the Google Analytics ID.


how-to-install-amp-for-website-wordpress


Note: Don't forget to save changes before moving the tab.


Some plugins agree that you include the module in your WordPress AMP site such as related posts, footer widgets, social networks. If you choose to use this module, don't forget to authenticate the AMP site once installed.


Conclude!


Hopefully the article helps you understand the dynamics and the Accelerated Mobile Pages function for WordPress. Now it's your turn to contribute to this article. You share it on social networks and then think. Do you find it useful or related to SEO or website optimization?


Tutorial : Website Making Method is easy


If you have questions, ask in the comments