What does 'AMP Markup Error' mean in Site Audit?

AMP Markup Error

Description

This AMP page contains markup errors that may prevent it from being properly recognized as AMP.

How to Fix

Fix the markup errors according to the AMP HTML specification.

Detailed Analysis

AMP (Accelerated Mobile Pages) is a web component framework that facilitates the creation of fast-loading web pages. AMP markup errors can prevent pages from being recognized correctly as AMP, impacting their performance and visibility in search results. Here's an in-depth look at this issue:

1. What Causes This Issue

AMP markup errors occur when the HTML of an AMP page does not conform to the AMP HTML specifications. Common causes include:

Invalid AMP HTML Tags: Using HTML tags or attributes that are not allowed in AMP. For example, using a <script> tag for custom JavaScript, which is not permitted in AMP, can cause errors.
Missing Required Tags: Failing to include mandatory AMP-specific tags, such as <amp-img> for images instead of the standard <img> tag.
Incorrect Use of Components: Misuse or incorrect configuration of AMP components like <amp-carousel> or <amp-form>.
Improper Attribute Use: Incorrect or missing attributes on AMP tags, such as layout, width, or height.
CSS Violations: Exceeding the CSS size limit (50KB) or using disallowed styles and selectors.

2. Why It's Important

Search Engine Visibility: AMP pages are prioritized in Google mobile search results and may appear in the AMP carousel, increasing the visibility of content.
Page Load Speed: AMP ensures pages load quickly, improving user experience and reducing bounce rates.
SEO Benefits: Faster-loading pages can lead to better engagement metrics, which can positively influence search rankings.
User Experience: AMP pages enhance the mobile browsing experience, crucial for retaining mobile users and reducing bounce rates.

3. Best Practices to Prevent It

Validate AMP Pages: Use the AMP Validator tool to check your pages for compliance with AMP standards. Correct any errors detected by the tool.
Use AMP Components: Replace standard HTML tags with their AMP equivalents, like <amp-img> for images and <amp-video> for videos.
Stay Updated with AMP Guidelines: Regularly review AMP documentation for updates to the specification and ensure your pages remain compliant.
Limit CSS Size: Ensure that your CSS is under the 50KB limit imposed by AMP and uses only supported styles.
Test Regularly: Continuously test AMP pages, especially after updates or changes to the page, to catch and fix any new errors early.

4. Examples of Good and Bad Cases

Bad Case:

<!DOCTYPE html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>Example AMP page</title>
  <script src="https://example.com/custom.js"></script> <!-- Invalid use of custom JS -->
  <link rel="canonical" href="https://www.example.com/amp-page.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-custom>
    /* Large CSS which exceeds 50KB */
  </style>
</head>
<body>
  <img src="image.jpg" alt="Image"> <!-- Should use <amp-img> -->
  <amp-video src="video.mp4" width="640" height="480" layout="responsive"></amp-video>
</body>
</html>

Good Case:

<!DOCTYPE html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>Example AMP page</title>
  <link rel="canonical" href="https://www.example.com/amp-page.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-custom>
    body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
  </style>
</head>
<body>
  <amp-img src="image.jpg" width="600" height="400" layout="responsive" alt="Image"></amp-img>
  <amp-video src="video.mp4" width="640" height="480" layout="responsive" controls>
    <source type="video/mp4">
  </amp-video>
</body>
</html>

By adhering to these guidelines and practices, you can ensure your AMP pages are error-free and optimized for performance and visibility in search results.

Updated about 5 hours ago