Have you ever wondered why some web pages take longer to load than others? If you haven’t asked yourself, take the test. Visit from your mobile a web page of a small company that you know (without AMP ) and then go to your favorite newspaper or blog, the load difference will be a few seconds, what is necessary for a page to make a difference and be more attractive for the user thanks to the good user experience since loading time is increasingly a requirement demanded by users and also by search engines. Thanks to the AMP application, some web pages are able to satisfy one of the most important demands of the mobile consumer. How do they do it?
Table of Contents
What Is AMP?
AMP (Accelerated Mobile Pages) makes it easy to create attractive web pages with instant loading times for users who consume blogs, online newspapers or any page that constantly updates content. For this reason, applying AMP on a company website is, at least, not recommended unless you have a blog, then it would be advisable to apply it since it would be a page where the contents are updated very often.
AMP, developed by Google in 2015, is compatible with many different platforms and in all browsers and has the objective, as we have already mentioned before, to accelerate the loading speed of page views with mobile. A note before continuing: AMP is not a substitute for responsive design.
Why Is It Important To Have AMP In A Web Project?
- More and more of us use the mobile phone to consume online content, whether to make purchases, read blogs, online newspapers, watch videos, etc.
- Websites with AMP versions improve ranking in SERPs.
- Provide more accessible content
- Keeping the loading time as minimal as possible helps the user not to leave the page. Since we consume so much content online, we have become more demanding.
- It is a perfect project to help pages rank in search engines since loading speed is important in SEO.
- The number of users on the web will increase due to the attractiveness that AMP brings to the site.
How To Install And Implement AMP In WordPress?
Applying an Accelerated Mobile Page on your page may be the best option you have taken to win over your readers and solve the impatience of many users. In this case, we will give you an example of how to apply AMP in WordPress.
One of the options is installing a plugin; in this case, we recommend that you use the AMP plugin for WordPress. Its use is very simple since once you have installed it, the plugin automatically updates the web of the mobile version adding “/ amp /” at the end of each URL or? Amp = 1 according to the default configuration that you have in WordPress regarding the permanent links. But we explain how you can do it with others that are also worth it.
If you have already decided to implement it, do not forget to indicate to Google that the AMP version of each page has a source page, this must be done with the tag “ rel = canonical”. But before explaining how you can do it, we will tell you how to apply AMP in WordPress.
Install A plugin
The simplest option is brought by WordPress, which you can activate by accessing the left option of “plugins”. You will only have to write the name of the plugin in the WordPress plugin search engine, choose the option, click on “install now” and “activate”. Afterwards, you should activate the AMP for WordPress to modify the aesthetics of the page.
What Are The Best AMP Plugins For WordPress?
- WP AMP
- Glue for Yoast SEO & AMP
- AMP Pages by PageFrog
Then you will see the notice that the plugin is already activated.
After installing AMP for WP, access the AMP tab on the left bar and select “Settings” to be able to add customizations to the page.
To continue, go to the “pages” category in the same bar on the left and add a new one.
Scroll down the page until you see a red box “start the AMP Page Builder”.
From the design and settings option, you can customize the page and use the content for AMP such as:
- The logo
- Buttons to social networks
- Add HTML to the page
- Add translations
- Use Google Tag Manager or other analytics providers
It is also important to pay attention to the SEO part where you can configure the indexing, the integration of the SEO plugin (with the Yoast or All in One SEO settings).
In the specific use of the page, you will be able to choose how many columns you want to add and what type of elements you will choose for the AMP layout.
We choose, for example, “heading”, “text”, “button” and “image” that we will edit by clicking the nut icon. You can also choose ready-made layouts in the “prebuilt AMP layouts” option.
This is what will appear when, for example, we edit the text, which is saved in the blue button at the bottom.
When you have edited the modules you have chosen, you can see how it looks in the box “show AMP for Current Page” that appears on the right. You have to update and choose “preview AMP”, and you will see the example of the page from a mobile device.
We are now testing AMP Pages by PageFrog, which allows customization without touching code. Install it in WordPress and choose the Google AMP HTML option
To edit the page with this plugin, access the Styling part that is displayed by clicking on “Mobile Formats” in the left column once installed. There you will see the different customization options such as the style of the titles, the body of the text and the footer.
On the right, you have an example of how the page would look in the mobile design. If you have already chosen it, press the green “save” button and continue with the settings option “Settings” where you can edit instant articles and enable or disable AMP of the pages you want (this allows you to improve your content and deactivate this option for pages where it is not convenient for you to have this model).
You can also implement Google Analytics and Google Adsense in the “Analytics” and “Ads” options in the “Mobile Formats” column. To install them, login with the corresponding Google account and choose the options that best suit you.
Tag Rel = »Canonical»
To avoid duplicate content, if the plugin does not have this tag by default or the page is created manually, it is necessary to give Google some guidelines by adding in the <head> tag of the AMP page the following <link rel = »canonical» href = »[[URLoforiginalpage]» /> and <link rel = »amphtml» href = » https: // URL_pagename_AMP »> on the original page.
Is The Rel = »Canonical» Tag Reliable To Avoid Duplicate Content?
Regarding the tag rel = »canonical», there is an extensive debate in the SEO world, so we propose this series of questions:
- Does the “canonical” tag really prevent Google from treating content as duplicate?
- Do you think it is more reliable if you prohibit access to bots from the robots.txt file?
- What’s your opinion about it? Which method helps you the most to avoid duplicate content or thin content?
- Do you think the rel = »canonical» tag reduces crawling?