According to a study by Google, over 50% of search queries around the world are made via mobile devices. Therefore, ensuring that your WordPress site loads quickly (and looks good) should be a priority. Fortunately, the Google Accelerated Mobile Pages (AMP) initiative greatly simplifies this task. In this article, we will explain how to implement AMP in WordPress in two ways:
- Using the AMP plugin for WordPress
- Through the AMP for WP – Accelerated Mobile Pages plugin
We will also explain what Google AMP WordPress is and how to validate it at the end of the installation process. Immergiamoci!
What is AMP for WordPress (and how can your site benefit)?
Google Accelerated Mobile Pages (AMP) is an open source library that helps you create fast, smooth and small versions of your web pages that fit perfectly to mobile devices. Google AMP is extremely intuitive and is based on existing platforms and frameworks . Moreover, it is completely compatible with WordPress.
In short, Google AMP allows you to create a duplicate of your site using AMP HTML. This process eliminates most of the elements that cause your site to load slowly (JavaScript, third-party scripts, etc.). Google AMP then further analyzes and flattens your site for even faster loading times. The result will be similar to the following:
Google AMP offers many advantages, although it also has some potential disadvantages. Let’s explore them both. Benefits include:
- A boost to search engine optimization (SEO). The most obvious advantage offered by Google AMP is the increase in speed. Since page speed is a critical factor when it comes to search engine placement (SERP), this can help make your site more visible. Google AMP will also ensure that your site’s pages appear in the Google News carousel, which has priority over above-the-fold placement in mobile searches (further improving your SEO).
- An improved user experience. It is estimated that 33% of all potential sales fail when a website is not optimized for mobile devices. An even more worrying study found that 57% of Internet users said they did not recommend an activity with a poorly designed mobile website. Google AMP makes it easy to create easy-to-use mobile web pages to help you avoid these pitfalls.
- Better server performance. Google AMP benefits from some of Google’s main optimization features. Reduces image bandwidth usage by 50% (without affecting quality) and increases server-side rendering. By reducing the load on your server, AMP helps improve the performance of your site.
The following are associated with the use of Google AMP:
- Limitations of CSS and Javascript. Although AMP allows you to get extremely fast loading times, this can come at the expense of branding elements. AMP will remove high definition graphics, elaborate animations and other flashy elements that use CSS and JavaScript.
- Only cached pages are displayed . The high speeds of Google AMP can be partially attributed to the fact that it allows Google to view the cached versions of your web pages. For this reason, your users may not always have access to the latest version of your content.
- The advertising revenue features are limited. Although AMP Google supports ads , the process to implement them is quite complicated. It also has limited integration potential with external advertising platforms.
If these disadvantages are enough to make you pause, you may instead consider investing in a responsive web design for your site. However, if you’re looking for a quick and easy way to make your web pages beautiful and functional on mobile devices, it’s still worth considering Google AMP.
In the next section we will cover two methods to configure AMP in WordPress, with the help of some practical WordPress plugins for AMP pages.
How to implement WordPress AMP using plugins
To implement AMP Google on your site, you will need an AMP WordPress plugin . Before proceeding with one of the following methods, we recommend that you make a backup of the site.
Option 1: use the AMP plugin for WordPress
The AMP plugin for WordPress is an excellent tool if you want to configure AMP on WordPress quickly and easily. Although the default version has a minimal amount of functionality to customize the AMP configuration, the options can be extended with the help of additional plugins. We will cover this process later. For now, let’s look at how to set up the plugin.
First, select Plugins ›Add new to WordPress dashboard. Enter ‘ AMP for WordPress ‘ in the search bar and look for the right AMP plugin for WordPress. Then install it and activate it:
Then, go to the new Appearance> AMP tab in the dashboard. The AMP customization page will be displayed. Once there, select the Design tab :
Here, you can customize how you view your AMP WordPress site and preview changes before making your site active. You can adjust the text, link and background color. When you are satisfied with the changes, press Post at the top of the screen.
You can also choose whether you want posts, pages or both to be displayed on AMP WordPress. To do this, simply go back to the WordPress dashboard and go to AMP> General :
Check the boxes in Supported Templates you want to include in the WordPress AMP and click Save Changes .
You will probably notice that there are not many customization options. Fortunately, there are several plugins that you can use to extend your choices. For example, you can use Glue for Yoast SEO and AMP to integrate the popular Yoast SEO plugin into your Google AMP configuration.
Switch to Plugins ›Add new , then find, install and activate the Yoast SEO plugin:
Then do the same with the Glue for Yoast SEO & AMP plugin. So, go to SEO ›AMP in your dashboard. From there, you can select if you want to enable posts and media types to get AMP support on WordPress:
Then, press the Save changes button . You can also configure additional settings in the Design tab: you can set an icon for your AMP WordPress site, adjust the color scheme and add custom CSS:
Once again, don’t forget to save the changes at the end of the site configuration.
AMP for WordPress is an excellent plugin if you want to add basic AMP Google functionality to your site but if you want more control over the appearance of your WordPress site AMP (and the potential to further extend its functionality), the next WordPress plugin for pages AMP could be better adapted to your needs.
Option 2: Install the AMP for WP – Accelerated Mobile Pages plugin
AMP for WP – Screenshot of the WordPress plugin page for accelerated mobile pages
In addition to providing an elegant and intuitive interface for configuring your pages, this AMP WordPress plugin can be integrated with many additional tools including WooCommerce (the leading e-commerce plugin for WordPress), Alexa metrics, OneSignal push notifications and even more.
To use this AMP plugin for WordPress, we recommend accessing Plugins> Add new in dashboard. Search for ‘ AMP for WP ‘, then install and download the plugin:
Go to the new AMP tab in the WordPress dashboard. A drop-down menu will appear with sections for Settings , Design , Extensions and so on. Let’s take a closer look at the Settings option :
We recommend that you start by consulting the handy Getting Started Guide you will find on this page. It will help you to optimally set your AMP configuration in WordPress. Later, you can browse through the various options offered by AMP for WP, including:
- SEO : includes meta description settings, integration with SEO plugins, etc.
- Performance : There is a single setting to enable and disable file minimization. Minimization can further improve the speed of your site.
- Analytics : here you can set up integration with Google Tag Manager and the various analytics options.
- Comments : You can select whether you want to include WordPress, Disqus and / or Facebook comments in the WordPress AMP.
- Advanced settings : you can insert custom HTML for headers and footers, set the mobile redirection and activate and deactivate retina images.
Be sure to click Save Changes for each of the above settings after configuring them. Next, select the Design tab :
Basically, this is where you can customize the look of your AMP WordPress site. To do this, you can choose a dedicated AMP theme from the various listed in the Themes Selector drop-down menu .
After choosing a theme, you can customize its appearance. You’ll find design settings for color schemes and fonts (which are listed on the Global tab ), header and footer display options, home page sidebar options, and more. In the Social section , you can also select which social media buttons you want to display on your AMP WordPress site.
When you are satisfied with the appearance of your AMP site, you can save the changes. You can also preview them by simply browsing on Aspect> AMP :
The free version of AMP for WP contains a wide range of features. However, you can significantly improve the appearance and functionality of your AMP site with premium extensions. There are extensions for the implementation of reviews (which are perfect for products or real estate profiles), which integrate with AMP WooCommerce Pro , using custom post types and more:
Premium themes are also available for purchase. You can view them by going back to Design> Themes in the dashboard. You will find options that specifically target certain types of websites, such as news sites, magazines and so on. Furthermore, there are some exceptional multi-purpose themes:
If you want to take advantage of even more advanced features, there are a variety of Pro plans available for this plugin. ranging from the personal plan (use on a site to $ 149 per year) to the agency plan (use on unlimited sites for $ 499 per year).
How to validate your AMP WordPress site?
After configuring one of the AMP plugins in WordPress, there is still one step to do. You will need to validate your WordPress AMP to make sure it is accessible and connected from supported platforms . Validation is also a practical way to view any AMP errors for troubleshooting purposes.
A quick and easy way to perform AMP validation is to use the browser developer tools. To do this, you’ll need to open an AMP page in your favorite browser (in this example we’ll use Google Chrome). You will then need to add the following to the end of the page URL:
Once done, open your browser’s developer tools console. If there are errors, they will be highlighted in red, along with an analysis of what caused the error.
Typically, validation errors are caused by invalid prefixes, formatting, and incorrect code entries and / or illegal tags.
Another effective AMP validation method is to use the AMP Validator extension for Google Chrome and Opera :
This tool provides a simple overlap of errors (red icons) and their causes. Also, if you are running the AMP validator on a non-AMP page, a blue extension icon will appear that links you to the AMP version of that page. This feature is a useful way to evaluate elements of your site’s theme that may prevent WordPress AMP from being displayed correctly.
Conclusion
In conclusion, implementing Google AMP on WordPress can significantly improve the performance and user experience of your website. By following the steps outlined in this article, you can take advantage of the benefits that AMP offers, such as faster loading times and better search engine visibility. Additionally, integrating AMP with your WordPress site can help you stay ahead of the competition and meet the ever-increasing demand for mobile-friendly content. As mobile usage continues to rise, it is crucial for website owners to prioritize speed and accessibility. With Google AMP, you have the opportunity to enhance your website’s mobile performance and provide a seamless browsing experience for your visitors. Take action today and start implementing Google AMP on your WordPress site to unlock its full potential.
+1 8588791912 (USA),