Last month we had very important fact – first time in history, mobile web had more unique visits that web. I guess, this trend will continue. This is why we want to keep this year for more advanced mobile support for all our products. And first major update is AMP advanced support.
AMP – is accelerated mobile pages technology which makes your mobile pages very fast. Don’t want to overload you many technical details, so, in simple words, AMP is like separate light version of your site special for mobile gadgets. You can find much more details about AMP here
There are many cases, when AMP will be bad sollution for your site. AMP has another ways to use scripts and styles, media, so, if you have too much important dynamic functions on page, AMP will be not your choice. If you have something important inside sidebar – you should also know that AMP doesn’t load sidebar at all. Sometimes you can solve this with adding any button in head of article, something like “Rate and compare here” which will redirect user to default web page.
If you decided to use AMP, here our article how to use it in our themes.
First of all, you need to install default AMP official plugin for wordpress. Go to Plugins – Add new and search plugin AMP, install and activate plugin. Currently, we support two plugins: official AMP from Automattic and AMP for WP plugin
There are some pros and cons of each plugin. Regular AMP plugin is plugin from the same team which makes WordPress and Woocommerce and it’s more compatible but it’s limited in settings and design.
Where to use AMP and how to test
Currently, all AMP plugins allow to select where to use AMP: posts, pages, homepage, etc
We recommend to use only for Posts and Blog posts. It’s because pages are used in wordpress for many system parts, like registration, membership, etc. Usually, homepage and pages can be broken in AMP.
After all settings, it’s good to test your posts in AMP validator Just place link to your post version and add in the end /amp. Example: http://site.com/post-url/amp
Regular AMP plugin from Automattic
When you run setup wizard for plugin you can be very confusing with choices. What is Transitional, Standard, Reader Mode?
Standard mode is mode when your whole site will be turned to AMP mode. Of course, this will break whole site, because AMP is very limited in scripts and styles. You should use this mode ONLY if you have very simple site with few articles and pages.
Transitional Mode is mode when regular site pages will be tried to turn in AMP mode. Of course, this will also not work as regular version of site has always many dynamic scripts which will not work.
Your choice must be Reader mode. In this way, you will have two different versions of site: regular and AMP. Amp version is available if you add /amp to end of your link
Next step is Theme choice
Choose AMP Legacy. This is more compatible version and more clean.
On last step, you will be prompted to customize AMP. You can change only colors. I recommend to use Light version of site as it’s more compatible with custom blocks
Additionally, you can assign your Analytics account in general settings of plugin
Logo for AMP
Also, AMP plugin doesn’t show logo in AMP version and has no such setting. You can add AMP logo in theme options – Mobile and AMP
Social share for AMP
We also added some share buttons. They are enabled by default. Facebook share requires app API key, you can set it in Theme option – Mobile & AMP. You need to register your FB application here
AMP for WP Plugin settings and overview
This plugin has a bit more possibilities and settings + more choices in design. Also, it has PRO version with more possibilities.
On installation, you will get to settings of plugin, where you can add logo, color, choose where to apply plugin (I recommend to use only posts), add Analytics, GDPR notice
In advanced settings, you can choose where to apply AMP. Again, I recommend to leave only posts
In design, you can choose theme for AMP, header style, menu style, etc
How to add menu?
Plugin adds also special AMP menu. Go to Appearance – menus, create new menu and add items which you want to AMP menu area. Then, attach your new menu to AMP area
Plugin has a lot of other settings, but they are optional. Please, note, that AMP is very limited in size of styles. You can easily exceed limit of size and your AMP pages will be not valid. In some cases, you can try to deactivate theme’s AMP styles in Theme option – mobile and AMP. But this will not help if you use too much modules in AMP. Remember, AMP is like option in mobiles “Reader mode”, when site will be turned to simplified version for mobiles. Don’t try to enable all options from regular site to AMP version, this is not possible.
Fallback link to web version
By default, AMP version will show number of comments, likes, review, but user can’t make any dynamic actions on AMP pages, so, it’s better to show him additional button to web version where he can do any actions with article. Usually, I use next code in section Theme option – Mobile and AMP – Before content
<a href="[rh_permalink]" class="wpsm-button medium white">Rate and compare</a><div class="mb10"></div>
this code will show special button under title before content
Ads and custom blocks on AMP
Ads on AMP has also another way to integration. If you use Accelerated Mobile Pages plugin, you can add ads blocks in AMP – Gettings started – Advertisement
You can also create your own ads blocks and insert them in one of sections in Theme option – Mobile & AMP. To do this, include first next code in Theme option – Mobile and AMP – Header section
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
Then, insert ads code in one of section in Theme option – Mobile & AMP. To see all available ads and examples, check this article about Ads on AMP. Example of Adsense code
<amp-ad width=300 height=250 type="adsense" data-ad-client="ca-pub-2005682797531342" data-ad-slot="7046626912"> </amp-ad>
You can also add sticky ads with the same logic. Check this tutorial about sticky ads on AMP
Currently, theme supports Seo By Yoast plugin for AMP. Also, there are many other plugins which can add some basic seo settings for AMP, but we recommend to use Seo By Yoast