Beginner’s Guide on Google AMP in WordPress

Beginner’s Guide on Google AMP in WordPress

With the constant development of the mobile devices, more and more people choose to browse online using their smart phones at anytime and anywhere. In this case, the mobile optimization is one of the important steps when setting up and running your site. This time, we’d like to give you a beginner’s guide on Google AMP in WordPress. This mainly concerns about the performance optimization.

In fact, when it comes to the mobile optimization, you can consider a lot of aspects. For instance, you should make sure the responsive design and install the mobile plugins to make the site mobile friendly. But actually, the boosting of page loading speed is the key you should achieve. The fast page loading directly influences your online traffic and user experiences. Here, you can check the following parts of how to make use of the Google AMP project to achieve this.

Something You Should Know about the Google AMP Project

Launched in the year of 2015, the Google AMP project is a special initiative released by Google. With it, you can accelerate and improve the loading speed of your webpages on the mobile devices. As many mobile users feel slow and irritating to read online, this project can erase the annoyance effectively.

Note that there are three main parts for this Google project.

  • AMP JS – The JavaScript library for the fast rendering of the pages.
  • AMP HTML – The HTML file with the specific restrictions, elements, tags and items.
  • AMP Cache – The content delivery network that is proxy based.

In order to ensure that the AMP optimized pages can load as fast as possible, this project works out based on the following principles.

  • The Google project only allow the asynchronous scripts.
  • All the resources will state the size using the HTML so that AMP can load their layout without waiting for the download.
  • This project does not allow any extension mechanisms to block the rendering of your pages.
  • The Google AMP will keep all the third party JavaScript out of the key path.
  • The font triggering is 100% efficient.

Frankly speaking, if your website has the mobile version and you want to get more mobile users, you can try this Google project for the faster loading speed.

Google AMP

How to Use Google AMP in WordPress

There is a useful WordPress plugin of AMP you can use to enable the Google AMP function to your site. This tool will generate the AMP version of all your pages and posts automatically. This means with the installation of this plugin, your website webpages are all accessible with the “/amp/” suffix to the end of the link. For instance, if the domain name of your site is “https://yourdoman.com”, the AMP version can be available by typing the link of “https://yourdoman.com/amp/” in the address bar.

Set Up the Appearance of the AMP Pages

Now, you can move to the AMP part by clicking the Appearance tab from the WordPress admin. Here, you can check how your pages or blog posts can be displayed on the mobile devices with the AMP.

Set Up AMP Appearance

Here, you have the freedom to change the color schemes for the header text, the header background and the link. In addition, you can choose the main color scheme between the choices of Dark and Light. After that, you simply need to click the Save button.

AMP Customization

Now, you can check the AMP version of your blog post with the “/amp/” suffix using the web browser. For mobile users, the AMP version of your whole site will appear automatically with the improved overall performance. Note that for the faster page loading, this project may strip out your site design based on the design configuration you have set up previously. In this case, some less critical components may not display, such as the ads and the sidebar.

In addition, it is possible that you may see the 404 error when checking the AMP version. If so, you only need to refresh the permalink structure of your site. For this, you should access the Settings > Permalinks page and click the Save Changes button without changing anything.

Looking for More Customization Options?

Frankly speaking, the AMP plugin ensures the most basic functions only. If you are looking for more customization options of your accelerated mobile webpages, you can also consider the following two options based on your needs.

Option 1 – Glue for Yoast SEO & AMP

The Glue for Yoast SEO & AMP plugin is an add-on tool of Yoast SEO. In this case, if you use the Yoast SEO WordPress plugin for the search engine optimization of your website, you can consider this option. With it, you can get the technical implementation for the AMP customization based on the Yoast SEO metadata properly.

After the activation, you can click the SEO > AMP button for the further configuration of your AMP pages.

Glue for Yoast SEO & AMP

By default, the AMP plugin does not support for the post types of Pages and Archives. However, with this add-on tool, you can apply the function to Pages and Media.

From the Design part, you can upload the AMP icon or the default header image, which will appear when a blog post does not have the featured image associated. In addition, you can change the colors for the AMP header, post title, post content, post meta information, link text, link hover and block quotes. Also, you can showcase the underline for the links or not.

AMP Design

Lastly, this add-on plugin works seamlessly with the Google Analytics. In this case, you can enter the exclusive code of your Google Analytics account for the tracking of the AMP version for your site.

Option 2 – Custom AMP

The Custom AMP plugin is another effective plugin that allows more customizing and template options for the official AMP WordPress plugin. With it, you can do the following things.

  • You can upload the logo with the 32×32 pixels of size. This website logo will only appear when people check your site with the AMP version using the mobile devices. Frankly speaking, you’d better keep the logo the same one no matter which version your site is entered by visitors. Also, you can upload the exclusive image for the metadata, featuring the 60×600 pixels.
  • The AMP plugin already strips out your website overall design for the sake of the better performance. However, with this add-on tool, you can optionally choose to showcase some items based on your needs. For instance, you can display the featured images, the post comments, the special area of Related Posts, the WooCommerce tool and the Right-to-Left Direction.
  • If your website template is not responsive, your post content may showcase in a different way as it displays on the web browser. In this case, to show your web content properly, you can set the custom content width so that all your words can be checked perfectly on the mobile phones.
  • For the better navigation of your site on the mobile, you can also display the menu bar. Here, if you have multiple navigation bars, you need to choose the primary one or your preferred one from the dropdown list.

Custom AMP Panel

Now, as all the customization options are set up properly, your site can be shown on the phones with the best performance and your preferred AMP design.