Aug 20

What is AMP Project? A Comprehensive Guide

Speed is an essential measure when designing web pages, and therefore, Google launched the mobile-friendliness update and made it one of the mobile search engine ranking factors which have affected the site owners to have a quicker mobile experience. Pages that are AMP-enhanced rank well and faster and hence they can attract more mobile page visitors who are potential customers.

Accelerated Mobile Pages

Accelerated Mobile Pages is an open initiative platform targeted at facilitating publishers enhance the speed and legibility of their mobile content pages without sacrificing any ad revenue that they may rely upon. A typical example is taking a page that is already mobile friendly and enabling it to load more rapidly by stripping it down to basics.

An outline for creating mobile web pages, AMP consists of three essential parts namely:

AMP HTML

A subcategory of HTML, this markup language has some custom tags and features and lots of limitations. But if you are conversant with the regular HTML, then you are capable of adapting to the existing pages to AMP HTML with ease. The AMP plugin leaves your mobile page faster by cutting back on the HTML codes tag manager aspect and leaving only the ones that are appropriate for mobile users. Additionally, AMP makes your pages using optimized HTML code, where the pages are expected to load faster since the HTML code tag manager aspects that usually slows down the page are done away with.

AMP JS

A JavaScript outline for mobile pages. Aims at resource handling and allowing different loadings at the same time. Finally, AMP does not authority third-party JavaScript. Since the AMP Project provides its open-source JavaScript code known as AMP JS.

AMP CDN

An elective Content Delivery Network, it will take your AMP-enabled pages, store them and automatically make some performance optimizations.

What are the Benefits of Accelerated Mobile Pages?

There exists a significant relationship between site speed, page views, and mobile search engine rankings when you have AMP-optimized pages. One of the most important facts is that when a particular web page loads up faster, mobile browser users will view more pages on the site which will, in turn, reduce the bounce rate, hence reduced bounce rates results to increase in onsite experience and thus Google will reward the page.

Below are some of the benefits that will be experienced by enhancing with the AMP plugin;

Increased Fast-loading Web Pages

Having great content is essential only if your pages can be accessed easily as users will shy away from mobile browsers that takes time to load thereby reducing page views as the way people consume content that is articles, blog posts podcasts and even videos have changed over time. This implies that you will not be in a position to attract more mobile browser users who are the potential customers. On the contrary, if you have AMP-optimized pages, the page speed will be increased that will result in the increased mobile browser which is converted to customers.

Improved Mobile Search Engine Rankings

There exists a significant correlation between site speed and conversion rate. Typically, when the users are pleased with the fast-loading site the more they are likely to subscribe to the list or purchase a product. It is worth noting that page loading speed and mobile friendliness are well-known factors, bur AMP will work closely with mobile pages. Therefore, AMP is not an independent ranking factor. Pages developed with AMP ranks higher in the mobile results pages (MRPs) than non-AMP pages because sites that are mobile-friendly are rewarded with more top rankings in organic mobile search results.

Flexibility and Support

The apparent reason why most individuals start a website or blog is to earn income and possibly replace their routine job. But this cannot be achieved easily due to the distractions on the site’s pages such as header image, popups, navigational menu, sidebar and social share buttons, thereby lowering their conversion rate. With the use of AMP, you are capable of doing away with these distractions on your mobile browser pages, implying that can increase your influence and improve on Return On Investment(ROI) on ad spend.

The disturbances occur because not all HTML code tags are executed, you use a streamlined version of CSS, and JavaScript is out of the question. AMP is six times lighter in code, and therefore, if you analyze AMP versions of the Guardian, for example, you will instantly realize that it is designed to display ad in a more flexible and user-friendly manner than the typical mobile browser page.

Finally, when you are showing ads from a third party on your Accelerated Mobile Pages, make sure that you deliver ads that load faster but also remember to attract the user’s attention and give enormous value to retain them as they are your customers.

Simple User Tracking

