How to Correct AMP WordPress Settings

9
AMP WordPress Settings – Based on the results of Google’s research, more than 50% of search requests around the world are made through mobile devices. Therefore, the speed of loading your WordPress site must be prioritized. To manage site speed, you can use the Google Accelerated Mobile Pages (AMP) tool.
In this article, we will discuss how to use AMP WordPress in two methods:
1. Using the WordPress AMP plugin.
2. Through the AMP plugin for WP – Accelerated Mobile Pages.
In addition to how to use, we will also discuss what AMP WordPress is and its validation method after the setup process is complete.

Understanding AMP WordPress (and its advantages)

 

Screenshot-Beranda-Utama-Google-AMP

Google AMP is an open source library that you can use to make page versions of websites faster and smoother on mobile devices. AMP is easy to use and can be installed on well-managed platforms and frameworks. In addition, Google AMP is also compatible with WordPress.
In short, Google AMP allows you to approve sites using AMP HTML. The copying process changes most of the elements that cause website loading to be slower (JavaScript, third-party scripts, etc.). After that, Google will narrow the site so that the retrieval time becomes faster. Results like this:
 sample website amp
Google AMP has its advantages and disadvantages. Here are some advantages:
• Improve SEO (Search Engine Optimization). The main advantage of Google AMP is the speed of boosting. Because page speed is the most important factor associated with ranking sites in Search Engine Results Pages (SERPs), this, of course, affects the appearance of your website in search engines. The existence of Google AMP will also make your site’s pages appear on Google News carousel, which is prioritized to appear as the top search results through mobile devices (and also improve SEO).
• Providing the best experience for the user. An estimated 33% of sales plans fail because the website is not optimized for the display of mobile devices. Even further studies found that 57% of internet users do not want to work with business websites that have a less mobile appearance. With Google AMP, you can more easily create user-friendly mobile versions of web pages.
• Improve server performance. Google AMP utilizes several Google optimization key features. The AMP reduces bandwidth usage for images by as much as 50% (without affecting image quality) and increases server-side rendering. By shortening the loading time on the server, AMP can improve site performance.
Here are Google AMP’s shortcomings:
• Cascading Style Sheets (CSS) and JavaScript restrictions. Although Google AMP can increase website loading speed, this tool can result in the loss of branding elements. AMP removes high-definition graphics, complex animations, and other striking elements that use CSS and JavaScript.
• Only displays cached pages. In fact, some of the speed that is on Google AMP allows Google to display a cached version of your webpage. Therefore, users don’t have access to open the latest version of your content.
• Ad revenue is restricted. Although Google AMP allows advertisements on the site, the process of activating the ads themselves is quite difficult. In addition, Google AMP limits external ad platforms.
If Google AMP’s shortcomings make you hesitate to use it, maybe you can choose an alternative, which is to enable responsive web design. However, if you are looking for the fastest and easiest way to change the look and function of a website to be better on a mobile device, then Google AMP deserves to be taken into account.
Next, we will discuss two ways to setup AMP WordPress, of course with the help of the Accelerated Mobile Pages WordPress plugin.

How to Setup AMP WordPress Using These 2 Plugins

To activate AMP WordPress, you need a plugin. Before proceeding to the next process, we recommend that you back up the site first.

Option 1: Use the AMP for WordPress plugin

Plugin AMP

The AMP for WordPress plugin is the right tool for quick and easy setup of WordPress AMP. Although the default version does not offer a large number of features for AMP customization on the site, you can install additional plugins. We will discuss this matter in the next section. But for now, we will only discuss how to set up the AMP for WordPress plugin.
Plugin AMP For WordPress
Open the new Appearance tab> AMP on the dashboard. You will then be directed to the AMP customizer page. Select the Design tab:
Design WordPress AMP
On this page, you can manage the appearance of AMP WordPress and review changes made before activating it on the site. You can set site text, links, and background colors. In addition, you can also choose whether or not you want to apply a dark color scheme (such as black or white) on the site. If you are sure of the changes made, click Publish above the screen.
You can also set whether you want to display posts, pages, or both or not in AMP WordPress. Enter the WordPress dashboard and select AMP> General:
Pengaturan Umum
Check the box under Post Type Supper to enter the various options that you want to display on AMP WordPress. After that, click Save Changes.
There you can see that not many customization options are offered. Fortunately, there are several WordPress AMP plugins that you can use, for example, Glue for Yoast SEO & AMP to integrate Yoast SEO plugins into AMP setup.
Open Plugins> Add New, then install and activate the Yoast SEO plugin:
Tampilan-plugin-Yoast-SEO-di-halaman-plugin-WordPress
Do the same for the Glue for the Yoast SEO & AMP plugin. After that, open SEO> AMP via the dashboard. Decide whether you want to activate AMP in posts and media or not:
Halaman-tipe-post-Glue-for-Yoast-SEO
Click Save Changes. You can also configure additional settings in the Design tab. On the tab, create an icon for your WordPress AMP site, set the color scheme, and add custom CSS:
Screenshot-Tab-Design-Glue-for-Yoast-SEO
Don’t forget to save any changes you make after configuring the site.
AMP for WordPress is the best WordPress AMP plugin if you want to add basic AMP functionality to the site. However, if you want more control over the appearance of the AMP WordPress site (and also to develop its functionality), then our Accelerated Mobile Pages plugin can meet your needs.

