Loading an external HTML file into another - does it have an affect on SEO?

Question

I have my first web project which will approximately be 50 pages. Up until now I've just done 5 page websites, so if I needed to e.g. add a navigation link, I would just quickly type the code and copy and paste it into all 5 HTML files..

I'm looking for the 'best practice' sort of way so I can update the navigation links somewhere, and it'll update every page..

I saw this solution on StackOverflow:

Homepage Code:

<div id="nav-container">

</div>

<script>
$(function(){
$("#nav-container").load("navigation-links.html");
});

navigation-links.html file:

<div class="nav-btn1">Link</div>
<div class="nav-btn2">Link</div>
<div class="nav-btn3">Link</div>
<div class="nav-btn4">Link</div>

But as the html links aren't within the actual pages, would this have a negative impact from an SEO standpoint?

If so, is there another way I should be doing this?

Answer 1

JS includes can be problematic for several reasons - search engines don't always process them properly, they are often not accessible to visitors using alternative technologies like screen readers, and like you said - this particular version isn't even outputting actual links.

One option is to move to a CMS, which would allow you to manage all the sitewide components in one place and have them update on every page.

A simpler option that would let you keep your static HTML files would be to use Server Side Includes (SSI). You'll have to check with your host to see whether they are allowed; some hosts disable them for security reasons, but they're not a big risk as long as you are only including your own files.

You would create one file to hold the sitewide navigation, something like nav.html:

<a href="/">Home</a>
<a href="/page1.html">Page 1</a>
<a href="/page2.html">Page 2</a>

etc., and then in every static file, where you want the navigation to appear, you would include that file:

<!--#include file="nav.html"-->

You can do the same with footer, sidebar, etc. so you only have to make updates in a single file and they are then pulled into all your other files.