Google AMP - How do I integrate it into WordPress

The internet is always evolving and for a lot of proprietors of businesses, this means the need for staying up to date with all changes with Google. If you don't adapt this means that you'll be out of the loop. Google AMP, their mobile initiative to speed the internet has now reached its year-one anniversary. Because it's a lot better than it was 6 months ago, we thought it would be an ideal moment to provide the steps to begin using Google AMP in WordPress, and also some of the advantages and cons of this new technology.

•    What is Google AMP?
•    The pros of Google AMP
•    Cons of Google AMP
•    How to set up Google AMP on WordPress
•    Validating Google AMP's Code

What exactly is Google AMP?

Google AMP (Accelerated Mobile Pages Project) was launched in October 2015. The project relies on the AMP HTML, a new open framework made entirely of the existing web technologies that allows webmasters to create lighter-weight websites. Simply put, it offers a way to display a stripped down version of your existing web site.

From the beginning, a key focus for AMP has been speed. This is perhaps one of the worst things about the mobile web that is evident in the latest Google study which shows more than 53% users abandon a website that fails to load in three seconds or less. It's one of the worst possible scenarios for business, users sites, publishers, as well as the mobile web in general. in general. -David Besbris, David Besbris, AMP project lead at Google

In the most recent State of the Online Retail Performance report from Akamai According to the latest report by Akamai, every tenth of a second matters. Even a slight increase in load times to 2.8 seconds resulted in an increase of 2.4% reduction in conversion.

A lot of large companies have adopted Google AMP over the past year, this includes WordPress, Reddit, eBay, Pinterest, Washington Post, Wired, Gizmodo, and many more. According to Google, Slate saw the site experience a 44% growth in unique monthly visitors as well as a 73% growth in visits per monthly unique visitor.

When a webpage is delivered via AMP in Google it will display the AMP symbol in front of the URL as you can see within the New York Times demo. Note, you must be on a mobile device to test this. You can also make use of the emulator for devices in Chrome devtools. Structured data markup enables Google to display your website's information more prominently in the results of searches. As an example, AMP articles that include the appropriate markup properties may receive the sought-after carousel space on SERPs, as illustrated below.

And here is an example of what the AMP page looks like on The New York Times website. The page is simple and basic that is what we want to achieve with the use of AMP. This ensures that it loads fast and offers better usability.

Like any other new technology, it is important to weigh your options before you decide if it is an appropriate choice to your company or web site.

Pros of Google AMP

• AMP is open and free source.
• More prominent SERPs and a the carousel option for higher CTR. One implementation with a popular publishing company, Google AMP resulted in a 600% of CTRs!
• Google AMP forces a lot of recommended web performance practices like avoiding large CSS or JS frameworks.
• Your conversions could be affected in a positive way.
• Many improvements have been made over the past year and advertising options are now readily available in Google AMP. The result is that new and upcoming magazines and publications can retain or even grow their AdSense income.
• AMP Lite introduces further optimization to speed up network connection. Google experienced a total cut of 45% in bytes.

The cons of Google AMP

• AMP isn't currently a ranking element yet, however it may come into play in the near future. It could be thought of as an argument for and against.
• AMP can be a challenge to implement and test if you're not a developer. But, the WordPress platform is simpler than other platforms.
• The company introduces a completely new platform that offers you a variety of features to think about. What happened to the simple optimization of our mobile sites?
• Could hurt or affect the conversion rate adversely.
• Some have seen less engagement and higher bounce rate.
• There are still 3rd party scripts as well as applications may not be accepted.
• Support is not available for older browsers like Internet Explorer 11. The browsers have declared that generally they'll support the two most recent versions of the major browsers like Chrome, Firefox, Edge, Safari and Opera. They also support desktops phones, tablets, and the web view versions of each browser.
• Read Jan Dawson's opinion why Google AMP has made it harder to publish, and not more easy, publishing content on the web.
• Read Alex Kras' article on some of the issues in Google AMP, along with a reply from the lead tech on the AMP Project at Google.
• Tim Kadlec share's his opinion regarding Google AMP as well as the necessity for a better alternative. Content performance guidelines.

