Whole Webpage or Extra Blocks Loaded Inside AMP IFRAME

When navigating to the Magento AMP Product page, users may see a whole webpage or extra blocks loaded inside AMP Iframe

Here is an example of this issue on Magento 2 AMP page frontend:

Issue Description

The issue happens when third-party extensions or themes modify product page layout and thus add additional content.

Solution

Step 1

Go to your AMP Product page and open Iframe source in a new window:

Step 2

Enable template path hints and find Magento blocks you want to delete in Iframe.

Step 3

Go to your theme folder and create the following file:

app/design/<Vendor>/<amp_theme>/Plumrocket_AmpCatalog/layout/amp_catalog_product_view_only_options.xml

Step 4

Remove the extra blocks you found in step 2 using layout instructions.

Step 5

Clear the Magento cache.

Step 6

Now go back to your browser and refresh the AMP product page. The AMP Iframe should be displayed correctly.