1. Prepare the page layout. First, you need to prepare the design of the site pages, and you need to do this manually. The page must contain the required attributes, Using Amp Technology and you can learn more about them in the manual. It is convenient to use the AMP generator to help you create pages.
2. Prepare scripts. There are many elements on the website of the online store that is connected using external scripts. However, in the AMP format, it cannot connect external scripts. Otherwise, the code will be invalid from the point of view of the AMP format. Therefore, AMP developers have created ready-made scripts for almost any element of an online store embedded in the AMP format. You can find out what parts can be made using built-in hands in the instructions: hamburger menu, the list with a drop-down menu (accordion), scroll to the top of the page, image gallery, pop-ups, and lightboxes, hidden text, tabs in the product card.
3. Connect micro-markup. Yandex does not work with the AMP page format and the JSON-d micro-markup format, and the search engine will not read these pages. Therefore, we can use the JSON-d form of micro-markup. Don’t forget to check the markup through the validity. You can use the Google Markup Wizard and the Schema.org Markup Generator to help you create micro- markup.
4. Link master and AMP pages. For the site to work correctly, you need to tell Google that a regular HTML page has an alternative version in the AMP format. How to do it: add a link tag to all HTML pages and show a link to similar AMP pages, and on AMP pages, include a link to pages in HTML in the link tag. This will link the pages to each other so that the search engine sees both the primary and alternative pages. Again, you can find out more about how to do this in the manual.
5. Submit the pages for reindexing is needed so that Google analyzes page updates and takes them into account when ranking. How to speed up reindexing for all multiple pages of the site: add Last-Modified to the response in the server header – using this header, you can show the browser that recently changed the page. You can also update the change date in the Sitemap and set a top priority so that the search engine sees the need for reindexing
6. Configure the traffic channel. After implementing the AMP format in Google Analytics, a new traffic source or medium will appear. This happens because the address is displayed not from your server but the Google cache: if a user went from the search results to the AMP version of the page and then got to the main page, this is a new traffic source for Google. Transactions that should have gone to the Organic channel in Google Analytics go to a fresh start and fix this. The first way is to add filters to Google Analytics that will record traffic to Organic. The second way is to link visits on the AMP versions of pages and the main pages using the linker tag. Read more about the second method in the manual.
7. Correct any errors. It displayed the major mistakes incorrectly due to which AMP pages are incorrect image formats, invalid attributes, invalid tags, etc.
Case: how has the download speed changed after introducing AMR?
Nikita Selivanov shared the results of implementing the AMP format on the website of the online store Dgsol.
· immediately after reindexing, the AMP version of the page took the principal place in the search results and got higher positions;
· loading speed has become six times faster than similar pages in HTML;
· page visibility in Google Organic increased by 4.4%;
· Google Organic traffic grew by 14%;
· Conversion to Google Organic dropped by 0.02%.
AMP (formerly Accelerated Mobile Pages) is an open-source HTML framework created by the AMP Open Source Project. It was developed by Google as a competitor to Facebook Instant Articles and Apple News. AMP is designed to make web pages load faster on mobile devices.
AMP works by separating the document layout from the resource layout, and only one HTTP request is required for the entire page to render. Because AMP is optimized this way that it works around expensive recalculations of layouts within the browser so that when the resources load there won’t be any re-layouts.
Put simply, AMP builds static web pages (pages that don’t change depending on user behavior), so that they load (and pre-render in Google search) much faster than regular HTML.