I'm trying to streamline my workflow on static sites and want to avoid the repetitive task of copying and pasting my navigation and footer on every page. My approach is to use JavaScript to fetch these elements from separate HTML files. Here's what I'm doing:
```javascript
fetch("../templates/footer.html")
.then(response => response.text())
.then(html => {
document.getElementById("custom-footer").innerHTML = html;
});
```
I'm a bit concerned about the potential impact on SEO. I've read conflicting opinions: some say it could hurt my rankings since crawlers might not see the content, while others believe modern crawlers can execute client-side scripts without issues. Although my performance metrics look decent, I'm curious if this practice is generally considered bad for SEO or if there are better options without resorting to server-side rendering or static site generators. Any advice?
6 Answers
If your site is purely static HTML, switching to PHP could be beneficial. It lets you include templates, making it easier to manage common elements like headers and footers while also allowing for dynamic content like page titles for SEO.
Have you thought about using server-side includes (SSI)? They're a straightforward way to include HTML elements like your footer and navigation. Many hosting platforms already support this and it keeps your static site optimized for SEO.
Totally agree! SSI should be a go-to for anyone managing static content.
Never heard of SSI—thanks for the tip!
In terms of SEO, it's crucial that your site loads with all key content immediately available. Relying on JavaScript means you risk serving incomplete pages to users—and crawlers. If possible, go for PHP includes or a site generator to keep everything rendered server-side.
Exactly! Building it in a way that doesn’t depend on the client-side is the best path for SEO.
For static sites, I recommend server-side processing. It helps because everything's generated and served all at once, meaning crawlers won’t miss any of your important content. Have you considered using a static site generator? They handle this beautifully!
Static site generators like Eleventy or Zola would be great for your needs. They allow for easier management of shared templates without needing to mess with JavaScript fetching. Just set up your layouts and let the generator take care of the rest!
Fetching parts of your site via JavaScript can indeed be detrimental for SEO. It’s better to have navigation and footer content available in the HTML at load time to improve search engine understanding of your site structure.
Yeah, using PHP includes is a smart move!