Google AMP is available. How can I connect it to WordPress

Mar 23, 2022
google amp

The world of the internet is ever-changing and for the majority of business owners it is essential to keep up-to-date to all developments made by Google. If you're not able to adapt, it means that you'll be not in the loop. Google AMP, their mobile initiative that speeds up the speed of internet , has reached the one-year mark. Because it's a lot higher than the speeds it had 6 months back, we thought it would be an ideal opportunity to explain the best way to begin using Google AMP in WordPress, along with some advantages and disadvantages of this latest technology.

What exactly do you mean by Google AMP?

Google AMP (Accelerated Mobile Pages Project) was introduced in the month of October, 2015. The project relies on the AMP HTML framework, which is an open framework made entirely of the existing web technologies that lets webmasters create lighter websites. It is the possibility of displaying an uncomplicated version of your existing web site.

Google study

The most recent State of the Online Retail Performance report released by Akamai In the most recent report from Akamai the tenth tenth of an second is crucial. A slight rise in loading times from 2.8 seconds to 2.8 seconds led to an rise in conversion of 2.4% reduction in conversion.

conversion rates on mobile
Relationship between the speed of conversion and rates of conversion for mobile devices.

Numerous large businesses are using Google AMP over the past year, this includes WordPress, Reddit, eBay, Pinterest, Washington Post, Wired, Gizmodo, as well as many more. According to Google, Slate saw its website witness a increase of 44% in monthly unique visitors and an 73% rise in visits per monthly unique user.

If a website is served through AMP within Google it will display the AMP symbol at the top of the URL, as it is seen in the New York Times demo. Note, you must use a mobile device to test this. You can also utilize the emulator for devices in Chrome devtools. Structured data markup allows Google to display your website's details more prominently in results of its searches. For instance, AMP articles that include suitable markup attributes could be given the highly sought-after carousel feature in SERPs as shown below.

google amp example
Google AMP carousel

And here is an example of what you can see the AMP page appears like on The New York Times website. The page is simple and simple, which is exactly what we want to achieve through the use of AMP. It is a way to ensure that your website loads fast and offers more user-friendliness.

google amp single page example
Google AMP page example

Similar to any new tech It is essential to consider your options prior to you decide if it is the best choice for your website or business.

The advantages of Google AMP

  • AMP is a free, open source.
  • More prominent SERPs and a the carousel option for higher CTR. A single use of a renowned publishing house, Google AMP resulted in a 600% of CTRs!
  • Google AMP forces a lot of recommended web performance practices such as avoiding big CSS as well as JS frameworks.
  • Your conversions could be affected positively.
  • Numerous improvements have been made over the past year and advertising options are now widely available through Google AMP. This means that both new and upcoming magazines and magazines can maintain or even increase their AdSense income.
  • AMP Lite introduces further optimization to speed up network connection. Google saw a reduction of 45% in bytes.

The negatives of Google AMP

  • The AMP tag isn't a ranking element currently, however, it may come into play in the near time. It can be seen as an argument for and against.
  • AMP isn't easy to test and implement in the absence of a professional. But, the WordPress platform is easier than the other platforms.
  • The company introduces a completely innovative platform, which offers many options to think about. What happened to the simple design of mobile web sites?
  • It could impact or hurt the conversion rate adversely.
  • Certain have noticed reduced involvement as well as a greater bounce rates.
  • Third party scripts as well as applications that may not be considered to.
  • Support is not available for older browsers like Internet Explorer 11. The browsers have declared that, in general, they'll work with the most current versions of all the popular browsers like Chrome, Firefox, Edge, Safari and Opera. Also, they are compatible with desktops, phones tablets, as well as the web-based versions of every browser.
  • Find out Jan Dawson's view on of the reason Google AMP is the reason Google AMP has made it harder to publish, and not more easy publishing content via the internet.
  • Read Alex Kras' article on several problems with Google AMP, along with an explanation by the tech lead on the AMP Project at Google.
  • Tim Kadlec share's his opinion regarding Google AMP and the need for a superior alternative. Content performance guidelines.

Since February, Google AMP has begun to show direct publisher's URLs. The past version was showing the Google version that is serving via cache. The issue raised concern for users from a branding perspective. However, Google realized this as also and had a change. In the future, the URL field of a browser will display a Google URL. The AMP header area will display the link icon or chain, what is calls"anchor" "anchor" option. By clicking on this, your publisher's URL will appear in a way that it could be quickly copied and put into a new location. While it's not the perfect option, but it's much better than none.

google amp publisher URL
Image source: Google Developer Blog

This is yet another instance of branding being misplaced.

@HuffingtonPostpic.twitter.com/n3LEHIOEBZ
19 January 2017
@maileohye#StateofSearch
November 14 14, 2016

How to Setup Google AMP in WordPress