Since February, Google AMP has begun to show direct publisher's URLs. In the past, it showed Google's version that is serving through cache. It raised concerns for people from a branding perspective. Fortunately, Google realized this as well and made a change. Now, the URL field of a browser will continue to show a Google URL. The AMP header section will now display the link icon or chain, what it calls"anchor" "anchor" option. By clicking on this, your publisher's URL show up, so that it can be easily copied and pasted. It's not a perfect solution, but it's better than nothing.

This is yet another instance of branding being lost.

Another reason to not use Google AMP -> You lose your brand :) cc @HuffingtonPost you might want to think about it :) pic.twitter.com/n3LEHIOEBZ

-- Syed Balkhi (@syedbalkhi) January 19, 2017

It seems that @maileohye confirmed that when there's a desktop and an AMP, Google will index desktop to mobile users first. #StateofSearch

-- Jennifer Slegg (@jenstar) November 14, 2016

How to Setup Google AMP in WordPress

It is much more simple to incorporate Google AMP in WordPress than it was six months ago. A lot of progress has been made with regard to WordPress plugins and the overall platform. Be aware that your code needs to validate with Google in order to show your AMP versions of your site in the search results. The plugin converts your blog post in to an AMP version, but it's Google that decides to show the AMP version instead.

Basically how it works is that the WordPress blog post is assigned a unique URL associated with it. It is managed by the WordPress plugin automatically. In general, /amp and /?amp are attached to your article. Below is an example

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 popular WordPress plugins in the repository that can help you get setup with Google AMP. The first one is the free official Google AMP plugin. This plugin was actually developed by the Automattic team. Automattic.

It's also crucial to keep in mind that this feature does not support posts, but only pages. While they've stated that they are working on including this feature. Here is an example of how our WordPress blog appears like when we install the plugin.

If you are wanting the simplest method of adding extra features to your website, then that's where the no-cost plugin AMP for WordPress plugin comes into play. It's basically an modern version of the AMP plugin and gives you additional features and support. The plugin was developed by Ahmed Kaludi and Mohammed Kaludi who also run the highly popular WordPress theme store.

At the time of this writing, it currently has over 70k active users and a 4.6 from a 5-star rating. It is available for download from the WordPress repository or search for it on the WordPress dashboard under "Add New" plugins. This plugin allows you to customize a lot more with your Google AMP setup. Also, it does support pages. Below we will dive into the features and customization options available in the AMP plugin's settings on your account dashboard.

  General  

On the screen for general settings there is the option to include an image, alter the size, and also select whether or not you want AMP enabled on pages. Depending upon your site and traffic, you might just want to turn on AMP on your blog (post forms).

  Home Page  

Under Homepage, you can activate or deactivate homepage support, override the homepage thumbnail size as well as select what happens upon clicking on the logo (go on to AMP version instead of the other versions).

  Page Builder  

Under Page Builder, you can activate it so that it allows AMP widgets to be utilized.

  Design  

In Under Design you may launch the post builder or choose from templates that have been designed. You can turn on HTTPS for searching and add a call now button. You can also opt for custom CSS. For our website, for instance, we add the following code to customize the color of the header:

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

  Single  

Under Single, you have the option to activate social icons, deactivate the links, and display bios of authors or change the options on related post.

  Advertisement  

  Menu AMP  

In the menu, you have the option of choosing the option to include the word "amp" at the end of URLs for menus. Perhaps you want your visitors to remain on your AMP enabled website, and if so, then you would like to turn on this.

Are you interested in knowing how we increased our visitors by 1000%?

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

  Social  

In the menu for Social, you can add which networks you would like to be displayed on your mobiles for sharing. For Facebook, you will need to sign up for a free App ID.

  SEO  

  Analytics  

The Analytics screen will allow you to include your tracking scripts to Google Analytics in addition to Google Tag Manager. This is necessary in this way in order to have your reports up to date.

It is also compatible 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 that is used by default for structured data and post image.

  Contact Form  

  Notifications  

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

  Comments  

In the comment screen, you have the option to allow support for third party commenting systems such as Disqus as well as Facebook comments.

  Advanced Settings  

