AMP Validator

AMP Validator

Validate your AMP pages with this free tool

Test Accelerated Mobile Pages with AMP Validator tool, get detailed report and optimize your site performance

Insert Url to test

Include protocol type (http or https)

AMP: Accelerated Mobile Pages

What is AMP and why use it?

AMP pages load faster and look better than standard HTML pages on mobile devices.

AMP is a web component framework to easily create user-first websites, stories, ads and even email.

If you've ever searched for content and interacted with the results on a mobile device, you've probably encountered AMP (), or Accelerated Mobile Pages.

AMP is an open source framework developed by Google in collaboration with Twitter. Accelerated Mobile Pages create better, faster experiences on the mobile web.

At its core, the framework allows you to build lightweight experiences for mobile by simplifying the HTML and following streamlined CSS rules.

Since the majority of content on media sites is static, these websites have seen significant boosts in organic search traffic. In addition, Google has also made it simple for publishers to make their content stand out with Rich Cards.

All SEO and mobile performance enthusiasts seem to agree that a well-implemented AMP website will:

  • 6x significantly increase the volume of organic search traffic;
  • 23% increase engagement and conversions resulting from faster, better mobile experiences,
  • 3x reduce the load on your servers since AMP CDN caches and responds to most search results;
  • Provide an opportunity for your content to be featured prominently in AMP carousel on mobile search results.

How does AMP work?

AMP framework has 3 main parts:

AMP HTML
Think of AMP HTML as a leaner version of regular HTML. The AMP framework has strict rules for the HTML tags you can use. To ensure fast page load, certain HTML elements like forms are not allowed on AMP.

AMP framework also requires that you use a streamlined version of CSS. View the full list of required HTML tags for AMP framework.

AMP JS
To ensure fast page load on mobile platforms, AMP restricts the use of any Javascript. The only exception is for AMP scripts, which are optimized with page load acceleration in mind. What AMP takes away with JS, it provides with a library of easy-to-implement components.

You can create animations, load content dynamically, modify layout, and more using AMP component library.

AMP CDN
Commonly known as AMP Cache, a critical component of AMP platform is its proxy-based content delivery network (CDN). The CDN fetches AMP content and caches it for fast delivery. By default, the AMP CDN caches all valid AMP content and does not provide an option to opt out.

However, you can continue leveraging your own CDN provider on top of AMP cache to customize your content delivery configurations.

Example of "Hello word" AMP page:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="hello-word.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <meta name="title" content="This is my AMP page.">
    <meta name="description" content="This is my Hello Word AMP page.">
    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <!-- Import other AMP Extensions here -->
    <style amp-custom>
    /* Add your styles here */
    </style>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
 
    <link rel="canonical" href=".">
    <title>My AMP Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
            

AMP Cache

AMP pages can be cached for near instantaneous loading on the web. Platforms like Google run AMP caches to enable fast loading of your content from their service.

The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically.

When using the Google AMP Cache, the document, all JS files and all images load from the same origin that is using HTTP 2.0 for maximum efficiency.

The cache also comes with a built-in validation system which confirms that the page is guaranteed to work, and that it doesn't depend on external resources. The validation system runs a series of assertions confirming the page's markup meets the AMP HTML specification.

Share this tool

Did u like it? Share it!

Related tools

Try these one!
W3C CSS Validator

CSS VALIDATOR

Validate your Css file sheet with W3C validation Service.

Check if the markup of your Cascading style Sheet document is W3C compliant.

GO VALIDATE
W3C validator

W3C VALIDATOR

Validate your pages with W3C Markup Validation Service.

Check the markup validity of HTML5 web documents with W3C Validator.

GO VALIDATE
Validate your AMP pages

AMP VALIDATOR

Validate your AMP pages with this tool.

Test your Accelerated Mobile Pages, get detailed report and optimize performance.

GO VALIDATE
Network requests and timeline waterfall

NETWORK WATERFALL

Capture web page requests and timeline waterfall.

Quickly capture and analyze web page network requests during page load.

GO ANALYZE