It is much more simple to integrate Google AMP in WordPress than it was a year ago. A lot of progress has been made with regard to WordPress plugins and the overall platform. Make sure that the code needs to validate by Google in order to show your variations of AMP of your website in the search results. This plugin transforms your blog's content into an AMP version, but it's Google which decides to show the AMP version instead.

It is the case that each WordPress blog post is assigned an individual URL to it. It's managed by the WordPress plugin in a way that is automatic. The general rule is that /amp and /?amp are attached to your post. Below is an illustration

Original Blog Post URL: https://domain.com/blog-post  AMP Blog Post URL: https://domain.com/blog-post/amp/

Google AMP WordPress plugins

There are two well-known WordPress plugins in the repository that can help you get setup using Google AMP. One of them is the no-cost official Google AMP plugin. The plugin was developed through Automattic. Automattic team. Automattic.

google amp wordpress plugin
Google AMP is a genuine Google AMP plugin by Automattic
wordpress amp customize appearance
WordPress AMP styles

Also, it is important to keep on your toes that this feature will not support posts, but just pages. While they've stated that they are working on including this feature. This is an example of what our WordPress blog looks after installing the plugin.

wordpress amp post
WordPress Preview of AMP for WordPress

If you are wanting the most simple method to add extra features to your website, then that's where the cost-free plugin AMP for WordPress plugin can help. It's basically an modern variant of the AMP plugin that offers more features as well as support. The plugin was designed by Ahmed Kaludi and Mohammed Kaludi who run the highly-popular WordPress Theme Store.

amp for wp plugin
The AMP plugin works with use with the WP WordPress plugin

In the current time of writing, it currently has more than 70k active users, and has a 4.6 out of 5 stars. It is available for download from the WordPress repository or by searching for it on the WordPress Dashboard under "Add New" plugins. This plugin allows you to modify a great deal more your Google AMP setup. It also supports pages. We will now go over the options for customization and features accessible in the AMP plugin's settings in your dashboard for your account.

 blog AMP in SERPs
A case study of AMP being displayed in search results

 General

On the screen for general settings you will find the option to include an image, alter the size, and also select whether or not you want AMP activated on your pages. If your blog is a success and has your traffic patterns, you may need to activate an AMP option for your website (post forms).

accelerated mobile page general options
Alternatives for speeding up mobile pages acceleration

Homepage Page

Under Homepage, you can enable or disable homepage support, override the homepage thumbnail size and decide what happens after clicking upon the icon (go to the AMP version, instead of other variants).

AMP homepage
The homepage of AMP

Page Builder

In Page Builder, you are able to activate it so that it permits AMP widgets to work.

AMP page builder
AMP page builder

Design

In under Design Under Design, you can use the post builders or choose from designs that were created. You can turn on HTTPS for searching and add the call-now button. Additionally, you can choose to add custom CSS. On our site as an example you can use this code to customize the colors of our headers:

.amp-wp-header background-color:#5CC0C0;
AMP design
AMP design

 Single

Under Single, you'll are able to enable social icons, deactivate the icons, and show bios of authors or change the options on related post.

AMP single post
AMP single post

Advertisement

AMP advertisement
AMP advert

 menu AMP

Within the menus, you can select opting to add the word "amp" at the end of menu URLs. It is possible that you wish your users to stay at your AMP accessible website and if so, then you'd like to switch on this.

Do you want to know the ways we have increased the number of visitors to our website by 1000 percent?

Join the more than 20,000 who receive our newsletter each week that contains insider WordPress advice!

AMP menu
Menu AMP

Social

Within the menus for Social it is possible to select which networks you would like to have displayed on your phones for sharing. If you want to share Facebook, for Facebook to be displayed, you'll need to sign up for a free Application ID.

AMP social
Social media and AMP

SEO

AMP seo options yoast
Alternatives for AMP SEO

 Analytics

The Analytics screen will allow you to add your tracking scripts into Google Analytics in addition to Google Tag Manager. This is necessary to do this so that you can keep your data up-to-date.

AMP analytics
AMP analytics

It also works it with Segment Analytics, Piwik Analytics and Quantcast Measurement, comScore, Effective Measure, StatCounter, HitStats Analytics, Yandex Metrika, as well as Chartbeat Analytics.

Structured Data

The structured data screen allows you to customize the logo used as a default logo for structured data and post images.

AMP structured data
AMP structured data

Contact Form

AMP contact form
AMP contact form

Notifications Notifications

On the screen for notifications, you can enable it to display a cookie alert. This can be useful for those in countries with less restrictive privacy laws.

AMP notifications
Alerts on Alerts for

Comments

On the screen for comments there is the possibility to allow support for other third-party commenting platforms including Disqus in addition to Facebook comments.

AMP comments
Comments from AMP

Advanced Settings Advanced Settings

