AMP stands for Accelerated Mobile Pages, a Google-backed project designed as an open standard for any publisher to have pages load quickly on mobile devices.
The AMP Project is an open-source initiative aiming to make the web bettiteer for all leveraging website development technology. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.
Emergence and Benefits of AMP
Accelerated Mobile Pages (AMP) development project aims to make pages load instantly on Mobile devices. This project backed by Google and gained support from publishers and platforms like Twitter, analytics tools.
On Feb. 24, 2016, Google officially integrated AMP listings into its mobile search results. Pages making use of AMP coding appear within special places in the search results and/or with a special “AMP” designation. Checkout below screenshot :
AMP stripped down your web pages in compare to normal web pages to load it very quickly on mobile device over 2g or 3g connection. It’s not too much fancy in terms of design but it must contain all necessary information which users require including read more links.
Google’s launch of accelerated mobile pages in its search results appears to have started a day earlier than expected. People are now reporting AMP listings showing in the mobile search results.
For more about AMP, see the AMP Project site. In this document we have also covered “How to get started with Accelerated Mobile Pages (AMP)”.
Pros & Cons for AMP
I would say most of the pros are on the user side and majority of the cons are on the developer side so it’s a compromise. Overall, Google’s main focus was to create a better user experience and that’s exactly what Accelerated Mobile pages does. Let’s have a look at them :
|Your mobile content loads INCREDIBLY fast.||Load time is not a direct ranking factor for organic search results. There is some conjecture over the fact that faster loading sites mean better click-through rates and longer time on site.|
|Your mobile content appears in a special carousel at the top of the organic search results.||There is some work involved to use AMP. If your organization is strapped for resources, this is more than just “flipping a switch.”|
|It’s Google approved, so it does help with bot accessibility||Without the WordPress plugin it’s hard to implement unless you know code|
|Implementation is easy – especially in WordPress, it’s just a plugin||Custom site styling doesn’t carry over, it’s Google default format|
|No lead generation forms||No external CSS; only inline up to 50KB|
|Creates a great user experience||Really only for news or blog articles|
|Rank pages higher in Google||Domain authority could suffer|
|Possible carousel spot in mobile SERP’s||Will require additional developer time|
How we can introduce AMP for commercial use
AMP (Accelerated Mobile Pages) is a language library for web pages (“AMP HTML” and “AMP JS”) intended to speed up the mobile rendering experience.
Implementing makes the assumption that:
- a) your audience’s device is on a slow connection, and
- b) that your business could benefit from the faster load and render times offered by the format and associated CDN.
Google are currently testing AMP pages in their mobile organic search results.
There is a question in your mind : Should I implement AMP pages on our site?
Put simply, AMP is supposed to deliver faster page rendering when compared to the render time of the same web page using conventional HTML/CSS/JS. If you’re a WordPress user it’s really easy to implement by following instruction give in this document.
As with many large scale attempts to encourage web developers to change, Google has announced that there may be a ranking boost for those that implement AMP pages on their sites. Given the history of those types of announcements, I’ll remain more than doubtful. There could be a benefit via a CTR(Click-through rates) increase; the theory goes that if a user sees an AMP flash in the search result, they’ll be more likely to click and engagement improves.
The AMP system also has an impact on how your site appears in the search rankings – boosting the user experience to make it easier to scroll between the rankings to find the page you want. On the search engine results page for a mobile device, a user can click through a list of AMP-compliant websites.
The content loads almost instantaneously as Google pre-renders the content above the fold for AMP listings. When a user clicks on a site, a persistent blue bar appears at the top of the page, with a call to action to return to the search results page.
Mainly we can propose our all WordPress website clients to implement AMP to their website as it’s very simple to integrate and take less efforts to achieve Great result for Mobile SEO. Also we can start practicing to create AMP websites in Laravel, YII, and other platforms as they are easy to customise than other CMS.
HTML Tags for AMP
HTML tags can be used unchanged in AMP HTML. Certain tags have equivalent custom tags (such as <img> and <amp-img>) and other tags are outright prohibited:
|Tag||Status in AMP HTML|
|script||Prohibited unless the type is application/ld+json. (Other non-executable values may be added as needed.) Exception is the mandatory script tag to load the AMP runtime and the script tags to load extended components.|
|img||Replaced with amp-img.
Please note: <img> is a Void Element according to HTML5, so it does not have an end tag. However, <amp-img> does have an end tag </amp-img>.
|video||Replaced with amp-video.|
|audio||Replaced with amp-audio.|
|iframe||Replaced with amp-iframe.|
|form||Allowed. Require including amp-form extension.|
|input elements||Mostly allowed with exception of some input types, namely, <input[type=image]>, <input[type=button]>, <input[type=password]>, <input[type=file]> are invalid. Related tags are also allowed: <fieldset>, <label>|
|style||Required style tag for amp-boilerplate. One additional style tag is allowed in head tag for the purpose of custom styling. This style tag must have the attribute amp-custom.|
|link||rel values registered on microformats.org are allowed. If a rel value is missing from our whitelist, please submit an issue. stylesheet and other values like preconnect, prerender and prefetch that have side effects in the browser are disallowed. There is a special case for fetching stylesheets from whitelisted font providers.|
|meta||The http-equiv attribute may be used for specific allowable values; see the AMP validator specification for details.|
|svg||Most SVG elements are allowed.|
Major semantic tags and the AMP custom elements come with default styles to make authoring a responsive document reasonably easy. An option to opt out of default styles may be added in the future.
@-rules : The following @-rules are allowed in stylesheets:
@font-face, @keyframes, @media, @supports.
@import will not be allowed. Others may be added in the future.
Usage of the !important qualifier is not allowed. This is a necessary requirement to enable AMP to enforce its element sizing invariants.
These CSS properties are permanently banned:
AMP only allows transitions and animations of properties that can be GPU accelerated in common browsers. We currently whitelist: opacity, transform (also -vendorPrefix-transform).
More details can be found here : https://www.ampproject.org/docs/reference/spec
Accelerated Mobile Pages, or AMP, is a Quick Mobile Page platform that accumulates to increase the functionality and features of the HTML site for the mobile platform or to develop a responsive website design.
By customizing the content and access, the user was taken into account to load and facilitate navigation. It was also created with the publisher to offer an editor, which helps websites monetize in a way that does not affect the quality and speed of the main content. Although it will definitely take some time to optimize the heritage sites, but has yielded good results in performance and profitability as we move forward in the world of mobility.
If you are having a requirement to gain advantage of AMP for your existing website or to develop a new website, hire website developers from Let’s Nurture to give your business a reason to gain momentum.
And yes, if you have some good knowledge to share regarding this, or if you want to know more about AMP and website design and development, do not hesitate to put your thoughts in the below comment box. Follow us on Twitter @letsnurture to chat with us.
You can also join our wonderful team of website development by submitting your details here.