A Guide To Use AMP With WordPress Websites

A key benefit of converting PSD to WordPress or migrating from other formats is that you get access to a platform ideal for creating a user-friendly interface. The user experience of an interface can be enhanced if you know how to use AMP with WordPress websites. The initiative by Google to speed up websites on mobile devices was started to improve the experience of mobile users. The search engine giant has also started mobile first indexing of interfaces. All these developments indicate that website owners must ensure that their interfaces are designed for optimum performance on smart devices. Incorporating AMP, therefore, becomes vital for WordPress users. In this article, we will discuss what exactly is AMP and how it can be integrated with WordPress interfaces.

What Is AMP?

The Accelerated Mobile Pages is an open-source project supported by Google. It is a library based on existing platforms which enables the creation of fast-loading web pages. The search engine giant discovered that a majority of users abandoned a page that loaded in more than 3 seconds. This prompted it to create the AMP project which is supported by multiple technological platforms and compatible with major browsers. AMP uses only the necessary HTML and JavaScript code to create a stripped down version of an existing page. This enables the page to load quickly on mobile devices.

Basic Components Of AMP

There are three basic components of an AMP page:

  1. AMP HTML: Most of the AMP tags are the same as regular HTML tags. However, a few of them are custom AMP tags which help in implementing the code across all browsers.
  2. AMP JS: This library makes all external resources asynchronous so that every element is rendered perfectly. In fact, AMP JS is a collection of the best practices for creating fast web pages.
  3. AMP Cache: It is a proxy-based content delivery network which calls, caches, and delivers all valid AMP elements. AMP Cache comes with an in-built validation mechanism.

How To Set Up AMP In WordPress?

WordPress users can take the following steps to integrate AMP in their interfaces:

Step 1: Install The Official AMP Plugin

Most tasks in WordPress can be easily conducted through plugins and setting up AMP is no different. The first step is to install the plugin on your interface. The AMP plugin is the official tool provided by the platform for the purpose. It is an open source project supported by Automattic, the group behind WordPress. Access the admin dashboard of your website and go to “Plugins> Add new”.  Type the name of the plugin in the search field and then download its installation. Activate the tool and then move to the next step.

Step 2: Customize The Appearance

You will now have to modify the settings to customize the appearance of the web pages on mobile devices. After activation, navigate to “Appearance > AMP” in your dashboard. Click on “Design” and configure the settings to personalize the interface. You have the option to choose a shade for the header text. There is also the option to modify the header background and link color. You can also choose the color scheme for the entire website. However, there are only two options- light and dark, for making the selection. Moreover, the website’s logo or icon will be displayed provided the theme supports this function. Click the “Publish” button on the top of the page after making the changes.

Customize The Appearance

Users can also choose whether they want to display posts, pages or both in the mobile version. Return to your admin panel and access “AMP > General”. There you will come across the options for “Post Type Support”. Make the selection and click the “Save Changes” tab at the bottom of the page.

Customize The Appearance

This completes one phase of the process to use AMP with WordPress websites. You can check the pages on a mobile device. Add “amp” to the URL in the following manner:

http://wxyz.com/2018/11/blog-post/amp/

Step 3: Check Website Performance Through Google Search Console

Users would want to check the performance of their pages after the implementation of AMP. They can use the Google Search Console for this purpose. However, it will be some time before Google indexes the AMP page and the relevant data appears in the Console. In order to quickly view the assessment, you can use the Chrome validation procedure along with the Console. Go to an AMP page created after the activation of the plugin. Simply add the following term at the end of the page’s URL:

#development=1

Open developer tools of the Chrome browser by clicking “Control+Shift+I”. This will open the mobile version on your desktop. Refresh the page and you will be greeted with a success message or a list of issues that need attention. Fix the issues to complete the validation process. This is essential to assess your interface’s performance after AMP incorporation.

Step 4: Validate The Schema Markup

The main objective behind using AMP is to ensure the website is indexed and ranked easily by Google. You will need to validate the schema markup of all the AMP pages to improve their chances of appearing prominently in search results. The Structured Data Testing Tool by Google is a good service for checking pages for valid schema markups. Users can also take Google Analytics’ help to track their AMP pages’ performance. The plugin does not activate the service by default. Go to “Plugins> Editor> Select AMP”. Add the following snippet at the end of the code:

Validate The Schema Markup

Do not forget to insert your Google Analytics Property ID in place of the ID shown in the above image. Again validate all the AMP pages and then you can easily track their performance through Google Analytics. This concludes the process of setting up AMP on WordPress websites.

Conclusion

People must know how to use AMP with WordPress websites as it has important SEO benefits. The page loading speed will be faster ensuring a good experience to mobile users. However, website owners must make a thorough assessment of their interfaces and requirements before implementing the change.

jacobgraves

Jacob Graves is a Sr. WordPress Developer at HireWPGeeks Ltd, a company that provides html to wordpress theme in a convenient manner. He is a passionate writer and loves to share Wordpress and SEO related tutorials.

Leave a Reply

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