AMP posts – tips, technics and when to use
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>Sticky ads
You can also add sticky ads with the same logic. Check this tutorial about sticky ads on AMP
Seo settings
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
![How to make better web vitals for wordpress theme or plugin [check list for developers]](https://wpsoul.com/wp-content/uploads/2021/07/webvitals-336x220.jpg)
Hi, thanks for the update… there are other plugin should installed it’s
https://wordpress.org/plugins/glue-for-yoast-seo-amp/
currently, this is not required. Just use main Seo By Yoast, I added support for it for AMP, so glue plugin is not important
Wow, nice job !!!
I am getting a error in amp pages ” Custom JavaScript is not allowed ” .
How can i fix this issue on rehub theme . Please help
you can’t use custom javascript ads and codes on AMP pages, remove them
Thanks a lot, all AMP errors have disappeared !! just one question, menu is not showing on AMP pages anyway to fix it?
what menu do you mean? AMP doesn’t have menu at all. It’s available only if you use custom plugins. For example, Accelerated Mobile page plugin (described in article) can add such menu
I am using the Rehub theme and I have installed the default AMP official plugin. I have put adsense code in the footer section and that works fine when I am visiting my AMP webpage using a mobile phone.
But when I also put the same Adsense code in After content section or Before content section, nothing happens. No ad shows up when visiting the same webpage. Do you know a solution for this?
Did you use correct way to add ADS as described in article? Ads code which you use on web version is not the same as for AMP
Yes, I have put the AMP ads code as described in this article in the After content section or Before content section, but no ad will show up in the AMP webpage. When I put the AMP ads code in the footer section, then it works fine. The AD will show up in the AMP webpage.
I am not sure why the AMP ads code does not work in the After content section or Before content section. I believe you are allowed to put 3 ADS in AMP webpage.
yes, all 3 works. But, do you use the same code for 3 blocks at once? I mean, do you enable 3 blocks at once or only one? Send link on page
I have sent you an e-mail about that webpage. I don’t want my website to appear publicly
I installed the AMP plugin (from Automattic) but I cannot find the AMP – General section (to disable AMP for pages). Where is it?
It’s only in second plugin which I described in article. If you use only Automatic plugin – ignore this, it doesn’t have AMP for pages by default
getting error in validation ..
Invalid URL protocol ‘http:’ for attribute ‘src’ in tag ‘img’. Learn more.
The tag ‘img’ may only appear as a descendant of tag ‘noscript’. Did you mean ‘amp-img’?
but some of the images are converted to amp-img but some are not..
need link
Their is validation problem in Full Width Content egg (beta) module.
snapdeal logo images is failing validation which is in sidebar. flipkart is passing but dowsnot display logo in AMO
but AMP doesn’t have sidebar at all. Send link
Are any of the demos setup to use amp?
yes. Recash has
you can check if you add amp to post url. Example http://recash.wpsoul.net/apple-pectin-700-mg/amp/
Hello,
I wonder if I should use at the same time AMP and AMPforWP Accelerated Mobile Pages with a “structurated data” plugin such as Schema plugin:
https://wordpress.org/plugins/schema/
My purpose is making my website more SEO/human friendly, both on desktop and on mobile.
Those 3 plugins are compatible amongst them and good for such a purpose?
Thank you in advance for your reply.
Anna
second plugin can’t work without first. third plugin useless for amp version of site. amp plugin already has schema markup. for seo – read https://wpsoul.com/optimize-seo-wordpress/
The URLs are working for the amp pages, but how do I get Google to index/recognize the amp pages? They don’t seem to be getting added to my Yoast SEO sitemap. They also aren’t getting cached by Google.
it must be some time before google index them. You can add some links on your site to AMP pages to help this faster. You can find more informtion about indexing of AMP pages in google
Amazing, thanks
Hi admin,
Thanks a lot for the tutorial. I was looking for it from a very long time.
Extremely helpful. I’ve been wanting to learn more about this!
Hi !
I’m using rehub/rewise with content egg . lazy loading images is turned on , AMP posts doesn’t show any product images it uses this instead : /wp-content/themes/rehub/images/default/noimage_336_220.png
Is there a fix ?
thanks !
it was fixed
I think I have to switch to amp pages, They look ugly though
i noticed a Credit link back to wordpress on the footer of amp pages, what if i want to remove “powered by wordpress”?
You are right, AMP plugin adds this and no option to remove. But i will overwrite this link by empty text in update. thank you for notice
Why doesn’t amp show related posts?
Hi,
Just for say, Rehub it’s not compatible with AMP for WP.
But it work with AMP for wordpress and Better AMP.
I deactivate default amp styles of theme but nothing change.
Our theme is compatible and tested with two plugins: AMP from Automattic (it’s default official plugin from wordpress and woocommerce creators) and AMP for wordpress. If you have issues, create support ticket https://sizamtheme.support-hub.io/
10 month ago and same problem with AMP for WP.
Last technical response was i must change from another free template, but now Swift template have also problem with your theme.
I want to use REhub again but not compatible with free amp template of AMP for WP.
I don’t know why have problem only with your template, with other it work (WP astra, Tagdiv Newspaper, Publisher).
Amp template from AMP for WP plugin must be independent from Redhub template, i don’t know why it’s not.
Then i’ll change from other AMP compatible template, hope yours will be compatible in future.
One more time. It’s compatible and it’s in use on hundreds of AMP sites of buyers. If you have any issue, you can write details to our support
Hello admin, I noticed that related posts are not displayed on amp pages. Is there a way to show related posts?
It’s depending on plugin which you use in AMP. check settings of plugin
If I use Amp plugin by Automatic, it doesn’t display menu and related posts. Is there any way to add this function? Or should I try another plugin?
AMP for WP plugin has such option
after installing the amp plugin by automatic, some posts have error messages on the webmaster or other test tools. how to fix this
link example : https://yudionline.com/harga-samsung-galaxy-j7-duo/
thanks….
which errors?
These are some post links that have critical issues in the search console
https://yudionline.com/harga-samsung-galaxy-j7-duo/amp/ and others post
invalid data structure on google search console (https://search.google.com/test/amp)
invalid amp after test on search console and (https://validator.ampproject.org/)
example screnshoot critical issue
https://screenshot.net/7zqkwig
https://screenshot.net/77yogug
screenshoot non-critical issueL(invalid structur data element)
https://screenshot.net/93krlu8
https://screenshot.net/kql71ak
Image is from Content Egg plugin, you can write to author of plugin and ask to add support for AMP for their TemplateHelper::getMerhantIconUrl function. To be truth, i am not sure that it’s possible at all, you are trying to use Dynamic page from Content Egg elements for AMP. AMP is for news static sites, dynamic pages are very limited in AMP.
For structure data – again, it’s not from theme, you can write to authors of AMP plugin and ask to fix this issue
As always brilliant, you make it all make sense!! Thanks for the detailed article.
Thanks for the informative cover in this post. In deed, could you just tell us readers here that
1) is this site using AMP?
2) In what cases, better be provided examples (some URLs) that AMP doesn’t fix into
1. No. AMP is good for blogs, but our site is more for technical side of wordpress, so, I don’t think that AMP is required for such information
2. All sites which related on dynamic content are not recommended for AMP, because AMP is like very light version of site with limited functions. Blogs, news sites, review sites can use AMP
Does the “add to compare” function from rehub theme work on AMP? Is the comparison table (built with top chart page template) displayed correctly?
AMP is technology which simplify page and turn it to something like “Optimized for reading on mobiles”. Any dynamic, scripts and advanced functions can’t work on amp
Offer box block is not showing in amp. I use it on some posts
Hi,
Pls update this tutorial. There are choices when we use AMP Plugin: Standard, Transitional, or Reader. Which one to choose?
And the main menu is not working when we use amp. The hamburger icon for menu is not clickable.
Thanks in advance.
you can choose any, it’s up to you. You can read documentation of plugin what is the difference between them. Theme doesn’t affect menus, please, write to author of plugin
when I add accordion to frequently asked questions. it works in normal view. but when I convert that to amp version(AMP official plugin). Tt did not work?
Even, offerbox image don’t load(check at the end of the page)
Why is it so?
You can check them here : https://mentormebuy.com/aukey-plus-portable-power-station-review/amp
Sure, because AMP technology can’t use any scripts or dynamic elements
Could you please tell me how to recover WordPress if AMP broke my website?
Google stopped submitting my website homepage into sitemap after using AMP.
When I tried to uninstall the AMP plugin then I got the error “Deletion failed: There has been a critical error on this website. Learn more about troubleshooting WordPress.”
Could you please guide me on how to fix this issue?
Thanks
https://wpsoul.com/how-to-know-what-error-do-you-have-on-wordpress-site/
I install AMP Project Contributors, then I don’t get the best result. After that, I uninstall this Amp. Then my website doesn’t show any image in google chrome. And I used rehub theme, how to make my website mobile friendly with rehub theme.
Rehub theme is already mobile friendly if you use responsive content
wow, thank you for this information. I always have problems with the speed of my website.
I think with AMP, my website can be faster again.
Hey, I have installed the AMP Plugin, but the ReHub theme is not supported for the AMP; the theme is not showing in the AMP theme selection. How can I use the ReHub theme? It is only showing AMP legacy and WordPress default themes.
Legacy is correct thing to use. it’s described in this article