: Make HTML static site more SEO friendly 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

@Jessie594

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: stackoverflow.com/questions/1457/modify-address-bar-url-in-ajax-app-to-match-current-state

Vote Up Vote Down

@Shelley277

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.

Vote Up Vote Down