Upload header and footer with .load () and make it visible to Google

I'm building a pure HTML website, which has the following structure

ConsideringthatIdonothaveaMasterPagelikeinASP.NET,Ineedtoreplicatetheheaderandfootertootherpagesusingthe.load()functionofjQuery,likethis:

HTML

<divclass="header">
</div>

<div class="content">
<span>Content goes here!</span>
</div>

<div class="footer">
</div>

JS

$(".header").load("header.html");
$(".footer").load("footer.html");

My problem is: When I use the Google Structured Data Testing Tool to analyze my site , the contents of the header and footer are not considered.

I've read about:

Pushstate and loading content via AJAX on links but this is not a good idea for me, considering that replicated content is not triggered by a link, but rather when the page loads.

Making AJAX Applications Crawleable but this article is discontinued

I'm starting with SEO and things like that, so I have no idea how to upload content asynchronously and get Google to find it.

Thank you!