htmlamp-htmlamp-img

AMP images in readers


I have a website with AMP pages that allow editors to add images to the page. The images are displayed using an amp-img element and render in any normal browser.

When either user a reader view or being crawled by a site such as Embedly the amp-img elements are not displayed.

I assume this is caused by the amp-img element not being a valid HTML element so is ignored. Is there anyway to get around this issue?


Solution

  • You can add a noscript element for renderers not using javascript:

    <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800">
      <noscript>
        <img src="welcome.jpg" alt="Welcome" height="400" width="800" />
      </noscript>
    </amp-img>