How to load external header and footer HTML in AMP-HTML pages

Question

I am converting an existing HTML to AMP-HTML. In older HTML I am loading footer and header which are in separate HTML files which are loaded by using jquery as mentioned in the below code.

$("#divHeader").load('../header.html');

$("#divFooter").load('../footer.html');

These HTML have only static data. Is there any way to add these HTML in AMP pages? I cannot use amp-iframe because amp-iframe cannot be within first 75% of the viewport and has to be 600px away from the top as mentioned in this link.

Answer 1

AMP cannot contain any type of external stylesheet or scripts. For your HTML file, you might have used the HTML partials to load. But in the case of AMP pages, you cannot include that, you have to explicitly write your header and footer in AMP

In the official doc here, under the HTML Tags heading it is specified that

Scripts are Prohibited unless the type is application/ld+json. (Other non-executable values may be added as needed.) An exception is the mandatory script tag to load the AMP runtime and the script tags to load extended components

Answer 2

If your are using PHP, or you're able to convert your pages to PHP, you can use an include or require statement.

<?php include_once('path/to/file.php'); ?>

<?php require_once('path/to/file.php'); ?>

The main difference between include and require are include will output an error if there is one and continue rendering the page. Require will stop at the error. The _once just makes sure it gets called once per page load. Not really necessary usually but I typically do it just to be safe.

Answer 3

It might be possible using amp-iframe or amp-list but other than that it is not possible.

Make two different HTML files where one stores the header and the other file stores the footer. Try loading them separately utilizing amp-iframe or amp-list. I tried doing this stuff personally but couldn't do it but I know some people have done it in the past.

All the best.