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

Question

I’m setting up a pure HTML site, which has the following structure

Whereas I don’t have a Master Page like in ASP.NET, I need to replicate the header and footer to other pages using the function .load() jQuery, this way:

HTML

<div class="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 tool 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 content loading via AJAX in links but this is not a good idea for me, considering that the replicated content is not activated by a link, but 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 load content asynchronously and get Google to find it.

Thank you!