Do you want to perform Google AMP Setup on WordPress website? We will cover everything there is to know about Google AMP Setup on WordPress in this article.
Fast loading websites can improve your traffic and offer better user experience. It became normal when Google launches something new, everybody wants to be a part of it. Accelerated mobile pages are no different and people want to know more about it. Especially when there is a possibility to get Google AMP Set up on WordPress website.
Let’s dig deeper into Google AMP Setup for WordPress and explain a thing or two.
What is Google AMP?
AMP or Accelerated mobile pages is a project launched by Google to make your website loads almost instantly on mobile devices. It all started at the end of 2015 when Google announced a new project called Accelerated Mobile pages (AMP). The goal was to provide a faster mobile browsing through Google search engine by developing a type of HTML – AMP HTML. AMP HTML is an open source technology supported by Google and Twitter.
The web is slow for a lot of people and the majority of the people are browsing the web from their mobile phones, often from 2G or 3G connections. AMP has some big restrictions on what you can don in HTML pages and as a result, pages are loading almost instantly.
AMP pages contain all important content, but they do make an impact on page styling and features. Personally, I’m not a big fan of Google AMP pages on WordPress or Google AMP in general, but considering the pace Google is pushing it forward, Google AMP will soon become a standard for news sites and blogs.
Difference between Google AMP and Mobile-Optimized pages
There are two main differences when comparing standard mobile page and AMP page: content delivery method and speed. According to some test, AMP pages load up to 4 times faster than a standard mobile-optimized page.
So, why are Google AMP pages loading so fast?
According to Google documentation, Google AMP consists of 3 core components that makes it blazing fast.
- AMP HTML – It is similar to “normal” HTML but with some restrictions to ensure reliable performance. We could say that it is an HTML extended with some custom properties. The simplest form of AMP HTML would look like:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>
Most of the tags in AMP HTML page are regular HTML tags, but some of them are replaced with specific AMP tags. Those custom elements are called AMP HTML components and they are easy to implement in a performant way.
2. AMP JS – As Google says, the AMP JS library ensures that your AMP pages render fast. It manages resource loading and implements best performance practices. One of the biggest difference between a normal HTML page is the fact that everything that comes from external resources is loaded asynchronous, so nothing is blocking your page from rendering.
3. AMP Cache – It is a proxy-based CDN for delivering all valid AMP HTML Pages. The cache comes with built-in validation system which confirms the page is guaranteed to work.
So now when you learned what Google AMP is, let’s see how can we make a Google AMP Setup on WordPress website.
Google AMP Setup on WordPress
The first thing you will need is a Google AMP plugin for WordPress. We used and tested the WordPress AMP plugin by Automattic, the lead developers of WordPress.com platform. We also installed another plugin named AMP for WP which you can download here.
The reason we used both plugins is that AMP plugin doesn’t offer any kind of customization options where AMP for WP does. But AMP for WP requires you to have the “base” AMP plugin installed and activated.
While you are transforming your pages to AMP pages, we recommend turning on the maintenance mode. Believe us, default WordPress AMP setup is not something you want to show to your visitors. You can use the Under Construction Plugin we reviewed here.
Once you have installed and activated both plugins, you can navigate to AMP settings page. AMP for WordPress has a lot of options to choose from. For more advanced users, paid add-ons are available to extend AMP for WordPress functionalities.
Here are the settings we used to setup Google AMP on WordPress.
- General
- We have uploaded our logo in recommended size of 190×36
- Custom Logo size set to OFF
- AMP on Pages set to OFF
2. Homepage
- Homepage support set to ON. Our Homepage is an Archive page, your homepage may be a regular page, so take that into consideration.
- Front Page set to OFF
- Override Homepage Thumbnail Size set to OFF
- Non-AMP HomePage link in Header and Logo set to OFF
3. Page Builder
- Enable Page Builder for AMP set to OFF. We did not test this functionality therefore it’s hard to tell the benefits when activated.
4. Design
- We didn’t change any settings on Design options. We left it on default settings.
5. Single
- We have enabled Sticky Social Icons, Next-Previous Links and Author Bio in Single. We wanted to display 3 related posts based on Category. This settings are up to your preference.
- Meta for Pages set to OFF
6. Advertisement
- We did not use any kind of Ads on our test site, but there are 6 Ad areas available where you could easily add your AdSense code.
7. Menu
- Auto Add AMP in Menu URL set to OFF. We created a new menu from Appearance > Menus and assign it to be the AMP menu.
8. SEO
- Meta Description set to ON
- Meta Tags from Yoast set to ON
- Yoast Description in ld+json set to ON
- Archive subpages (sitewide) set to NOINDEX
- Author Archive pages set to NOINDEX
- Date Archive pages set to NOINDEX
- Categories set to INDEX
- Tags set to INDEX
9. Analytics
- We used our Google Analytics ID without Tag Manager
10. Structured Data
- We have uploaded our Logo and set custom logo size. Our logo was 600x300px.
- We uploaded Default Post Image and set the image size
11. Notifications
- Enable Notifications set to ON with personalized Cookie message.
12. Comments
- We used the default settings on this page. Both Disqus and Facebook comments were set to OFF.
13 Advanced Settings
- Archive page Support set to ON
- Mobile Redirection set to ON
- RTL Support set to OFF
- Link to Non-AMP page in Footer set to ON
14. Import/Export Our Settings
- You can simply import our settings. Go to Import/Export screen and select Import from File and copy/paste the following code:
1
{"last_tab":"","opt-media":{"url":"","id":"","height":"","width":"","thumbnail":""},"ampforwp-custom-logo-dimensions":"0","opt-media-width":"190","opt-media-height":"36","amp-on-off-for-all-pages":"1","amp-pages-meta-default":"show","ampforwp-homepage-on-off-support":"1","amp-frontpage-select-option":"0","amp-frontpage-select-option-pages":"2","ampforwp-title-on-front-page":"0","ampforwp-homepage-posts-image-modify-size":"0","ampforwp-homepage-posts-design-1-2-width":"100","ampforwp-homepage-posts-design-1-2-height":"75","ampforwp-homepage-posts-design-3-width":"330","ampforwp-homepage-posts-design-3-height":"198","amp-on-off-support-for-non-amp-home-page":"0","amp-analytics-select-option":"1","ga-feild":"UA-XXXXX-Y","sa-feild":"SEGMENT-WRITE-KEY","pa-feild":"#","amp-quantcast-analytics-code":"","amp-comscore-analytics-code-c1":"1","amp-comscore-analytics-code-c2":"","amp-use-gtm-option":"0","amp-gtm-id":"","amp-gtm-analytics-type":"","amp-gtm-analytics-code":"","amp-design-selector":"3","amp-opt-color-rgba-colorscheme":{"color":"#F42F42","alpha":"1","rgba":"rgba(244,47,66,1)"},"amp-opt-color-rgba-headercolor":{"color":"#FFFFFF","alpha":"1","rgba":"rgba(255,255,255,1)"},"amp-opt-color-rgba-font":{"color":"#fff","alpha":"1","rgba":"rgba(255,255,255,1)"},"amp-opt-color-rgba-headerelements":{"color":"#F42F42","alpha":"1","rgba":"rgba(244,47,66,1)"},"amp-design-3-featured-slider":"1","amp-design-3-category-selector":"","amp-design-3-search-feature":"0","amp-design-2-search-feature":"0","amp-design-1-search-feature":"0","ampforwp-callnow-button":"0","enable-amp-call-numberfield":"","amp-opt-color-rgba-colorscheme-call":{"color":"#0a89c0","alpha":"1","rgba":"rgba(10,137,192,1)"},"amp-design-3-credit-link":"1","amp-design-3-author-description":"1","amp-design-3-date-feature":"0","css_editor":"/******* Paste your Custom CSS in this Editor *******/","ampforwp-seo-meta-description":"0","ampforwp-seo-custom-additional-meta":"","ampforwp-seo-yoast-meta":"1","ampforwp-seo-yoast-description":"0","ampforwp-robots-archive-sub-pages-sitewide":"0","ampforwp-robots-archive-author-pages":"1","ampforwp-robots-archive-date-pages":"1","ampforwp-robots-archive-category-pages":"1","ampforwp-robots-archive-tag-pages":"1","ampforwp-auto-amp-menu-link":"0","enable-amp-ads-1":"0","enable-amp-ads-select-1":"2","enable-amp-ads-text-feild-client-1":"","enable-amp-ads-text-feild-slot-1":"","enable-amp-ads-2":"0","enable-amp-ads-select-2":"2","enable-amp-ads-text-feild-client-2":"","enable-amp-ads-text-feild-slot-2":"","enable-amp-ads-3":"0","enable-amp-ads-select-3":"2","enable-amp-ads-text-feild-client-3":"","enable-amp-ads-text-feild-slot-3":"","enable-amp-ads-4":"0","enable-amp-ads-select-4":"2","enable-amp-ads-text-feild-client-4":"","enable-amp-ads-text-feild-slot-4":"","enable-amp-ads-5":"0","enable-amp-ads-select-5":"2","enable-amp-ads-text-feild-client-5":"","enable-amp-ads-text-feild-slot-5":"","enable-single-social-icons":"1","enable-single-next-prev":"1","ampforwp-single-select-type-of-related":"2","ampforwp-number-of-related-posts":"3","enable-single-facebook-share":"0","amp-facebook-app-id":"","enable-single-twitter-share":"1","enable-single-twitter-share-handle":"","enable-single-gplus-share":"1","enable-single-email-share":"1","enable-single-pinterest-share":"1","enable-single-linkedin-share":"1","enable-single-whatsapp-share":"1","enable-single-twittter-profile":"1","enable-single-twittter-profile-url":"#","enable-single-facebook-profile":"1","enable-single-facebook-profile-url":"#","enable-single-pintrest-profile":"1","enable-single-pintrest-profile-url":"#","enable-single-google-plus-profile":"0","enable-single-google-plus-profile-url":"","enable-single-linkdin-profile":"0","enable-single-linkdin-profile-url":"","enable-single-youtube-profile":"1","enable-single-youtube-profile-url":"#","enable-single-instagram-profile":"0","enable-single-instagram-profile-url":"","enable-single-VKontakte-profile":"0","enable-single-VKontakte-profile-url":"","enable-single-reddit-profile":"0","enable-single-reddit-profile-url":"","enable-single-snapchat-profile":"0","enable-single-snapchat-profile-url":"","enable-single-Tumblr-profile":"0","enable-single-Tumblr-profile-url":"","amp-structured-data-logo":{"url":"","id":"","height":"","width":"","thumbnail":""},"amp-structured-data-placeholder-image":{"url":"","id":"","height":"","width":"","thumbnail":""},"amp-structured-data-placeholder-image-width":"700","amp-structured-data-placeholder-image-height":"550","amp-enable-notifications":"","amp-notification-text":"This website uses cookies.","amp-accept-button-text":"Accept","amp-use-pot":"0","amp-translator-show-more-posts-text":"Show more Posts","amp-translator-show-previous-posts-text":"Show previous Posts","amp-translator-top-text":"Top","amp-translator-non-amp-page-text":"View Non-AMP Version","amp-translator-related-text":"Related Post","amp-translator-navigate-text":"Navigate","amp-translator-on-text":"On","amp-translator-next-text":"Next","amp-translator-previous-text":"Previous","amp-translator-footer-text":"All Rights Reserved","amp-translator-categories-text":"Categories: ","amp-translator-tags-text":"Tags: ","amp-translator-by-text":"By","amp-translator-published-by":"Published by","amp-translator-in-designthree":"in","amp-translator-view-comments-text":"View Comments","amp-translator-leave-a-comment-text":"Leave a Comment","amp-translator-at-text":"at","amp-translator-says-text":"says","amp-translator-Edit-text":"Edit","amp-translator-ago-date-text":"ago","amp-translator-archive-cat-text":"Category: ","amp-translator-archive-tag-text":"Tag: ","amp-translator-show-more-text":"View More Posts","amp-translator-next-read-text":"Next Read: ","amp-translator-search-text":" You searched for: ","amp-translator-search-no-found":" It seems we can't find what you're looking for. ","ampforwp-search-placeholder":"Type Here","ampforwp-disqus-comments-support":"0","ampforwp-disqus-comments-name":"","ampforwp-disqus-host-position":"1","ampforwp-disqus-host-file":"","ampforwp-number-of-comments":"10","ampforwp-archive-support":"0","amp-mobile-redirection":"0","amp-rtl-select-option":"0","amp-footer-link-non-amp-page":"0","amp-header-text-area-for-html":"","amp-footer-text-area-for-html":"","redux-backup":1}
With all the settings adjusted, we were quite pleased with the look and feel of our new Google AMP pages on WordPress. Loading time of our single posts was amazing. The pages were loading instantly. But something was missing. Something important.
Google AMP Setup on WordPress made an impact on our website features
We found there is a price to pay for making the posts load fast. Due to the Google AMP restrictions, we couldn’t display anything else except the content itself. And our pages kinda lost their purpose. Like most bloggers and news websites, we aim to interact with our visitors. Google AMP will probably make you lose this battle.
We lost the ability to use newsletter forms or other opt-ins, contact forms weren’t working either. All of our pages with contact form were redirected to the non-AMP version. Widgets weren’t working, well – we used only about 20% of the features we normally have on non-AMP pages.
For more than one reason, we weren’t so happy after all with Google AMP setup on WordPress.
At the end, we decided to wait with Google AMP implementation on our entire WordPress site and we used the AMP only for our posts.
Google AMP pages are targeted to content producers and news publishers who create content on daily basis. If you run an e-commerce store, for example, you’ll have to kiss almost all of your top lead generation tools goodbye, since they are not allowed for now to be used in Google AMP.
Google AMP Setup on WordPress Pros and Cons
Google AMP & WordPress Pros
- Lightning Fast Loading Times
This is obvious as soon as you configure your AMP for WordPress. AMP pages are slick and fast. We enjoyed the fact we didn’t have to wait for more than a second to get our post loaded and this is extraordinary accomplishment by Google AMP project.
2. Increased Mobile Rankings
Yes, that’s a fact. Even though AMP is not a ranking factor, it has a positive influence on mobile ranking and Google gives a slight advantage to AMP pages. If Google keeps pushing the AMP project even further, it will have even more of an effect on SERPs.
3. Increased Server Performance
In case your website generates tons of traffic from mobile, AMP will reduce the load on your server. But it also comes with a downside.
Google AMP & WordPress Cons
- Most of the Website functionalities Gets Lost
WordPress uses a lot of plugins and customizations options are endless, that’s why we love it. AMP on the other hand, hates it and removes anything that might slow down the rendering. That includes your favorite widgets, forms, lead generation tools, sliders, effects etc.
2. Reduced Ad Revenue
Google AMP on WordPress does supports Ads, but it’s very limited. Having a customized Ads on AMP-pages is not easy to implement.
3. Lack of Analytics Data
Google AMP supports Analytics but it requires a different tag which needs to be placed on all AMP pages. Placing this tag can be tricky to make it work good.
4. Cache
Google AMP is not a rocket science. What makes your AMP pages load super fast is actually a cache. Google saves the cached version of your AMP pages and serves them to visitors. This may cause your visitors te see the old cached version, after you updated the content.
Google AMP Setup on WordPress – Conclusion
If you are running a blog with simple articles and you don’t care about losing a thing or two, Google AMP will definitely bring you more mobile visitors and it may be worth to get it setup on your WordPress site.
However, my personal opinion is that you should wait with Google AMP setup on your WordPress site. Time will tell how this project will work in the future. AMP is still not a ranking signal and until it becomes one, you should probably stick to your Mobile – Responsive pages.
It is also a possibility that Google makes the mobile-first index a Web standard, which will definitely hurt desktop SERPs. Then, you should consider implementing AMP on your websites critical pages like blog posts, contact etc.
