AMP验证报错：'img'标签仅可作为'noscript'子元素，如何解决？

Hey there! Let's tackle that pesky AMP validation error you're facing—it's one of the most common issues when setting up AMP pages, so you're definitely not alone.

Why This Error Happens #

AMP enforces strict rules to guarantee fast, consistent loading across devices. Regular <img> tags aren't allowed in AMP pages by default because they don't follow AMP's optimized loading behavior. Instead, AMP requires you to use its dedicated <amp-img> component, or wrap standard <img> tags in <noscript> as a fallback for non-AMP environments.

Solution 1: Replace <img> with <amp-img> (Recommended) #

This is the best approach since <amp-img> is built specifically for AMP's performance requirements. Here's how to make the switch:

• Basic Replacement
  Original <img> tag:

  <img src="your-image.jpg" alt="A descriptive alt text">
  

  Updated <amp-img> tag:

  <amp-img src="your-image.jpg" alt="A descriptive alt text" width="600" height="400" layout="responsive"></amp-img>
  

• Key Details to Note

  • You must include width and height attributes (these should be the original dimensions of your image—AMP uses them to calculate layout before the image loads).
  • Use the layout attribute to control how the image scales:
    • layout="responsive": The image will adapt to its container width while maintaining aspect ratio (great for mobile-friendly designs).
    • layout="fixed": The image stays at the exact width and height you set.
    • layout="intrinsic": Similar to responsive, but the image won't exceed its original size.
    • layout="fill": The image fills its parent container (use this with a positioned parent element).

Solution 2: Wrap <img> in <noscript> (Fallback Only) #

If you need to keep a standard <img> tag for browsers that don't support AMP, wrap it in <noscript>. This is only intended as a fallback—your AMP page's primary images should still use <amp-img> to maintain performance.

Example:

<noscript>
  <img src="your-image.jpg" alt="A descriptive alt text">
</noscript>

Quick Tips to Avoid Future Errors #

• Double-check dynamic content (like images added via a CMS or JavaScript) to ensure they're using <amp-img> or wrapped in <noscript>.
• Use AMP's development mode (add #development=1 to your page URL) to see real-time validation errors in your browser's dev tools.
• Remember: <amp-img> is a core AMP component, so you don't need to add any extra script tags to your page header to use it.

Once you update all your <img> tags using one of these methods, re-run the AMP validation, and those errors should be gone for good! If you run into edge cases (like SVG images or responsive images with srcset), feel free to ask for more help.

内容的提问来源于stack exchange，提问作者user9793164