Are you looking to improve the loading speed of the WordPress website on your mobile devices to boost your search results? In that case, setting up Google AMP (Accelerated Mobile Pages) in your WordPress site is a smart move.
Recently a survey has been conducted which revealed that for any searching, above 50% people on worldwide basis used mobile devices. It is crucial that in mobile devices also, the website to be optimized.
Google’s Accelerated Mobile Pages (AMP) initiative makes this task much easier. AMP is a kind of technology which can help your website to boost the loading speed on mobile devices. By doing so, the traffic on your website will increase and users will get a better experience.
With the help of this article, you will understand the process of setting up Google AMP on WordPress. We will show you how to properly install and configure Google AMP using one of two different plugins – the AMP Plugin by Automatic or AMP for WP.
What is Google AMP?
Do you have to wait for a long time to read your content? Have you ever faced issues while browsing your content? I guess yes! This frustrating experience is all too common for mobile users, which is why Google’s Accelerated Mobile Pages (AMP) initiative was created.
Many tech giants like Google and Twitter support AMP‘s open-source projects. The goal of the project is to make web content load faster for mobile users. The technology behind AMP relies on minimal HTML and limited Javascript, which allows the content to be hosted on Google’s AMP cache.
When someone clicks on an AMP link in search results, Google serves the cached version of the page to them instantly. This feature helps the users as users don’t have to wait for a long time, as the page gets loaded in a quick manner which gives users a better browsing experience.
AMP is similar to Facebook Instant Articles, but with one key difference. While Instant Articles are limited only to Facebook’s platform, AMP can be used by any app, browser, or web viewer. We can use AMP on different platforms like Google, LinkedIn, Twitter and many more.
Benefits of Google AMP
Accelerated Mobile Pages (AMP) is a technology that can greatly benefit your website. Below are seven reasons why you should consider implementing AMP:
- Improved User Experience – AMP significantly improves the user experience for mobile visitors with slow internet connections. By making your content lean and fast, your visitors won’t have to wait for your site to load, which should lead to more traffic.
- Boost in Mobile Search Results – Google encourages the usage of AMP by giving a boost in mobile search results. Adding AMP to your site will help improve your SEO efforts.
- Increased Exposure – Sites that comply with AMP standards have the chance to appear in the carousel at the top of Google mobile search results. This could greatly improve your site’s exposure.
- Reduced Load on Hosting Servers – Having AMP on your site will reduce the load on your hosting servers, which will help improve website performance.
- Improved SEO – The most obvious benefit of Google AMP is boosting speed. Since page speed is a critical factor when it comes to your page’s rankings in Search Engine Results Pages (SERPs), this can help make sure your site is more visible. Google AMP will also ensure that your site’s pages show up in the Google News carousel, which is prioritized above the above-the-fold placement on mobile searches, thus further boosting your SEO.
- Enhanced User Experience – For every 0.1 second improvement in mobile page loading speed, conversions increase by 8%. An even more concerning study found that 57% of internet users said they wouldn’t recommend a business with a poorly-designed mobile website. Google AMP makes it easy to create user-friendly mobile web pages, to help you avoid these pitfalls.
- Increased Server Performance – Google AMP benefits from some of Google’s key optimization features. It reduces the bandwidth usage for images (without affecting image quality) and increases server-side rendering. By reducing the load on your server, AMP helps to improve your site’s performance.
Disadvantages of Google AMP
Accelerated Mobile Pages (AMP) is a technology that has drawbacks also, below are seven reasons why you should consider before implementing AMP in your website:
- AMP’s limited set of HTML, JavaScript, and CSS may prevent you from easily adding certain features and widgets to your content, such as CTAs and share buttons. However, AMP for WP offers more options for adding various functionality.
- The AMP plugin by Automatic only supports Google Analytics, but the AMP for WP plugin has more analytics options, including Segment Analytics, Piwik Analytics, Quantcast Measurement, comScore, Effective Measure, StatCounter, HiStats Analytics, YandexMetrika, and Chartbeat Analytics.
- AMP may limit opportunities for advertising on your site, as adding ads is more difficult than on a non-AMP mobile page. However, the AMP for WP plugin supports a variety of ad formats and has premium extensions to expand ad capabilities further.
- If you decide to remove AMP after installing and configuring it on your site, you’ll need to set up 301 redirects back to the non-AMP posts.
- Google AMP’s lightning-fast loading times may come at the expense of branding elements that use CSS and JavaScript, such as high-definition graphics and elaborate animations.
- Although Google AMP supports ads, implementing them is fairly complicated, and it has limited integration potential with external ad platforms, which restricts ad revenue capabilities.
Method 1: Steps to enable AMP on WordPress Website:
These are the guidelines to enable AMP on the WordPress:
- To Install AMP Plugin, go to Plugins, click on add new, a search option will show where you need to write “AMP”.
When search is over and you find the AMP, install the same and activate the plugin. - Preview your AMP site: Once the AMP plugin is activated, go to Appearance > AMP to see how your site looks on mobile devices using Accelerated Mobile Pages. The AMP plugin uses stripped down HTML and CSS, so you won’t have many visual options. However, you can change the color of the header background, link color, and header text color. There is a colour scheme of light and dark colour, you can choose either one.
- Save your changes: After you’ve configured your AMP settings, make sure to save your changes. Note that the AMP for WordPress plugin only supports posts, not pages.
- Preview your AMP posts: To see what a post looks like as an Accelerated Mobile Page, go to the post and add “/amp/” to the end of the URL.
- Impact on your site: Keep in mind that using AMP will limit your visual design and functionality options, but it can significantly improve user experience on mobile devices. If a large portion of your site traffic is mobile, AMP may be worth considering.
- The use of AMP is totally dependent on you. The procedure for the installation and activation is easy, if you feel that it’s beneficial for your site, you can use it. On the other hand, if you don’t like the features, you can uninstall the plugin.
Method No. 2: Steps to enable AMP on WordPress site
These are the guidelines to enable AMP on WordPress Site:
- Open WordPress and Login to your site, then go to the Dashboard. Once you see the WordPress Dashboard, navigate to Plugins and click on Editor.
- Select AMP from the dropdown menu and click the Select button.
- On the right-hand side of the screen, under Plugin Files, click on Templates and go to single.php.
- To ensure that your script works properly, you need to place the following AMP script in the head area of the file, between the and tags:
After you have added the first script, you need to insert the following code right after the opening tag:
- After writing the code, click on Update File Button which is mentioned at the bottom of the page.
- Please note that incorrect code in any of these files can break your site and you may also not be able to edit the file, so proceed with caution.
How to consume AMP Pages in WordPress with Yoast SEO & AMP
If you want to use Yoast SEO in conjunction with the AMP plugin, you can add Glue for Yoast SEO & AMP to your WordPress site. This helpful plugin allows you to adjust metadata and customize the appearance of your AMP pages. Here’s how to get started:
- Install and activate Glue for Yoast SEO & AMP plugin.
- Go to the Yoast SEO section in the left sidebar of your WordPress dashboard and click on AMP.
- In the Post types tab, select which items you’d like to have AMP support. The default settings are usually sufficient.
- In the Design tab, you can choose an AMP icon (at least 32 x 32 pixels) and a default image to be used when a post doesn’t have an image associated with it (at least 696px wide). Ensure that each post has its own unique image.
- In the Content colors tab, customize the colors of your AMP header background, post titles, body copy, and post meta info.
- In the Links tab, select the color and hover color for your link text, and choose whether links are underlined or not.
- In the Extra CSS and Extra code in tabs, you can insert extra CSS code and add any meta and link tags.
- In the Analytics tab, you can enter an AMP-specific JSON version of your Google Analytics script. Generic Google Analytics scripts will not work with the AMP framework, so make sure to use the correct code.
- To add Google Analytics to your AMP posts, add the following lines of code to the Analytics code field:
<amp-analytics type=”googleanalytics”>
<script type=”application/json”>
{
“vars”: {
“account”: “UA-XXXXX-Y”
},
“triggers”: {
“trackPageview”: {
“on”: “visible”,
“request”: “pageview”
}
}
}
</script>
</amp-analytics>- Make sure to replace “GTM-XXXXX” with your unique Google tracking ID (e.g. UA-5295510-2 or similar).
- To check if your code was added to your AMP posts, visit one of your AMP posts (e.g. myneatosite.com/cool-post/amp/) and view the page source. Search for “analytics” and if you see the code, then you have successfully added analytics to your AMP posts.
Note: Adding the analytics code within Glue for Yoast SEO & AMP may or may not work for you. If the code is not added to your AMP posts, try another method.
Incase, it happened to you, follow the below mentioned step-to-step guidelines:
- Download the file through an FTP client. Go to wp-content > plugins > amp > templates and download the single.php file.
- Make a copy of the original file just in case you break something when you add the scripts.
- Now, open your file in the text editor, where you need to add the code. After writing the code, save your file by clicking on the Save button.
- Finally, upload the single.php file where you downloaded it from, and overwrite the old one.
Use the AMP for WordPress plugin to add AMP
Adding Accelerated Mobile Pages (AMP) to your website can enhance your site’s design, functionality, and ease of Google Analytics integration. The AMP for WP plugin is a popular plugin that can provide you with advanced options to achieve this. However, the AMP for WP plugin should not be used alongside the AMP plugin by Automattic. Here’s how you can add AMP to your site with the AMP for WP plugin.
To start, install and activate the AMP for WP plugin. You will now see an AMP menu item in your WordPress dashboard. From there, you can configure the layout and design of your AMP pages by going to Appearance > AMP. This will open the customizer, where you can enable and reorder the elements you want to include on your AMP pages.
Apart from configuring the layout, you can also use the Settings tab to configure other options for the AMP for WP plugin. Here are some of the things you can do in the Settings tab:
• General: Upload a logo for the header of your AMP content, set a custom logo size, and enable AMP for posts, pages, homepage, and archives.
• Page Builder: Use the AMP for WP Page Builder to create landing pages for AMP.
• Advertisement: Add AdSense code in various areas of your content, choose from a variety of standard display ad formats.
• SEO: Ensure your Meta descriptions are displayed in the head section of your AMP content, and add other link and Meta tags as well.
• Performance: Enable Minify AMP Page to improve page speed.
• Analytics: Choose your analytics provider from the dropdown and add the ID for whatever you selected in the box below. You can also add advanced analytics tracking event options, Google Tag Manager, and Facebook Pixel.
• Structured Data: Choose structured data type for posts and pages, upload a default logo to show in Google, use a custom size, upload a default image to use on posts, and specify image width and height for your default image, and upload a default thumbnail to use for video objects.
• Notice Bar: Enable notifications on all of your AMP content to notify your visitors that your site uses cookies to track their activity or something else.
• Push Notifications: If your site uses OneSignal for Push Notifications, you can integrate it with your AMP content by entering an APP ID. You can also customize the Subscribe and Unsubscribe text displayed on your content.
• Contact Form: Integrate forms created with Contact Form 7 or Gravity Forms.
Ensure that you try out these options and see how they work for your site. Additionally, you can enable and configure social sharing buttons to your AMP posts and pages, add Google AdSense to your AMP content to generate revenue from advertising on your site, and create your very own custom AMP templates to use. The AMP for WP plugin gives you multiple design options to choose from, which can make your AMP content look more attractive.
How to validate WordPress AMP Site
When you have set up your preferred AMP plugin, the next step is to validate your WordPress AMP to ensure that it can be accessed and linked to by supported platforms. This process is also helpful to troubleshoot any AMP errors that may arise.
To validate your AMP, you can use your browser’s developer tools.
Open the AMP page in the browser and in the URL add “#development=1”. After writing this, users can access the developer tools console, which highlights the error in red.
Common validation errors in AMP are usually caused by invalid prefixes, incorrect formatting or code entries, or disallowed tags. Fortunately, the validation readout often includes an option to fix the error, or the Google AMP Project provides methods for fixing common validation errors if no auto-fix option is present.
You can also use Google Chrome and Opera to validate the AMP Validator extension. This tool provides a simple overlay of errors and their causes. If you run the AMP validator on a non-AMP page, the extension icon will turn blue and link you to the AMP version of that page. This feature helps to assess elements of your site’s theme that may prevent WordPress AMP from displaying correctly.
By validating your WordPress AMP, you ensure that it meets the necessary requirements for it to be accessible and linked to by supported platforms. This process is essential for maintaining your site’s functionality and user experience.
Conclusion:
Ensuring fast loading times for your website is critical to maintain good search engine rankings and retain visitors. Even a small delay in loading can result in a significant loss of traffic and conversions. The good news is that Google AMP can help optimize your mobile pages for lightning-fast loading times. By using the right Accelerated Mobile Pages WordPress plugin, you can easily configure and customize your AMP pages to ensure they are fast and user-friendly.
AMP can help your users and visitors by providing a good experience and improving the SEO ranking of your website.