Condensing size for language variations while remaining good with SEO

Question

I have a multi-lingual website. For each page, in the HTML header, I set the language variations as follows:

<link rel="alternate" href="https://www.example.com/a-page/" hreflang="en"/>
<link rel="alternate" href="https://www.example.com/fr/a-page/" hreflang="fr"/>
<link rel="alternate" href="https://www.example.com/pt/a-page/" hreflang="pt"/>
<link rel="alternate" href="https://www.example.com/ca/a-page/" hreflang="ca"/>
<link rel="alternate" href="https://www.example.com/sc/a-page/" hreflang="sc"/>
<link rel="alternate" href="https://www.example.com/it/a-page/" hreflang="it"/>
<link rel="alternate" href="https://www.example.com/es/a-page/" hreflang="es"/>
<link rel="alternate" href="https://www.example.com/ro/a-page/" hreflang="ro"/>
<link rel="alternate" href="https://www.example.com/an/a-page/" hreflang="an"/>
<link rel="alternate" href="https://www.example.com/oc/a-page/" hreflang="oc"/>
<link rel="alternate" href="https://www.example.com/eo/a-page/" hreflang="eo"/>
<link rel="alternate" href="https://www.example.com/gl/a-page/" hreflang="gl"/>
<link rel="alternate" href="https://www.example.com/a-page/" hreflang="x-default"/>

But the thing is, that takes up at least 25% of some of my pages.

I'm considering reducing the above HTML code to a javascript version that I put at the bottom of the page so people located in an area (example: middle of a country road) with poor internet service (and with a browser that can't handle gzipped pages) can access my pages quickly without waiting for the language declarations to be processed.

How would search engines react if I put my language declarations as javascript code? Will they still try to show the multilingual versions, or will they ignore them completely and pray through page crawling that such multilingual versions exist?

Answer 1

If you move your hreflang tags to JavaScript and place them at the bottom of your pages, search engines might not recognize them as effectively. While Google is capable of rendering JavaScript and can potentially pick up those tags, other search engines may not handle JavaScript the same way, leading to a risk of them being ignored. This could result in search engines not correctly identifying the multilingual versions of your pages, which can harm your SEO and user experience.

It’s best practice to keep hreflang tags in the HTML header. This ensures they are readily available for all search engines during the initial crawl, helping to correctly index your pages for the intended language and region. If page load time is a concern, consider optimizing the existing HTML structure instead of relying on JavaScript for these important tags.

Answer 2

Hreflang through JS won't be properly read by Google, but there is a good solution. Place the language versions in the sitemap.xml, as even Google recommends. In my personal experience, this is an effective working method.

Here's a literal quote from the official Google documentation:

Use hreflang or sitemaps to tell Google which pages apply to which locations or languages.

Here is Google documentation for multi-lingual website