I just finished building a PWA using Ionic. Now i am stuck in making PWA SEO enabled.
Since in ionic there is #(Hash location strategy) enabled in ionic and this results in # in all of the urls which doesn’t help at all in SEO.
So to remove # I tried setting Path location strategy {locationStrategy: ‘path’} in AppModule. This removes the # from the url. But when I try to refresh it or go directly to a url, it returns ‘Cannot GET /url’
Few things I read for this problem is to rewrite to index.html in every request made Or try something as follows in node express.
app.get('*', (req, res, next) => {
if ((req.url.indexOf('#') > -1) ||
((req.url.lastIndexOf('.') === -1) ||
(req.url.indexOf('/', req.url.lastIndexOf('.')) > -1))) {
req.url = `/#${req.url}`;
}
next();
});
Both the above will not solve my problem because if I want to access a url directly i.e.. localhost/a/b . The above solutions will rewrite to localhost/home(Base URL) which I don’t want.
2
Answers
Got it working myself.
So here is the list of things which I did.
Add the following code to each of the page for which you want to add description, keywords
Now we need to remove # in path of every url because SEO rejects the urls with # in them. In App Module , add {locationStrategy: 'path'} to your App Module as follows :
Now # is removed from the url. But when you refresh or directly access the url, this wont work because this is expected behaviour for any SPA Because when you refresh the page , server tries to find the page linked to the URL. For eg: if you hit localhost/abc , then server tries to find abc/index.html which actually doesn't exist.So to resolve this , you have wrote configurations on my server i.e to point every request to index.html . I am using node express server to deploy your pwa. Use the following code to route every request to index.html -
IONIC with SSR (Server Side Rendering) integrated with Firebase Hosting + Cloud Functions + Prerender.io
First of all, sorry for my poor English.
After searching through Deep Web (joking), I found the solution. And the coolest solution was that I was able to integrate my Pioneer Ionic application with Firebase Hosting using Cloud Functions.
After reading the following topic:
https://github.com/firebase/firebase-tools/issues/33
The @TheRoccoB user explains how to host the static Web application in Firebase Hosting and redirect traffic from a URL to Cloud Functions.
What I did was map the routes that I have to index as:
Since “ssr” is the name of my function in Cloud Functions. So I used the library https://github.com/prerender/prerender-node to check if the request is from a google crowler, in case I redirect the request to a https://github.com/prerender/prerender server.