As we know, static html pages are best because of their high speed, security and low cost of maintenance. If we have already have a website with thousands of statically generated pages and edit for example a post, we may use dependency tracking to re-generate just the pages which were touched. For example the single post page and the blog page.

But if we change website header html (or footer), we need to re-generate all the thousands pages because all they have the same header. I know that static generators are fast, but still the process takes a time. So what about the following idea.

We generate static pages only with main content and add the parts which are duplicated on all pages (i.e. header, footer, aside etc) by client JS when someone visits a page?

For example, the initial html (source code) of static page is:

<!document html>
<link href="style.css">
<div class="content">
<h1>Post heading</h1>
The first paragraph text
The second paragraph text
<script src="add_elements.js"></script>

So now if we make a change to the header, we rewrite only one template file containing the header html.

Why not just AJAX website?

The final DOM html code of any page is a mix of source code (we can see by right-clicking the browser's view source code option) and html added dynamically by client JS. AFAIK, the second part may not be always or successfully indexed by search engines. AJAX website is a single page that may have static header and footer as the source code, but the content is added dynamically by JS, so the content is in the risk area. In the case of my idea instead, the situation is opposite: the content is in the source code and other (less important for SEO) parts of page are dynamically added.

The question

Modern search engines compare the source code of a page with its final DOM. Does it matter in my case? I mean if the header and footer are no in the source code, but they are in teh final DOM code, is there a SEO risk?

ps. I heard that search engines may have a problem if website menu links added dynamically by JS but what if we just put them a sitemap?

  • I'm curious why you don't just use a server side includes? Do you feel the speed of static html file is worth the extra effort? – Trebor Aug 30 '20 at 23:43
  • @Trebor a part included by SSI is less secure than added by client JS – stckvrw Aug 31 '20 at 7:07

Your Answer

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

Browse other questions tagged or ask your own question.