It is essential to know how people have arrived at your site and this cannot be done by merely sending traffic to your mobile browser pages. Therefore, tracking will be of great help for this purpose. AMP has simplified tracking users and site performance as it has analytical tools, where you can study your AMP versions in more significant details. Also, user behavior can be influenced by the help of APM tracks them. Therefore, with AMP publishers can use such code manager analytics to choose from two codes, as these codes help to automatically track critical data, for example, clicks or conversions, video and link tracking.

Increased Mobile Browser Visibility

Since Google started displaying AMP results in organic listings, you can quickly identify these results by the AMP symbols that are Green which will tip to enhanced click-through-rate, as they stand out from the others due to their ability to load up pages faster than the typical mobile pages.

Optimizing for AMP

For beginners, you are required to keep at least two versions of an article page. Having the first version as the original version of your article page that users will typically see and the second version as the AMP version of the page. You will not be able to have first forms, on-page comments and other elements as compared to having your page in a standard implementation, because AMP does not allow things such as forms elements and third-party JavaScript. But thanks be to Conrad O’Connell who helped with a hack using iframes which provided a solution to these issues.

Moreover, you will have to modify your site template to put up with the limitations. For example, “all CSS in AMP must be in-line and be less than 50KB”. Since the custom fonts have loading intensiveness, therefore they must be loaded using a special amp-font extension to have better control of the loading.

Additionally, multimedia must be handled. Differently, that is images need to apply the custom amp-img element, and this must incorporate a clear width and height. When changing a legacy website to an AMP template, this can be very difficult in case the width and height attributes are not already in use. Furthermore, if the images are animated GIFs, you will be required to use a separate amp-anim extended component.

Just like images had a special amp-font extensionThere is a custom tag that must be used to set in locally hosted videos through HTML5, known as amp-video. For inserting YouTube videos, on the other hand – which the popularity of web videos are- there is a different extended component, amp-youtube.

There also exist support for things like slideshows via amp-carousel and image lightboxes through the amp-image-light box as well as social media set in for Twitter, Facebook, Pinterest, Instagram and Vine through their extended components.

For Google and any other technologies supporting the AMP project to perceive the AMP version of your article. You will need to alter the original version of the article page. With the original article page having the following tag importantly a canonical tag for AMP pages. For example as given <link rel=””amptml.”

Finally, the AMP Discovery page similarly indicates that some platforms that support AMP will need Schema.org Metadata that is used to show the content of the page.

Further, it suggests that Schama.org Metadata is a condition to make your content eligible to feature in the showpiece of the Google Search news carousel.

Monetization

With the increased levels of ad blocker has made it challenging for the publishers to monetize their websites. For some users, improving website load time has been a motivation to use ad blockers which in turn facilitates the increase in browsing speed.

With all these challenges, AMP has the solution for them, with the projecting stating: “A goal of the Accelerated Mobile Pages Project is to ensure effective and monetization on the mobile web while embracing a user-centric approach. Therefore the main objective of AMP is to provide support for a comprehensive range of ad formats, ad networks, and technologies in Accelerated Mobile Pages.” Some of the Popular and networks which are currently using the amp-ad extended components are; Google Ad Sense, AdReactor and Amazon A9.

Analytics

For you to avert several analytics tracking from reducing a speed of a site, they have implemented the following philosophy that states “measure once, report to many.” For you to enable analytics functionality with AMP effectively for your website, the following two paths are taken into consideration:

The Amp-Pixel Element

It is a simple tag that can be used to count pages views as a typical tracking pixel would, using a GET request, which is affected by some variable namely Title and Document_ Referrer.

The Amp-Analytics Extended Component

It is more advanced than the amp-pixel, and it is likely what you will use to implement analytics on your site since they permit for a higher level of configuration for analytics interaction which might include; event tracking and non-interaction events.

AMP on Google

Through the presence of Google Search, you can have AMP pages which aid in speedy and effectual web experience. Availability of AMP pages makes it easy to be found on the mobile search that is if you want to get the best results.

