What is Amp (Accelerated Mobile Pages)?

AMP
(Accelerated Mobile pages)

WHAT IS AMP?
 It is an open source framework based on HTML,
which can be used for creating quick loading web
pages for mobile users.
 It’s good to optimize your pages for mobile users.
 Speed is an integral part of designing web pages.
Data shows that “about 40% of people will
abandon a web page that takes more than 3
seconds to load.”

WHY AMP?
 The use of mobile Internet is increasing at a
rapid pace all around the globe.
 Google wasn’t too thrilled about how long it
was taking for WebPages to load on iPhones
and Android smartphones.This slowness is
caused by mobile websites having images that
are too large, scripts that run before the
content is loaded and a slew of other issues.
 So, to solve this issue Google created the
“Accelerated Mobile Pages” project, or AMP, to
fix this.

ANNOUNCEMENT AND LAUNCH
 The Accelerated Mobile Pages project was launched in October 2015.
 The AMP Project was announced by Google on October 7, 2015.
 AMP pages first appeared to web users in February 2016, when Google began to
show the AMP versions of webpages in mobile search results.

AMP links in Google search are identified with an icon.

FEATURES OF AMP
AMP-HTML
HTML
Speed up by the
AMP Cache
CMS
Ad revenue and analytics

GOOGLE AMP CACHE
 The Google AMP Cache is a cache of
validated AMP documents published
to the web that is available for anyone
to use.
 Google products,
including Google Search, serve
valid AMP documents and their
resources from the cache to provide a
fast user experience across the mobile
web.

ADDING AMP PLUGIN IN WORDPRESS
Step 1
 On your wordpress admin
area - add new plugin

Step 2
Install and activate AMP
plugin for your site.

Step 3
 You can customize your AMP
by its appearance

Else addingYoast SEO &
AMP you can customize
more things.

ADDING AMP TO HTML SITES
1. Include AMP symbol within the HTML tag.
2. Add canonical tag.
3. Include AMP library file.
4. Specify a viewport.
5. AMP CSS validation.
6. AMP boiler plate.
7. Replace <img> with <amp-img>
8. Link AMP content
9. AMP page validation

STEP - 1
 First Create a ditto page in of html page which we converting.
example: article-amp.html
 Add the attribute ⚡ to the <html> tag in the head section.

STEP -2
Add CanonicalTag
 Every AMP document must posses a link referencing to its ‘canonical version’ of
that document.
 We must provide the absolute URL of original HTML page.
 Then the tag must be included in head section.
example: <link rel="canonical" href=“orginal-page-url.html“ />

STEP - 3
Include AMP library file on head section
 It can help us to figure out, what all we need to fix.
 Its always same for every files.
Example: <script async src="https://cdn.ampproject.org/v0.js"></script>

STEP - 4
 SPECIFY AVIEWPORT
 AMP requires definitions for width and minimum-scale for the viewport.
 Viewport is a common tag used in head section.
example: <meta name="viewport" content="width=device-
width,minimum-scale=1,initial-scale=1“ />

STEP - 5
AMP CSSVALIDATION
 In AMP page we cannot include external stylesheet.
 Reduce the size of stylesheet.css file to 50 KB.
 Embed the style sheet within <style amp-custom></style> tag as inline styles.
Example: <style amp-custom>
 /*The content from stylesheet.css */
 </style>

STEP - 6
AMP BOILER PLATE
 Add the AMP boilerplate code to the bottom of the <head> tag.
 Boilerplate helps to hide the content of body section until the AMP JavaScript
library is loaded.
 This code is common for AMP files.

STEP - 7
REPLACE <IMG> WITH <AMP-IMG>
 AMP designed special web component to replace the <img> tag with <amp-img>
tag and added to the body section of the HTML page.
 In AMP, we need to define the width, height and layout for amp-img elements.
 Attribute layout =”responsive” is provided to inform that our image can be scaled
and resize.
example:<amp-img src="mountains.jpg" layout="responsive" width="266"
height="150"></amp-img>

STEP - 8
LINK AMP CONTENT
 This is achieved by including a <link rel="amphtml"> tag to the <head> section of
the original non-AMP HTML page.
 Both versions have generally the same content, but have different presentations.
 So we should treat the traditional HTML pages as the “canonical” pages.
 Pair the AMP pages with canonical pages.
Example: <link rel="amphtml" href="/article-amp.html">

STEP - 9
AMP PAGEVALIDATION
 This is the last step in AMP optimization.
 Here we validate our AMP page created in AMP validator to check whether it is
optimized or not.

Allowed Prohibited
Script- Prohibited unless the
type
is application/ld+json, applicatio
n/json, or text/plain. <noscript>
Base
Image- Replaced with amp-img frame
form frameset
Audio- amp-audio param
Video- amp-video applet
input elements embed
button preconnect, prerender and
prefetch
Style- <style amp-custom>

CONCLUSION
 As the users are shifting to mobile, if you are not on mobile you
are losing visitors. Check your site mobile friendliness and add
AMP.
 Get ready for mobiles first index.

SOURCE: HTTP://SEOKOCHI.COM/WHAT-IS-AMP-AND-BENEFITS-OF-AMP/

What is Amp (Accelerated Mobile Pages)?

What is Amp (Accelerated Mobile Pages)?

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to What is Amp (Accelerated Mobile Pages)?

Similar to What is Amp (Accelerated Mobile Pages)? (20)

What is Amp (Accelerated Mobile Pages)?