If your business is expanding into new locations, localizing your site is necessary. On paper, the idea might seem like a simple execution, but the process looks a little different depending on the technologies you’ve used to build your site. Why? Each site will face unique challenges, or you’ll need to tackle such challenges differently.
In this guide, we’ll focus on the steps and tips you must consider when building a multi-language single-page application that can be appropriately indexed and ranked. Presenting you with a comprehensive guideline for dealing with JavaScript SEO localization. (Note: Although you still need to follow international SEO best practices like any other website, for this article, we’ll explore SPAs).
1. Choose the Right International Site Structure
The first thing you must decide on is the URL structure you’ll use to signal the locale of your pages. A locale is typically represented by a combination of language and country/region codes and is used to present content tailored to a specific audience.
Search engines will use this hint to understand the geolocation the page is trying to target.
There are three main structures you could use:
- Country-specific TLDs (ccTLDs) – these are the best option to target specific countries and keep every version somewhat independent of each other (e.g., https://example.es/zapatos). However, they won’t share link juice because each site version is independent.
- Localized subdomains – this is an interesting option if you don’t want to build domain authority from scratch, as the top-level domain (https://example.com/shoes) will pass link equity to the localized subdomain (https://it.example.com/scarpe), but not vice versa. That said, these pages don’t tend to rank as well as ccTLDs, and you still have to maintain each version as a separate page.
- Localized subfolders – this is a great option for businesses that want to target audiences that live in different countries but speak the same language (e.g., https://example.com/es/zapatos). Unlike the other two options, domain authority is passed across all versions because they live within the same domain. It also makes hosting and maintaining the pages easier. On the other hand, if the site goes down, all the versions will lose visibility because it’s just one website. Also, building location ranking factors is harder.
In our opinion, the best solution is to use a ccTLD structure as it brings a lot of benefits:
- It’s easier to build local authority with a localized top-level domain.
- It provides clear, semantic URLs (e.g., https://example.fr).
- It increases trust from local searchers that will consider the website to be local from its TLD.
- It helps your localized pages to rank higher for country-based search results.
If you need more details, here’s a simple-to-follow tutorial on implementing top-level domains for multi-language websites.
2. Implement Hreflang Tags in All Versions of Your Site
Once you have the corresponding localized version of your pages, you need to tell search engines the relationship between them, and that’s where Hreflang tags (or hreflang attribute) come into play.
When implemented, these tags look like this:
| <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Your Page Title</title> <link rel=”canonical” href=”https://example.com/en” /> <link rel=”alternate” hreflang=”en-US” href=”https://example.com/en” /> <link rel=”alternate” hreflang=”es-ES” href=”https://example.com/es” /> <link rel=”alternate” hreflang=”fr-FR” href=”https://example.com/fr” /> <link rel=”alternate” hreflang=”de-DE” href=”https://example.com/de” /> <!– Other head elements –> </head> |
Using Hreflang tags is easy but delicate, as mistakes in their implementation can get the entire list ignored or create issues like duplicate content or canonicalization.
For example, in the code above, the self-referring canonical link is also listed in the Hreflang alternatives. That’s a Google guideline that has to be respected, or the entire list will be ignored.
Most likely, this is to avoid abusive behavior from competitors or wrongdoers.
You can follow our Hreflang tags implementation guide to avoid the most common mistakes and learn the best practices to ensure the correct indexation of your localized pages.
3. Translate Your Pages, Content, and Metadata
Of course, if you are targeting different countries, you’ll have to translate your pages, content, and metadata to the local language. Even when targeting countries that speak the same language, like Canada, the US, and the UK, you need to localize your content to use the correct spelling, expressions, and conventions local searchers expect.
There are many internationalization (i18n) techniques, but here’s an approach that could be useful – at least to get you started:
- Use an internationalization framework – these libraries provide built-in support for managing translations and language switching. Some popular options include:
These libraries offer features like message catalogs, locale management, language detection, and seamless translation integration, making the process much easier and faster.
- Create language files – these files must contain the translations for each language supported in your SPA in JSON or other structured formats.
- Include language parameters/headers to dynamic content – for dynamic content loaded asynchronously or fetched from an API, include language parameters or headers in your API requests. This way, you can retrieve the appropriate translations from the server based on the selected language.
- Implement RTL language support – if one of the languages you support is written right-to-left (RTL), ensure your application’s layout and styles are compatible with RTL text direction.
This process can be complicated for those without experience, so we recommend you check Phrase’s in-depth article on SPA translation using i18n libraries.
| Note: Don’t forget you must also provide translated, unique metadata for all your views (pages) and site versions. Again, even if you target countries that speak the same language, you still need to localize your metadata to appeal to this new audience. |
4. Use Prerender to Improve Site Indexation
The most challenging obstacle in JavaScript SEO is rendering, and it can also become a roadblock to your website’s internationalization.
Because of the nature of SPAs, Google can’t access your content – including its metadata where your Hreflang tags reside – before rendering the page, which delays the crawling process significantly, as Google won’t find the next link to crawl until the page is rendered.
In fact, Google can take up to 9x longer to crawl JavaScript sites.
However, it gets worse when you consider that, according to John Muller, “each language version has to be crawled and indexed at least twice for hreflang to work.”
Just imagine how long it would take for Google to crawl your site, then crawl all versions, and finally do the entire crawl once more to pick up the Hreflang signals you’re trying to provide. How much business, resources, and time would you lose?
Instead of waiting, installing Prerender takes just a couple of hours and will take the rendering process off of Google’s shoulders.
Prerender will crawl your site, download all necessary files to build your pages (including 3rd-party JavaScript), and generate a 100% index-ready snapshot of each URL and its localized versions.
The next time a search engine sends a request to any of your URLS, Prerender will serve the snapshot instead, solving all rendering issues from its root and allowing Google to find your Hreflang links in a fraction of the time.
Learn how Prerender works and solve JS SEO with a plug-and-play solution with near-zero development time.
5. Host Your Sites Locally
Although hosting isn’t a ranking factor, there are a couple of benefits to hosting your ccTLD domains with a local hosting provider:
- If your website is hosted closer to your target audience, your website will load faster, providing a better, more responsive user experience.
- The local IP of a local server can also provide additional signals to Google that your website belongs in its local search results, which can help you get higher rankings for country-based search results.
Taking the extra step can help you better emphasize your local activities for search engines, so it’s always worth trying.
Note: This is another reason why using a ccTLD structure is better.
6. Let Users Switch Countries and Keep Language Consistent
Giving your visitors the ability to change the country and language of your site is critical for a good user experience.
The last thing you want to do is lock your visitors to (for example) a language they don’t understand during a holiday abroad.
A common practice is creating some sort of menu people can use to toggle the language of your site – here’s how Snipes does it:
But you can be as creative as possible with this menu.
The most important thing to remember is to keep the language consistent throughout the page. It’s not enough to translate the UI of the page without changing the content’s language and vice versa.
Commit to every language when creating your translation, and don’t cut corners.
7. Make All Site Versions Secure with SSL Certificates
Finally, each of these localized versions is a unique website, so you have to ensure security for all of them. Otherwise, local searchers won’t trust your site. Plus, Google expects your site and all its versions to have an SSL certificate – and it’s part of their ranking algorithm.
Instead of handling several SSL certificates, you can purchase a multi-domain SSL certificate to manage all your sites from one place.
Wrapping Up
Localizing your pages takes time and effort but can give you the boost you need to take market share within new countries and regions, opening the door to higher revenue and traffic.
Here are a few things we’d like to mention before you go:
- Before starting the localization process, always begin with market and SEO research. Most likely, specific countries are already generating more traffic than others, or maybe there’s a higher search volume. You should focus on these countries and languages first to gain momentum.
- Although we focused on ccTLD domains, as it is our preferred approach, the right choice is actually the one that makes the most sense for your business. For example, using subfolders to organize alternative language versions of your pages have the benefit of stacking your domain authority, making it a more viable choice for small brands with lower budgets that can’t afford to start link-building from scratch.
- Keyword research is also a crucial part of localizing your pages. In many cases, the literal translation of a keyword won’t be the best choice. Instead, you must do keyword research to understand how local searchers look for your products and services.
We hope you find this guide on dealing with JavaScript SEO localization helpful and that it can get you started with your localization strategy. We know it’s a daunting task, but with patience and a clear plan, your expansion will be successful.
