What Does “AMP Page is Invalid” Mean?
“AMP page is invalid” in the context of a site audit typically refers to issues detected in pages designed to use the Accelerated Mobile Pages (AMP) framework. AMP is a project by Google that aims to make web pages load faster on mobile devices. For a page to be considered a valid mobile-optimized, it must adhere to the strict specifications and guidelines set by the AMP project.
When you see “AMP page is invalid” in a site audit, it means that one or more of your mobile-optimized pages are not meeting these specifications. This can occur for a variety of reasons, including:
- Invalid HTML Tags: The use of HTML tags that are not allowed in AMP.
- Disallowed JavaScript: The inclusion of custom JavaScript which is not permitted in AMP pages.
- Invalid Attributes: Use of attributes on HTML tags that are not allowed or are used incorrectly.
- Missing Required Tags: Failure to include certain mandatory AMP-specific tags or attributes.
- CSS Violations: Use of CSS that exceeds the AMP size limit or is not inlined properly.
- Validation Errors: General syntax errors or issues that violate AMP validation rules.
How to Check the Issue?
Mobile-optimized page that contains invalid URLs must be carefully examined to find any validation errors. First of all, make sure that you can discover your AMP page from a third-party platform. Then, use the specialized browser or web tools for detection.
You can also watch a training video by Daniel Waisberg for a better understanding of how to use Google Search Console and detect all AMP issues on time.
Try our useful tool that immediately detects pages with validation errors.
Find out not only the information about AMP Pages having validation errors, but also the presence of technical errors on it!
Conduct a full audit to find out and fix all the site level and page level issues on your website.
How to Fix the Issue?
To fix the “AMP page is invalid” issue, follow these steps:
1. Validate the AMP Page
Use the AMP Validator tool to check your page for errors. You can also validate directly in the browser:
- Open the mobile-optimized page in your browser.
- Append #development=1 to the URL (e.g., https://example.com/amp-page.html#development=1).
- Open the browser’s developer console (usually with F12 or Ctrl+Shift+I).
- Look for validation errors in the console.
2. Identify Common Issues
- Remove or replace any HTML tags not allowed in AMP.
- Ensure only AMP-specific JavaScript is used. Custom JavaScript is not allowed.
- Check for attributes on HTML tags that are not permitted or used incorrectly.
- Make sure all required AMP tags are included, such as the <html amp> declaration and the AMP script.
- Ensure CSS is inlined and does not exceed the 50KB limit. Also, make sure it follows AMP’s CSS restrictions.
- Use AMP-specific components like <amp-img> for images, <amp-video> for videos, etc.
3. Fix Errors
Replace invalid HTML tags and attributes with their AMP-compliant counterparts. Ensure that your HTML includes the required AMP tags, such as:
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>AMP Page</title>
<link rel="canonical" href="https://example.com/amp-page.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<style amp-custom>
/* Your inline CSS here */
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Add AMP components scripts as needed -->
</head>
<body>
<!-- Your AMP content here -->
</body>
</html>
4. Use AMP Components
Replace <img> tags with <amp-img>:
<amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>
Use <amp-video>:
<amp-video width="640" height="360" layout="responsive" poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
</amp-video>
5. Revalidate the Page
After making the changes, use the AMP Validator tool or browser console method again to ensure all issues are resolved.
6. Regular Maintenance
Continuously monitor your mobile-optimized pages for compliance, especially after making updates or changes. Keep up-to-date with the latest AMP guidelines and best practices from the official AMP documentation.
By following these steps, you should be able to identify and fix issues causing your mobile-optimized pages to be invalid, ensuring they are compliant and performant.
