JavaScript rendered translated versions of pages not indexed separately

Question

My app serves local content from separate subdomains. eg: fr.example.com serves content for french users, www.example.com for global etc. The content on the page is javascript rendered. if I check pages in "fetch as google", I get to see the correct javascript rendered version in "This is how Googlebot saw the page:" section. The pages from different subdomain are set with separate canonicals, and hreflangs. this is how hreflangs are defined

<link rel="alternate" href="https://www.example.com/about" hreflang="en" />
<link rel="alternate" href="https://fr.example.com/about" hreflang="fr" />

Hreflangs are also defined in sitemap.xml

The problem is google indexes only the en version. Checking in the search console I see this "Duplicate, Google chose different canonical than user". How do we get google to consider these as 2 separate pages?

Answer 1

You just need to wait a couple months. Google will render your pages and find their full content eventually. However it takes Googlebot weeks to render pages after it crawls them. In the meantime, it renders the text only version. When your content is JavaScript rendered, the HTML source code that Googlebot initially sees is very simple and duplicate.

Because of this, I would not recommending using JavaScript frameworks such as React and Angular to build a website that requires SEO. Loading all the content via AJAX can make good websites that are usable, but there are significant problems getting them indexed in search engines.