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

You have two further ways: use default theme options for advanced setup or use supported plugin Accelerated Mobile Pages (also free)

There are some pros and cons of each way. Using default theme option will give you maximum freedom for using advanced technics, and AMP modules (check below for some common examples). Using additional plugin is more easy for setup, but you will be limited by plugin’s modules, also, additional plugin is more load on site and can have more bugs. You can try both ways anc choose best for you, I will describe settings for both ways.

If you use Custom plugin for AMP with theme, you may have issue of too big css styles. AMP doesn’t support more than 50kb of css styles. If you have such issue, you can disable custom amp css in Theme option – AMP – Disable default amp styles of theme

Styling and fonts

Theme has some advanced ready styles for next parts: Content Egg and Affiliate Egg output, buttons, boxes shortcode, review block, title boxes, table of contents list, highlights, pros and cons block, user reviews, post offer section. You can add also own custom styles for AMP in Theme option – Mobile & AMP – Custom styles. You can also add there Logo for AMP version (if you use Accelerated Mobile Pages plugin, add logo in AMP – General). You can also set color for header in Appearance – AMP. Don’t forget to set your site icon if you didn’t have it in Customizer – Site Identity

I don’t recommend you to use Black design scheme in settings as it doesn’t fit for content blocks

Fonts

To make pages more fast, AMP version doesn’t have custom fonts as on web version. AMP plugin adds custom font Merriweather. To remove this font and add your custom font, do next steps:

  1. Disable default font in Theme option – Mobile & AMP
  2. Add link on any custom font in Theme option – Mobile & AMP – Header section. AMP supports only Google Fonts, Fonts.com, Font Awesome, Typography.com. I recommend to use Google fonts Just choose font and copy it’s link. Example.
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">

Also, you need to overwrite default styles. To overwrite default body fonts, add next code to Theme option – Mobile & AMP – Custom css

.rehub-body-font, body{font-family: "Arsenal", "Arial"}

where Arsenal is name of font. To overwrite headings, buttons, use code

h1, h2, h3, h4, h5, h6, .rehub-main-font, .wpsm-button, .btn_offer_block, .offer_title, .rh-deal-compact-btn, .egg-container .btn, .cegg-price{font-family: "Arsenal", "Arial"}

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

Instead “white” class, you can use green, gold, brown, black, teal, blue, orange, purple, rose

Instead of “medium” class, you can use big, small to make button more big or small

Analytics ans statistic

As I wrote early, AMP is like separate mobile application of your site, so, all scripts from main site will not work on AMP. Also, AMP technology requires different way to add any scripts on page, including analytics code. You can find examples of add analytics code here

If you use additional recommended plugin, you can add Analytics in AMP – Gettings started – General

If you want to add manually, you can add next code

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

inside Theme option – Mobile and AMP – Header section

and next code to Theme option – Mobile and AMP – Footer section

<amp-analytics type="googleanalytics" id="analytics1">
	<script type="application/json">
	{
	  "vars": {
	    "account": "Your_Analytics_ID"
	  },
	  "triggers": {
	    "trackPageview": {
	      "on": "visible",
	      "request": "pageview"
	    }
	  }
	}
	</script>
</amp-analytics>

replace Your_Analytics_ID to your ID. This is most simple settings for Analytics which tracks page views, you can check docs and find many different examples for setting different triggers.

Ads 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

Social share button

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 pages

I strongly recommend to disable pages for AMP support. This is because many plugins require some system pages and they will not work on AMP or make conflicts. Also, home page can have some post modules, which doesn’t have support for AMP. So, disable pages for AMP in AMP – General. Enable them only if you don’t have any custom pages with page builder and you have simple blog.

How to test AMP.

After all settings, it’s good to test your posts in AMP validator Just place link to your post and add in the end /amp. Example: http://site.com/post-url/amp

Facebook page about Online Moneymaking
48 Comments
  1. 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

  2. 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

  3. 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

  4. 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

  5. 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..

  6. 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

  7. Are any of the demos setup to use amp?

  8. 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

  9. 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

  10. Hi admin,
    Thanks a lot for the tutorial. I was looking for it from a very long time.

  11. Extremely helpful. I’ve been wanting to learn more about this!

  12. 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 !

  13. I think I have to switch to amp pages, They look ugly though

  14. i noticed a Credit link back to wordpress on the footer of amp pages, what if i want to remove “powered by wordpress”?

  15. 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

  16. Hello admin, I noticed that related posts are not displayed on amp pages. Is there a way to show related posts?

  17. 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?

  18. 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….

  19. As always brilliant, you make it all make sense!! Thanks for the detailed article.

  20. 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

  21. 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

Leave a reply