I have developed a prototype website that works like an app (for user comfort) when you click on a “link” it slides to the side and the “second-screen” loads the content via AJAX.
I want to have my website be capable of maintaining this functionality but also have my pages act as “normal pages” in that I can have “/about” “/search” etc. as this will help significantly for SEO purposes.
Am I overlooking something obvious or is this a bit of dream at the moment?
EDIT: Apologies for not including my current attempts:
So far I’ve tried to read URL using JavaScript and use that to display the correct page. While I’ve had success with this, I am looking more for information as this is very much tied into making sure a website can appear on Google for example.
2
Answers
This is usually done by redirecting all requests to one single page (where your application runs), and let the javascript application figure out which page to show based on the current url.
If you use apache, redirection can be done using a
.htaccess
rule like this:This makes sure all requests that do not point to an existing file or folder will be handled by index.php (which of course could also be index.html).
Then in javascript use
window.location.pathname
and figure out which page to show based on this.You also have to make sure to update this location whenever you load a different page. This can be done by using the history.pushState() and history.replaceState() methods.
Alternatively, for the javascript part you could also use a framework such as vuejs, which is very useful to build such websites/single page applications.
Yes, it can be done manipulating and watching the URL. Have a look at the History API https://developer.mozilla.org/en-US/docs/Web/API/History_API.