I run a website built with Angular and I used angular-gettext
to integrate and support several languages: https://angular-gettext.rocketeer.be/
I don’t want to change my site structure using domain-specific subdomain or url like https://en.example.com/
or https://www.example.com/en/
. So far I store a language variable in the client’s local storage to determine which language to display.
It works fine and the UX is nice. However, I am wondering what the best way is to ensure that Google indexes my website in other languages.
I whas thinking of using the hreflang
attribute with a lang
parameter this way:
<link rel="alternate" href="http://example.com?lang=en" hreflang="en-us" />
And then of course, handle the lang
parameter in the url.
Would that work? Is it considered best practice or is there any more elegant way to do it?
2
Answers
Since angular is a single page application, search engines are not really going to render your app page by page. Hence your different languages for translations won’t be too effective when it comes to indexing. There are pre-rendering solutions like https://prerender.io/. They are doing a pretty good job at this.
Otherwise if you are really worried about seo stuff, you should look into actually having server-side pages. You can sort of do a combination with frameworks like sailsjs or hapijs.
SPAs are usually meant for apps behind login/private use so trying to make them SEO friendly is quite limited at the moment.
Actually, the answer from @z.a. is not 100% accurate anymore. Google seems to scan Javascript nowadays:
Refer this link
Not sure about Bing and all the others, but at least with Google, you should not have an issue.
What is wrong with
https://www.example.com/en/
? That is the cleanest approach to multilingual websites. This also ensures that everybody sees every link in the right language. Otherwise, different people might see the same link in different languages, which is not very user (and SEO) friendly.On top of
hreflang="en-us"
in you link, you can also add the language to your headerand to real links:
That should give Google a few pretty good hints.