How to build sites that take advantage of AJAX principles while still being accessible to search engines?
Answer: A Javascript function that is part of the HTML5 History API, called window.history.pushState().
The pushState function of the javascript History object serves to change the browser url without giving Refresh. Change the url without reloading the page,
Whenever you open a new tab and/or window, the browser starts a new session. And it is in this session that it stores all the Urls you have visited.
The pushState method records a new entry in your session history, keeping the history. And this is your syntax:
window.history.pushState(data, title [, url ] )
data
: The parameter data
may be useful if you want to use the onPopState event, which is invoked whenever a new entry is registered in your session history;
Title
: It’s the title of the page you want the entry to have;
URL
: It is the URL you want the page to have. You can use this parameter in two ways:
- Absolute: Passing all new full URL including protocol, host, path etc. Ex: http://blog.igorescobar.com/;
- Relative: The URL you pass will be relative to the current URL, ie if you are accessing the http://blog.igorescobar.com/ and pass "/Category/javascript/" to the URL that will be registered is "http://blog.igorescobar.com/category/javascript/".
Example:
window.history.pushState('Object', 'Categoria JavaScript', '/category/javascript/');
Completion
Now with the use of HTML5 we can create websites with AJAX indexable by search engines without problems. Our Link Building will not be compromised and the user experience can be further enhanced, since only a fraction of the delivered code is actually content.
example - Jsfiddle
The pushState function of the javascript History object serves to change the browser url without giving Refresh. Change the url without reloading the page, See more at http://www.tidbits.com.br/pushstate-no-html-pra-mudar-a-url-do-browser-sem-dar-refresh
– user60252