If you have ever tried to make a SEO for a one page website the you know how difficult it is all the links and all the sections on your website. Like everything in SEO there is no unversal recipe for doing this because Google changes their algorithm on a monthly basis. The only way to do this is to set your links, picture titles, section titles and prey for the best. The biggest difficulty in doing this on a one page site is that you have all the content in one document. How can Google index your sections and your content when everything is one big document? Well, there are a few solutions for that problem. One of the most popular is to create documents that are invisible to the visitors and visible to the crawlers. Another method is to use Javascript. Yes, you have read this right. A few years ago HTML5 brought a few useful API-s with it. One of those APIs allows us to manipulate browser history. As years have passed javascript became more and more popular. He gained the ability to communicate directly to the browser and now there are hundreds of javascript frameworks out there. With all that in mind Google adapted their crawler to detect and activate changes to the url made with javascript. Ok, that’s all very nice but what does that mean for a regular developer? It means you don’t need to have multiple dummy documents outside of your main document so the Google crawlers could index your files. How does that work in real life? Since you are on our webpage, look at the links in your browser as you change sections. With this little secret ends the regular part of this blog post, now we’re switching to the geek talk. Here in Aplitap we use PHP and jQuery when we are making the web pages so we’re going to stick to that now.

With History API out there, these are his functionalities:

history.back() - triggers the back button in your browser

history.forward() - triggers the forward button in your browser

history.go(n) - sends your browser n steps in the history or forward depending of that number

history.state - returns the current state of the browsing

history.pushState(object, title, url)  

This is the most useful part for SEO. When we get to the new section we must detect that we are there (if you’re going to use click, scroll or some other event that is up to you). After that we push the new state to the browser history.

But first we need to explain those parameters that this function consumes:

Object - this is the object relevant for the new history state. You can put in that the data used for construction of some form, personalization of the web or whatever you want Title - title of the new state. Simulates the change of tags without changing them.

Url - url of the new section

history.replaceState() - works similar to pushState except it replaces the current state.

Having all of this things explained I will show you how to use all of that. For the example we will create the web page with 3 sections. On the top of the page we will set the menu with 3 links: Home, About us and Contact. This part we can do in two different ways. One way is to set the href attribute with hashbangs(#nameOfTheSection) and parse it in the function or we can use the HTML5 data attributes. My suggestion is to use data attributes because they will come handy later. I suppose that you have solved your navigation on the site so there is no need for explaining that. The next step is to set the url variable with the starting state. On each section change you update your url variable with the data stored in the data attribute of the link or the targeted section. After you have updated your url variable we will push the new state to the browser history with the history.pushState(object if exists, new title, and the url variable). Except for changing the url and the title I suggest to add some more data attributes to ypur sections like keywords, descriptions and other stuff that you will use to change title and other meta tags of your page when you reach the target section. Next step is to create a router script with PHP that will allow you the RESTful urls and will catch the request on your page and return the names of the targeted sections. When we grab that we can use this to fill thepart of your page and send the navigation to the requested section after $(document).ready. Besides all of this you have to be careful what are you writing into your h1 tags, the names of your images and what are you putting into your meta tags for each section. That’s all from me folks. Good luck with optimizing your websites.

CODE EXAMPLE