Make HTML static site more SEO friendly

Question

I am desinging a website as shown in below image, right now it's just a basic structure. This site is totally static, basically I've 6 main pages in website. navigation section, slider and footer will be same in all the pages. From the 6 pages one page will be for listing items (~15 sub pages for item). all the details will be loaded in CONTENT section.

Now my problem is that how can I achieve some thing like where navigation, slider and footer will be loaded once and content will be changed according to page.

I've thought of loading the content using AJAX, so it'll become one page website. But than problem would be with SEO.

So how can I achieve this both in one shot? Where navigation, slider and footer will be loaded once and SEO will also be fine.

Any help would be appriciated.

Answer 1

While you can do this, I think you are worrying about it too early. In software there is a saying: Optimization hinders evolution. In essence, this says that if you complicate matters they become harder to change.

That being said, there are things you can do if you really want to. I agree that it is best to keep the content on-page and not load it via AJAX.

iframes are probably the most straightforward. You can put the top and bottom in iframes and simply load them from each page. There is work to make the iframe work seamlessly and opens links in the right place.

You could consider loading your header and footer via AJAX instead but I would keep the navigation inline in order to have internal links visible by crawlers.

Remember that resources get cached, so unless your header and footers contain large amounts of HTML, the performance difference should be negligible. Any images and even flash object you use in the headers and footers of all the pages will still be loaded once, assuming cache headers are setup correctly of course.

Answer 2

As a way of compromise between good SEO and AJAX-loaded pages you could do the following:

Create a standard set of elements within menu, with their respective href attributes and preferably some indicator, perhaps as a class name, which ajax request each link would trigger

<a href="index.php?page=1" class="nav">Nav 1</a>
<a href="index.php?page=2" class="nav">Nav 2</a>

Clicking .nav element will make two things happen:

• sending an AJAX request
• triggering jQuery event.preventDefault() function

The AJAX request will do the obvious - load the content is the place you specify, but the default browser behavior - redirection to a page specified in href attribute of element - will be cancelled, keeping you on the same page.

For browsers with JavaScript switched off, web crawlers and visitors somehow accessing your page via direct link - "index.php?page=1" - the index.php file will perform a standard retrieval of data from whichever source you're using.

I'm sure there are better ways, yet this is the one I used, and it works well so far.

As it is a simple website, you might not necessarily need it, but keeping track of your site browsing history (navigated through using AJAX requests) is a thing to be conscious of. I suggest a glance at: https://stackoverflow.com/questions/1457/modify-address-bar-url-in-ajax-app-to-match-current-state