1

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?

  • 1
    So you create the HTML pages manually? And you don’t rely on JavaScript for the other content? So the only reason for using JS would be to make it easier for you to create the HTML documents, is that right? – unor Apr 27 '18 at 15:55
3

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.

  • Ah perfect :) Thank you Elaine. I just checked with my host(Siteground) and they do allow that. I appreciate the explanation as well as the solution! – SteveyG Apr 28 '18 at 2:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.