What are Google AMP pages and how to get started…
Google AMP pages (Accelerated mobile pages) is a project started by Google & Twitter with the aim of delivering faster web page delivery to mobile devices.
Google Accelerated Mobile pages (AMP) are accessible for everybody to utilize and the HTML source code can be found on their GitHub page.
Simply put, AMP is fundamentally a stripped down HTML page which limits certain HTML, CSS, and Javascript which in effect streamlines css and basically stops you using your Javascript and instead your pages are used creating a suppiled Javascript library instead. Some intriguing prerequisites to make a note of:
- Permits just asynchronous scripts
- All CSS must be inlined
- Styles are restricted to 50KB
- Outside resources like pictures must express their size in HTML
- All Javascript must be out of basic way
- No client composed Javascript is permitted, just AMP bolstered
- Text styles must be stacked with a connection tag or a CSS @font-face principle
There are two main parts of Google AMP pages:
Google AMP Page Speed
Regardless of the fact that there’s nothing official here from Google itself, tests demonstrated AMP pages loads by and large 4x quicker than any mobile-enhanced page.
Google AMP comprises of three fundamental elements, particularly:
AMP HTML: a subset of HTML, with custom tags and properties, for example, amp-advertisement, amp-img, and amp-video
AMP JS: a JavaScript structure for mobile pages that oversees resource taking care of and results in stacking asynchronously all outer resources
Google AMP Cache: an intermediary based CDN for conveying all legitimate AMP pages
How quick a page loads can rely on numerous components that are not listed here. What’s imperative here for you to comprehend is that Google AMP pages are lightweight forms of a given page that, by its own tendency needs to ignore something for it to be very quick while loading. With the AMP HTML, they dispose of “unnecessary” tags, with all non-compliant Javascript and they also get the chance to influence a CDN from Google for the aspect of delivery
At the end of the day, Google AMP pages are what you could get if you’d pass standard HTML pages through a sifter conveyed with a forceful caching framework.
How Google AMP influences SEO
Is Google starting to weight AMP pages SEO?
AMP-empowered articles and pages rank higher in SERPs already. Actually, on the off chance that you run a test on g.co/ampdemo for “Beyonce”, you’ll perceive how these AMP-empowered pages are up on the page, appeared over the fold, positioning for the second result (even before Beyonce’s authentic Twitter and Instagram pages):
Higher positions likely mean your pages will get more clicks and consequently, your content will encounter more traffic and user engagement.
Implementing Google AMP on your website
For one thing, you will need to keep up no less than two forms of any article page: The first form of your article page that clients will commonly see, and the AMP rendition of that page.
Since AMP doesn’t allow things, for example, structure elements and outsider JavaScript, you likely won’t have the capacity to have lead shapes, on-page remarks and some different elements you might be accustomed to having on your page in a standard usage.
It is very likely that you will need to modify your site layout to oblige the limitations. For instance, all CSS in AMP must be in-line and be under 50KB. Because of stacking escalation of custom textual styles, they should be stacked utilizing a unique amp-text style augmentation, so as to better control that stacking.
Multimedia must be taken care of uncommonly. For instance, images need to use the custom amp-img element and must incorporate an unequivocal width and tallness. Moreover, if your images are vivified GIFs, you have to utilize the different amp-anim augmented part.
Like images, there is a custom tag that must be utilized to embed privately facilitated recordings by means of HTML5, called amp-video. For embedding YouTube video, however — which the greater part of web recordings are — there is a different amplified segment, amp-youtube.
There is likewise bolster for things, for example, slideshows by means of amp-merry go round and image lightboxes by means of amp-image-lightbox, also social media embeds for Twitter, Instagram, Facebook, Pinterest and Vine by means of their own amplified parts.
These tag and stretched out parts aren’t hard to utilize; they simply require some arranging in your site plan.
All together for Google (and different innovations supporting the AMP Project) to distinguish the AMP form of your article, you should change the first form of the article page.
WordPress websites can take advantage of an AMP plugin to
Conclusion
Whether AMP is here to stay is up for debate, but it looks like it is at the moment so it’s something you need to look into.
Moz have a really good video on AMP pages that you may like to watch to learn more about the basic principles.