The AMP pages which are found on the mobile search will help you in faster identification of pages that load quickly and softly. When you select an AMP page, Google Search will be able to regain the page from Google AMP cache facilitating a variety of load optimizations that mostly make these pages appear immediately.

AMP Pages In Google Search Results

Your pages can appear as carousels which allows displaying multiple similar pieces of content like articles, live blogs and videos along with a horizontal axis and your pages can also look as rich result report which entails structured data such as headline text and images that shows up in Google Search results.

Categories of Search Features

Top stories carousels- a vessel that contains live posts and blogs, videos, news and business stories.

Host carousels-shows all items in a list which are of the same type such as an article for recipes, news articles, and videos.

The Google AMP Viewer

You can collect data through the Google AMP Viewer, and Google’s privacy policy directs data collection and for you are the one who chooses the behaviours in your AMP page, meeting the agreement responsibilities that result from your choices will be required.

AMP in WordPress

One of the simplest ways to get involved with AMP right away is to put it into practice on a WordPress website. An official plugin is being technologically advanced by WordPress, and it is often being updated on GitHub.

Step 1: Install The Official WordPress Plugin

To commence, go directly to the amp-wp GitHub page and click the Download Zip button. Once downloaded, you can install it on your WordPress site the same way you would do with any other WordPress plugin. Then you need to attach “/amp/” to an article page.

Step 2: Validate and Tweak

Once installed and attached, the Google Search Console should be able to pick up on the AMP version of the article through the rel=”amphtml” tag assigned by the plugin, allowing easy confirmation of the material in bulk.

But the only drawback is that it flexible enough to adapt to changes faster. Thus, if you fix something, the correction might take some days to show up.

Therefore, we recommend the use of a combination of the Search Console and Chrome validation process.

  • For you to use the Chrome validation process, proceed to one of the AMP pages in Chrome and attach “development=1” to the end of the URL. Press Control + Shift + I to access Chrome Developer Tools and head over to Console.
  • By just installing the WordPress plugin will not be enough as you will have to go through all the pages and validate them to achieve the benefits of Accelerated Mobile Pages.
  • Having considering how your articles are formatted, you may be required to make some changes to get the AMP pages to authenticate.

But this may have some difficulty with specifying height and width attributes of the image and correcting old Youtube insert codes that were not using https.

Step 3: Get Schema Markup to Validate

As seen earlier, it is essential to have valid schema markup on the AMP pages. For you to determine the validity of the increase, you can use Google’s Structured Data Testing Tool. Remember to replace the URL with a path to your publisher logo and to state clearly the height and width in pixels.

Step 4: Getting Google Analytics Working With the AMP WordPress Plugin

A website has no importance if it cannot be tracked and therefore, in order for you to enable the AMP WordPress plugin work with Google Analytics, edit the amp-post-template-actions.php, a different file from that mentioned before, either through FTP or just within your WordPress Dashboard and further, ensure that you have changed UA-XXXX-Y to signify your website’s Google Analytics property ID.

Finally, re-validate AMP pages and you need to have a primary AMP system with tracking enabled for the WordPress website.

AMP has great importance to the users and upgrades to mobile-friendly pages as it facilitates us to meet Google’s expectations that you optimize your site for speed. Additionally, the publishers will be able to earn more income as a result of reduced ad blockers.

AMP also provides a relatively easy way to improve the speed of mobile websites for a publisher which will attract many people to subscribe to the page or even purchase the product, and these subscribers are easily converted to customers.

AMP allows optimizations to be done with a lot of ease without tampering with the primary mobile web experience.

About The Author

Ajay Chavda is the co-founder of Weboptimizers, an SEO agency in Melbourne and has been involved with SEO for over 15 years. Between the digital properties and security forums he has managed, his articles have been read by approximately 50 million unique visitors.

Leave a reply

Your email address will not be published. Required fields are marked *