Amp For Blogger Stride-By-Pace Implementation Take 2021

  • Share

AMP for Blogger inward 2021: You may implement AMP (Accelerated thousandobile Pages) to your blogger blog (BlogSpot) alongside unproblematic change inward HTML Template of your blogger subject. It’sec very slowly as well as in that location is no require for any practiced. You tin do it yourself.

Did y’all know? More than 49% of live visitors expect a spider web page to load inside ii seconds. Core Web Vitals (CWV) focuses on iii aspects of the user feel:

  • Loading measured by Largest Contentful Paint (LCP),
  • Interactivity measured by First Input Delay (FID), in addition to
  • Visual stability measured by Cumulative Layout Shift (CLS).

AMP (Accelerated Mobile Pages) is web pages that are compelling, smooth, together with load most instantaneously to ensure your website is fast, user-get-go, too makes money online.

All website owners wants more than too more than organic traffics in addition to generally users search their queries using their smartphones. Thus, your web log must live mobile friendly.

Accordingly, yous should use responsive blogger subject. Good news is that forthwith blogger default themes are responsive. But, Google prefers AMP version of sites rather themes designed for mobile visitors.

So, you lot need to convert your mobile blogger theme ane.e. HTML to AMP. In other words, your blogger page URL ending with https://SuperWebTricks.blogspot.com/?k=one should load in AMP version.

How to implement AMP for Blogger Blog

AMP Validator: Before going to change your blogger HTML code to implement AMP for your blog, but cheque whether your weblog has already supports AMP.

If AMP validation condition is truthful and then your blog is already support AMP version. However, if the validation status is false and then follow this tutorial guide as well as convert your blogger subject into AMP.

Blogger AMP Validator
AMP Validator

If y’all are using default topic of blogger (Contempo Light, Soho, Emporio together with Notable etc.), yous may encounter the next errors messages:

  1. The mandatory attribute ‘⚡’ is missing inwards tag ‘html’.
  2. The mandatory attribute ‘amp-custom’ is missing inwards tag ‘style amp-custom’.
  3. Custom JavaScript is non allowed.
  4. The tag ‘grade’ requires including the ‘amp-course’ extension JavaScript.
  5. The attribute ‘onclick’ may not look inwards tag ‘a’.
  6. The attribute ‘bring up’ may non look inward tag ‘footer’.
  7. The attribute ‘refer’ may not look in tag ‘div’.
  8. Custom JavaScript is not allowed.
  9. The mandatory tag ‘meta charset=utf-eight’ is missing or wrong.
  10. The mandatory tag ‘noscript enclosure for boilerplate’ is missing or wrong.
  11. The mandatory tag ‘head > style[amp-boilerplate]’ is missing or wrong.
  12. The mandatory tag ‘noscript > way[amp-boilerplate]’ is missing or wrong.
  13. The mandatory tag ‘amphtml engine script’ is missing or incorrect.

Minimum Required AMP HTML Codes: This is the minimum valid HTML codes for AMP spider web pages:











Hello, Showeblogin Readers.

That agency, your blogger weblog topic must include the above required HTML code for publishing valid AMP blogger pages, posts, widgets together with comments.

First of all go to the template editor. Theme⇒ Edit HTML in addition to so follow these stride-past-pace implementation conduct. If y’all implement AMP for your weblog, your web log volition work faster than always.

Step-i (Change HTML):

The mandatory attribute ‘⚡’ is missing inwards tag ‘html’. This mistake can live resolved past but adding the 'amp' tag attribute to the tag. To brand your weblog AMP friendly, notice as well as supplant code alongside the next code:

The in a higher place code volition alter your both mobile as well as desktop blogger subject to AMP based theme. However, if yous does not desire to convert your desktop topic to AMP so purpose this code but earlier/above tag.

The in a higher place code alone change your mobile (thousand=i) subject to AMP HTML equally I accept added the status for mobile only subject.

Step-2 (Change Charset too Viewport):

Check for the for the charset together with viewport meta tags inward your web log template editor. If not present, copy in addition to glue the next code afterward .

Step-three (Canonical link):

Make your weblog discoverable using canonical tag. Now, Google uses AMP version of webpage every bit a signal for SEO ranking. Check for the for the canonical link tags.

If non present, add the canonical link which volition merely signal to itself. Copy as well as glue the next code later on the viewport tag equally updated above inwards pace-two for blogger amp.

Note that if you are using default blogger topic then there is no call for to add together the higher up canonical rel tag.

Step-iv (Change HEAD):

Thereafter, detect too supervene upon code with the following code too brand your web log mobile friendly past AMP:


amp-boilerplate='amp-boilerplate'>torso-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 [email protected]
-amp-outsetfromvisibility:hiddentovisibility:[email protected]
-amp-kickofffromvisibility:hiddentovisibility:[email protected]
-amp-get-gofromvisibility:hiddentovisibility:[email protected]
-amp-starting timefromvisibility:hiddentovisibility:[email protected]
-amp-commencementfromvisibility:hiddentovisibility:visible

Step-5 (Change Image Tag):

Normally, nosotros use tag for ikon just inward AMP you have to purpose amp-img instead of entirely img. Therefore, change the img tags into amp-img tags like the following case:

How to bank check AMP pages validity?

Method-ane:
Open your AMP page in Chrome browser, for case –
https://instance.blogspot.in/p/amp-page.html

Append “#development=one” to the URL, for example –
https://case.blogspot.inwards/p/amp-page.html#development=one.

Right click too open up the Chrome DevTools console too cheque for validation errors.

Method-ii:
Open the spider web interface at validator.ampproject.org.

Enter the url value to the URL plain, for case –
https://case.blogspot.inward/p/amp-page.html

Any changes to the html beginning made inwards this interactive editor event inwards interactive revalidation.

  • Share