Final month we had crucial truth – first time in historical past, cell internet had extra distinctive visits that internet. I suppose, this development will proceed. For this reason we need to maintain this 12 months for extra superior cell assist for all our merchandise. And first main replace is AMP superior assist.

AMP – is accelerated cell pages expertise which makes your cell pages very quick. Don’t need to overload you a lot technical particulars, so, in easy phrases, AMP is like separate gentle model of your web site particular for cell devices. Yow will discover way more particulars about AMP here

There are a lot of instances, when AMP will probably be unhealthy sollution in your web site. AMP has one other methods to make use of scripts and types, media, so, when you’ve got an excessive amount of necessary dynamic features on web page, AMP will probably be not your selection. You probably have one thing necessary inside sidebar – you must also know that AMP doesn’t load sidebar in any respect. Generally you’ll be able to clear up this with including any button in head of article, one thing like “Price and examine right here” which is able to redirect person to default internet web page.

When you determined to make use of AMP, right here our article how you can use it in our themes.

To begin with, you should set up default AMP official plugin for wordpress. Go to Plugins – Add new and search plugin AMP, set up and activate plugin

You’ve two additional methods: use default theme choices for superior setup or use supported plugin Accelerated Cellular Pages (additionally free)

There are some execs and cons of every manner. Utilizing default theme possibility offers you most freedom for utilizing superior technics, and AMP modules (examine beneath for some frequent examples). Utilizing extra plugin is easier for setup, however you can be restricted by plugin’s modules, additionally, extra plugin is extra load on website and might have extra bugs. You’ll be able to strive each methods anc select finest for you, I’ll describe settings for each methods.

For those who use Customized plugin for AMP with theme, you might have subject of too large css types. AMP doesn’t assist greater than 50kb of css types. If in case you have such subject, you’ll be able to disable customized amp css in Theme possibility – AMP – Disable default amp types of theme

Styling and fonts

Theme has some superior prepared types for subsequent components: Content material Egg and Affiliate Egg output, buttons, containers shortcode, assessment block, title containers, desk of contents checklist, highlights, execs and cons block, consumer opinions, publish provide part. You’ll be able to add additionally personal customized types for AMP in Theme possibility – Cellular & AMP – Customized types. You too can add there Emblem for AMP model (for those who use Accelerated Cellular Pages plugin, add emblem in AMP – Basic). You too can set coloration for header in Look – AMP. Don’t neglect to set your website icon for those who didn’t have it in Customizer – Website Identification

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 hyperlink to internet model

By default, AMP model will present variety of feedback, likes, evaluation, however consumer can’t make any dynamic actions on AMP pages, so, it’s higher to point out him extra button to internet model the place he can do any actions with article. Often, I exploit subsequent code in part Theme choice – Cellular and AMP – Earlier than content material

<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

As a substitute “white” class, you should utilize inexperienced, gold, brown, black, teal, blue, orange, purple, rose

As a substitute of “medium” class, you should utilize massive, small to make button extra massive or small

Analytics ans statistic

As I wrote early, AMP is like separate cell software of your web site, so, all scripts from predominant web site is not going to work on AMP. Additionally, AMP expertise requires completely different manner so as to add any scripts on web page, together with analytics code. You will discover examples of add analytics code here

In the event you use extra really helpful plugin, you possibly can add Analytics in AMP – Gettings began – Basic

If you wish to add manually, you possibly can add subsequent 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>

change Your_Analytics_ID to your ID. That is most straightforward settings for Analytics which tracks web page views, you may test docs and discover many various examples for setting completely different triggers.

Advertisements blocks on AMP

Advertisements on AMP has additionally one other technique to integration. Should you use Accelerated Cell Pages plugin, you may add advertisements blocks in AMP – Gettings began – Commercial

You may also create your individual advertisements blocks and insert them in one in every of sections in Theme choice – Cell & AMP. To do that, embrace first subsequent code in Theme choice – Cell and AMP – Header part

<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 adverts

You too can add sticky adverts with the identical logic. Check this tutorial about sticky ads on AMP

Seo settings

At present, theme helps Seo By Yoast plugin for AMP. Additionally, there are various different plugins which may add some fundamental seo settings for AMP, however we suggest to make use of Seo By Yoast

Social share button

We additionally added some share buttons. They’re enabled by default. Fb share requires app API key, you’ll be able to set it in Theme choice – Cellular & AMP. You might want to register your FB software here

AMP for pages

I strongly suggest to disable pages for AMP help. It is because many plugins require some system pages and they won’t work on AMP or make conflicts. Additionally, dwelling web page can have some submit modules, which doesn’t have help for AMP. So, disable pages for AMP in AMP – Normal. Allow them provided that you don’t have any customized pages with web page builder and you’ve got easy weblog.

The best way to take a look at AMP.

In spite of everything settings, it’s good to check your posts in AMP validator Simply place hyperlink to your submit and add in the long run /amp. Instance: http://web site.com/post-url/amp