Within the advanced settings you have the option of enabling mobile redirection. Keep in mind that by default the only way to enable AMP is AMP will be turned on to those on mobile and click in the results of a search. When a mobile visitor goes straight to your site, however, they don't arrive on the page with the AMP activation, they must switch on redirection. You can also enter your own HTML in this area in addition to altering the footer's URL's actions.

AMP advanced settings
Advanced settings for AMP

Extensions Extensions

They also offer premium extensions which are accessible for purchase to expand the functionality of your AMP plugin. One of the most popular extensions you may be interested in are an option for email support, CTA buttons, and the ability to customize post types.

AMP extensions
AMP extensions

Here's what our blog looks like using the AMP on WordPress plugin, which we've installed on our blog.

AMPforWP example
A good example of AMPforWP.

The team behind AMP for WP recently unveiled a new plug-in, AMP WooCommerce, which lets you enable AMP for your store on the internet.          FhzEclWcLukECUTspTFb       AMP WooCommerce plugin

Verifying Your Google AMP Code

Once you've got Google AMP setup on your WordPress website, you'll need be sure the code you've created is legal. If not, Google won't show the AMP version in SERPs. The site can be run by running your WordPress website using an application called the Google AMP Validator tool. The tool will let you know on the bottom of the page if you pass or not pass.

google amp validator
Google AMP validator

It is also possible to download the free Chrome AMP plug-in that validates every webpage. If the webpage appears to be red, you are able to click and swiftly check for any warnings or errors on the page.

amp validator chrome extension
Google AMP errors

If your page isn't able to pass the requirements for validation, you may see an error message that reads "Not a valid AMP webpage." The example below shows it was due to using old and unsupportable HTML tags like deltime> and . There is the option of viewing a complete listing of AMP-related HTML tags. If you find that the HTML tags aren't valid, AMP pages do not feature AMP-specific elements on Google results.

Not a valid AMP page
It is not AMP-compliant.
google search console amp
The Acceleration feature speeds up Mobile Pages report in GSC

If there is a problem, Google will inform you by an email to inform you that you are required to add required structured data to the pages of your AMP.

amp errors google search console
AMP errors - GSC

Google AMP SEO

Another aspect you could be thinking regarding could be one of the SEO aspect of the equation since you have now two duplicates of the same website or piece of content. There's no need to fret about duplicate content because each of these plugins employ Canonical tags when combined with AMP. Canonical tags inform Google that the content originally appears as the same version on your desktop. Google can identify AMP pages which are located displayed on your website because your original page is displayed with a header tag that directs Googlebot to your AMP page.

Example on your original page:

An example on your AMP page:

It is possible to use the AMP WordPress plugin mentioned above is also compatible when combined with Yoast SEO in order to include your meta information as well as tags for OG for SEO as well as social factors. Check out the example below.

Google AMP meta tags
Google AMP meta tags

New Relic Monitoring in conjunction with Google AMP

It's also crucial to remember that those who use New Relic monitoring (license required) and there is a chance that Google AMP validator may fail due to a third-party script problem: The term'script is not allowed except for certain forms.

This is due to the reality that HTML websites designed to work with Google AMP aren't allowed to include third-party JavaScript. This is due to it is the AMP for WP plugin mentioned above is fully compatible and works with New Relic. However, if you want to deactivate New Relic Browser for AMP pages, adhere to the steps in the section to disable Browser monitoring for particular webpages. It is also possible to install a no-cost WordPress plugin called Disabled NewRelic forAMP it is possible to install.

Cloudflare has a fresh feature they have recently introduced that lets you enable speedy mobile hyperlinks to other websites which have AMP running. One benefit of this option for your site is that it is that AMP content can be loaded by viewers directly on the page on the internet that has links to it. That means, after the viewer has completed their consumption of the material, they close the browser, and it redirects users to your web page. It is in this way, the duration of your site's visit is total. You can enable this by logging into the Cloudflare monitor dashboard to track performance.

cloudflare accelerated mobile links
Cloudflare's Accelerated Mobile Links

Summary

So as you can see there are a few simple ways to get Google AMP in place on your WordPress website. Do you have the ability to turn on Google AMP right now? This is contingent on the type of WordPress website you run. If you're running a magazine or news-related site, it's a good idea to take this action now and start exploring AdSense locations. If you're a SaaS firm, it might affect negatively your conversions If you don't pay attention. Google AMP is definitely an important improvement, especially when you have already seen a large amount of mobile users. It is recommended to begin doing some tests as it is the only method to find out if you is going to experience positive or negative effects.

Do you have any additional suggestions for using Google AMP with WordPress? If yes, we'd love to hear from you in the comments! Be sure to read the official design guidelines to understand the AMP.

Reduce time, money and maximize site performance with:

  • Support for 24/7 instant help by WordPress experts in hosting, 24/7.
  • Cloudflare Enterprise integration.
  • Global reach with 29 data centers worldwide.
  • Optimization through the integrated application performance monitoring.

This post was first seen on here