In the advanced settings, you can enable mobile redirection. Remember that by default only AMP will be enabled for those who are mobile and click in search results. If a mobile user browses directly to your website but doesn't land on the AMP activated page until you turn on redirection. It is also possible to enter your own HTML in this area as well as change the footer's link's action.

  Extensions  

They also offer premium extensions which are available to purchase in order to further extend your AMP plugin. Some popular ones you might want to think about is the option to email, CTA buttons, and custom post type support.

Here is how our blog looks using the AMP for WordPress plugin installed on our blog.

The developers behind AMP for WP have recently released a new plugin, AMP WooCommerce, which lets you enable AMP for your online store.

Validating Your Google AMP Code

After you get Google AMP setup on your WordPress site , you'll want to make sure that the code is valid. If it doesn't Google won't show the AMP version in SERPs. The site can be run by running your WordPress website through the Google AMP Validator tool. The tool will inform you on the bottom of the page if you pass or fail.

You can also download the no-cost Chrome AMP plugin which will validate each page. If the page appears red, you are able to click and swiftly see any errors or warnings on the page.

If the page doesn't meet validation, you might see an error that reads: "Not a valid AMP page." In the example below, this was because of the usage of old and non-supportable HTML tags, such as deltime> and . It is possible to view a complete listing of AMP-related HTML tags. If the HTML tags are not valid, AMP pages do not include AMP-specific features on Google results for search.

If there are errors Google will inform you by an email that you have to add required structured data to the pages of your AMP.

Google AMP SEO

A different aspect that you could be thinking regarding is the SEO side of things because you now have two duplicates of the same page or article. There's no need to be concerned about duplicate content because each of these plugins make use of canonical tags in conjunction with AMP. Canonical tags notify Google that the content originally is the version you use on your desktop. Google will identify AMP pages that are on your website as your original page is displayed with a header tag that directs Googlebot towards your AMP page.

Example on your original page:

An example on your AMP page:

The AMP for WordPress plugin described above is also compatible when combined with it's Yoast SEO plugin in order to include your meta as well as Tags for OG to aid in SEO and social reasons. See example below.

New Relic Monitoring with Google AMP

It's also crucial to remember for those using New Relic monitoring (license required) and it is possible that Google AMP validator might be unable to function due to a third-party script issue:  The tag 'script' is prohibited except in certain forms.

This is due to the fact that HTML pages designed for Google AMP aren't allowed to contain third-party JavaScript. This is because the AMP for WP plugin mentioned above is fully compatible with New Relic. However, if you want to turn off New Relic Browser for AMP pages, adhere to the steps in the section Disable Browser monitoring on specific pages. It is also possible to install a no-cost WordPress plugin called Disabled NewRelic forAMP it is possible to install.

Enabling AMP for External Links With Cloudflare

Cloudflare offers a brand new feature that they recently launched which allows you to enable accelerated mobile links to external sites that have AMP running. One of the benefits of this feature for your website is it means that AMP content is loaded in a viewer directly to the web page that links to it. Which means after the reader has finished consuming the content, they close the browser, then it returns them back to your website. In a way the time spent for your website overall. You can enable this through your Cloudflare monitoring dashboard for performance.

Summary

So as you can see there are a few easy methods to have Google AMP in place on your WordPress site. Are you able to go on Google AMP now? It all depends on the type of WordPress website you run. If you're a magazine or news site you might want to take this action immediately and begin exploring AdSense places. If you're in the SaaS company, it may cause a negative impact on your conversions If you don't take care. Google AMP will definitely be an important change, particularly if you already get plenty of mobile traffic. Our advice is to start doing some tests as it is the only way to determine if your business will see either positive or negative effects.

Do you have any additional tips for making use of Google AMP with WordPress? If yes, we'd love to hear about them below in the comment section! Make sure you look over the official blueprint for the AMP.

Reduce time, money and maximize site performance with:

• Instant help 24/7 support from WordPress experts in hosting, 24 hours a day.
• Cloudflare Enterprise integration.
• Reaching a global audience with 29 data centers worldwide.
• Optimization through the integrated Application Performance Monitoring.