More

    AMP Test: The Complete Guide to Testing Your Accelerated Mobile Pages

    Google launched Accelerated Mobile Pages – simply known as AMP – to make mobile web browsing faster.

    AMP allows you to rank higher in the mobile search results. However, only valid AMP pages are eligible to be displayed in the search results.

    Proper AMP testing is extremely crucial in order to remove any errors or warnings and get your pages indexed by Google.

    This guide will help you to understand the types of AMP errors and how you can fix them.

    Identify & Fix AMP Errors During the Development Stage

    Here are some tools that come in handy when fixing your AMP errors:

    1. Browser Developer Tools

    Follow the steps below to get started:

    • Open the AMP page in your browser.
    • Add “#development=1” to the URL, for example, http://localhost:8000/example.amp.html#development=1.
    • Go to the Chrome DevTools console and check for validation errors. The errors will be listed as shown in the below screenshot.
    validator errors amp

    2. AMP Validator Browser Extension

    Download the AMP Validator browser extension for Chrome and browse the pages on your site.

    This plugin will automatically check each page for AMP validation.

    AMP validator

    It will turn to green if the page passes AMP validation or turn to red if the page fails the test.

    3. AMP Web Validator

    With the help of AMP validator, you can directly paste your source code and check for any possible errors.

    This tool will let you know the validation status by displaying PASS or FAIL.

    AMP web validator

    Once you’ve fixed all your AMP errors during the development stage, you can upload them on the main server.

    Re-Check the Validity of AMP Pages After You Upload Them on the Main Server

    After you upload the pages on the server, recheck the validity of the pages with the help of the AMP test tool by Google.

    Monitor AMP Pages Regularly via Search Console

    Once you have validated and uploaded the AMP pages on the main server, the pages will start displaying in Google’s search results. Now, it’s time to regularly monitor the pages with the help of the Google Search Console. There are some errors that you can’t find during the development phase and such errors are identified only after Google crawls and indexes your site.

    Let’s discuss how we can identify and fix such errors.

    Identify Errors in AMP Pages Using Google Search Console

    You can find this tool under Search Console > Search Appearance > Accelerated Mobile Pages.

    AMP search console

    Here, you will find all the AMP errors or warnings that Google may have identified on your website. A sample report is shared below:

    47 Experts on the 2019 SEO Trends That Really Matter
    Structured data, exceptional content, and machine learning are among the most important SEO trends to know about in 2019. Get your free ebook to learn more.DOWNLOAD NOWADVERTISEMENT

    AMP error report

    Once you’ve identified which URLs are having the issues, the next step is to fix them.

    Common AMP Errors & How to Fix Them

    1. Content Mismatch Error

    This error happens when there is a difference between the AMP and canonical web page.

    How to Fix It

    Ensure that your AMP is referencing to the correct canonical web page. The correct format is provided below:

    Add the following to the non-AMP page:

    <link rel=”amphtml” href=”https://www.example.com/url/to/amp/document.html”>

    And this to the AMP page:

    <link rel=”canonical” href=”https://www.example.com/url/to/full/document.html”>

    2. Missing Embedded Video Error

    This error is detected when the AMP page is missing a video that is seen in the canonical page.

    How to Fix It

    Ensure that you don’t have two different URLs pointing to the same video. The video URL should be the same in both the AMP and canonical versions.

    3. Invalid Attribute Error

    This error happens when the HTML tag has an attribute having the value that is not allowed.

    How to Fix It

    Check the AMP HTML specification and fix the attribute value to something that is valid. Many times the required attribute is an HTTPS which goes missing.

    4. Prohibited Attribute Error

    This error happens when you’re using an attribute that is disallowed.

    How to Fix It

    Check the supported attributes for each tags and fix the one that is disallowed.

    5. Mandatory Tags Missing

    This error is identified when the page is missing any of the mandatory tags.

    The following tags must be present in all AMP pages:

    ⚡

    <!doctype html>
    <html amp> or <html >
    <head>
    <link rel=”canonical” href=”$SOME_URL”>
    <meta charset=”utf-8″>
    <meta name=”viewport” content=”…”>
    <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>
    <script async src=”https://cdn.ampproject.org/v0.js”></script>
    <body>

    How to Fix It

    If you’re missing any of the above-listed tags then ensure to add it in order to get rid of this error.

    Some Helpful Resources

    Here are some helpful AMP resources you should know:

    Recent Articles

    Twitter’s Web App Now Supports Saved Drafts, Scheduled Tweets

    What began as an experiment last fall is now rolling out to all main web app users. Twitter this week announced a new feature that lets folks...

    Get 30% off custom Ray-Ban eyewear when you use Apple Pay

    Apple’s latest Apple Pay promo will get you 30% off custom sunglasses or eyeglasses from leading brand Ray-Ban. Since prices for glasses are over $100,...

    Take your DIY decor projects next level with Cricut Maker at $299 (Reg. $369)

    Amazon is now offering the Cricut Maker craft cutting machine for $299 shipped in all colorways. Also matched directly from Cricut. Regularly up to $369, today’s deal is...

    Facebook’s New App Wants Sports Fans Looking at Their Mobile Phones

    Facebook has created an app that’s designed to lure the eyeballs of sports fans from their televisions to their mobile devices. The app, dubbed Venue, comes...

    Facebook to Verify the ID of Suspiciously Popular Accounts

    If a 'pattern of inauthentic behavior' is detected for an account with a large audience in the US, Facebook will trigger a verification process. Facebook...

    Latest Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here

    Stay on op - Ge the daily news in your inbox

    Do NOT follow this link or you will be banned from the site!
    Translate »