Option 2: Install AMP for WP – Accelerated Mobile Pages Plugin

screenshot-halaman-plugin-AMP-for-WP-_-Accelerated-Mobile-Pages-WordPress
If you need an easy software interface for beginners to configure pages on the site, this WordPress AMP plugin can integrate with other additional tools. These tools include WooCommerce (the most popular e-commerce plugin for WordPress), Alexa metrics, OneSignal push button notifications, and much more.
To use WordPress AMP this plugin, the first step you have to do is go to the dashboard and select Plugins> Add New. Search AMP for WP, then install and download the plugin:
screenshot-halaman-plugin-AMP-for-WP-Accelerated-Mobile-Pages-WordPress
Open the new AMP tab on the WordPress dashboard. You will see a drop-down menu with sections for Settings, Design, Extensions, and so on. Following is the appearance of the Settings option:
screenshot-halaman-pengaturan-plugin-AMPforWP-Plugin
If you are still confused, you can read the Getting Started guide on this page. It is hoped that after reading this guide, you can configure the WordPress AMP setup. After that, activate various options in AMP for WP, such as:
• SEO: Includes settings for meta description, integration with SEO plugins, and others.
• Performance: There are separate settings to enable and disable toggling file minification. Minification can increase the loading speed of your website.
• Analytics: Here you can manage integration with Google Tag Manager as well as analytics options.
• Comments: This option allows you to include or not include WordPress, Disqus, and/or Facebook comments on AMP WordPress.
• Advanced settings: Here you can enter custom HTML for headers and footers, set up mobile direction, and enable and disable retina images.
Click Save Changes for each of the settings above as soon as you have finished configuring. Select the Design tab:
screenshot-opsi-tema-AMPforWP
This is where you can usually customize the appearance of the AMP WordPress site. Choose a dedicated AMP theme from the various themes listed in the Theme Selector drop-down menu.
After choosing the desired theme, manage the appearance to your liking. Color and typographic schemes, header and footer display options, main homepage sidebar options, and others are in design settings (which are published in the Global tab). Meanwhile, in the Social section, you can choose any social media to display the AMP WordPress site.
If you are sure of any changes and settings made, click the save option. To preview the AMP WordPress site, open Appearance> AMP:
screenshot-pratinjau-tampilan-AMP-AMPforWP
Free version AMP for WP offers various features. However, to get a better look and features, you can upgrade to premium services. In this premium service, you can apply a star rating (this option is perfect for reviewing or selling products or real-estate profiles), integrating with WooCommerce Pro AMP, using custom post types, etc.:
Screenshot-Halaman-Ekstensi-AMPforWP-990x477
You have to pay to get a premium AMP theme. To see this option, reopen Design> Themes via the dashboard. There are many options available for certain types of websites, such as news sites, online magazines, and many more. In addition, there are also multiple multipurpose themes:
screenshot-halaman-tema-premium-AMPforWP
If you want more premium features, choose Pro plans. This service provides various packages that you can choose from starting from the Personal package (for one site starting from $ 149 per year) to the Agency package (for unlimited sites for $ 499 per year).

How to Validate the AMP WordPress Site

After activating one of the WordPress AMP plugins, the next step is to validate the AMP WordPress, make sure it can be accessed, and connect to the supporting platform. Validation is also a practical way to detect AMP errors.
The easiest and fastest way to validate AMP is to use the browser developer tool. Open the AMP page in the browser (for example, we use Google Chrome). After that, add this at the end of the page URL:
# development = 1
Open the browser developer tool console. For Google Chrome, the tool is the Chrome DevTools console. If an error is detected, it will be marked in red. You will also see an analysis of the causes of the error.
Umm, validation errors are caused by invalid prefixes, incorrect code formats, and entries, and/or tags that are not needed. In most cases, the option to resolve this error will be displayed and you can read it. Even Google AMP made a list of ways to deal with validation errors that often occur if an auto-fix option does not exist.
Another effective AMP validation method is to use the AMP Validator extension for Google Chrome and Opera:
Ekstensi-AMP-Validator-untuk-Google-Chrome
This tool displays a simple error overlay (red icon) and also the cause. In addition, if you activate AMP validator on a non-AMP page, a blue extension icon will appear and connect you to the AMP version of the page. This feature provides elements for assessing the performance of themes so that the appearance of your WordPress AMP avoids errors.

Conclusion

Even though the website loading time is a few seconds longer, it still affects your site’s ranking on the search engine (as well as conversion ranking). For this reason, you must know how to use Google AMP to increase site loading speed if it’s opened on a mobile device. What’s more, the configuration and customization of the AMP for WordPress plugin is very easy, just like when you use the WordPress Accelerated Mobile Pages plugin.
Do you have a question regarding the setup of one of the WordPress AMP plugins? Let us know via the comments column below!
Comments