logo

How to Localize an Existing Angular App with Angular Universal With all SEO aspects - Part Tow

Localizing your Angular application with Angular Universal helps cater to a global audience by serving content in multiple languages. However, to maximize your reach and ensure your website performs well in search engines, it’s important to incorporate advanced SEO strategies. This part of the article will guide you through implementing automatic language detection, adding hreflang tags for SEO, and understanding the differences between hreflang tags and canonical links.

1. Automatic Detection for User Language Using the Accept-Language Header

Automatically detecting a user's language preference can significantly enhance user experience. The Accept-Language header sent by browsers provides a way to detect the preferred language of a user.

How to Implement Automatic Language Detection

  1. Read the Accept-Language Header: The Accept-Language header contains information about the user’s preferred languages. This can be parsed on the server side to determine the best language version of the site to serve.

  2. Modify Your Server-Side Code: Update your server.ts file to detect the user's preferred language and redirect them to the appropriate localized version.

    server.get('*', (req, res) => {
  const supportedLocales = ['en-US', 'ar', 'ar-SA']; // Add all supported locales
  const defaultLocale = 'en-US';
  const acceptLanguage = req.headers['accept-language'];
  let userPreferredLocale = defaultLocale;

  if (acceptLanguage) {
    const languages = acceptLanguage.split(',').map(lang => lang.split(';')[0]);
    userPreferredLocale = languages.find(lang => supportedLocales.includes(lang)) || defaultLocale;
  }

  res.redirect(`/${userPreferredLocale}${req.url}`);
});

  3. Fallback to a Default Language: If no preferred language matches, redirect users to a default language, such as English (en-US).

By detecting and automatically redirecting users based on their browser settings, you can deliver a more personalized and engaging experience, while also improving SEO by reducing bounce rates.

2. Adding SEO hreflang Tags

hreflang tags are essential for guiding search engines to serve the correct language or regional version of a webpage to users. They help prevent duplicate content issues and improve the visibility of your localized pages.

Implementing hreflang Tags in Angular Universal

To implement hreflang tags in your Angular Universal application:

  1. Modify the Server-Side Rendering Logic: Update your server.ts file to dynamically generate hreflang tags based on the locale detected in the URL.

    server.get('*', (req, res) => {
  const supportedLocales = ['en-US', 'ar', 'ar-SA'];
  const defaultLocale = 'en-US';
  const locale = supportedLocales.includes(req.url.split('/')[1]) ? req.url.split('/')[1] : defaultLocale;

  const hreflangs = supportedLocales.map(loc => {
    return `<link rel="alternate" href="https://example.com/${loc}${req.url}" hreflang="${loc}">`;
  }).join('\n');

  res.render(`index-${locale}`, {
    req,
    providers: [
      { provide: 'HREFLANG_TAGS', useValue: hreflangs }
    ]
  });
});

  2. Inject hreflang Tags into Your HTML Template: In your main server template file (e.g., index.html or index.template.html), inject the hreflang tags into the <head> section:

    <head>
  <meta charset="utf-8">
  <title>My Angular Universal App</title>
  <base href="/">
  <!-- Injected hreflang tags -->
  <%= HREFLANG_TAGS %>
</head>

This ensures that each localized version of your page correctly signals its language and region to search engines.

3. Differences Between hreflang Tags and Canonical Links

When optimizing a multilingual website, it's crucial to understand the differences between hreflang tags and canonical links, as they serve different purposes.

hreflang Tags vs. Canonical Links

  1. Purpose:

    • hreflang Tags: Indicate language and regional targeting, helping search engines serve the correct content based on language or location.
    • Canonical Links: Prevent duplicate content issues by indicating the "canonical" or preferred version of a page among similar or duplicate pages.

  2. Use Cases:

    • hreflang Tags: Used for multilingual websites where different language versions of the same content exist.
    • Canonical Links: Used for duplicate pages (e.g., same content accessed through different URLs or parameters).

  3. Impact on SEO:

    • hreflang Tags: Help search engines understand language targeting and prevent showing the wrong language version.
    • Canonical Links: Consolidate indexing signals and ensure the preferred version of a page is ranked.

  4. Implementation:

    • hreflang Tags: Added in the <head> section to indicate available language versions.
    • Canonical Links: Also added in the <head> section but specify a single URL as the preferred version.
Example of Using Both hreflang and Canonical Links Together

In some cases, you might use both hreflang tags and canonical links:

<link rel="alternate" href="https://example.com/en-gb/" hreflang="en-GB">
<link rel="alternate" href="https://example.com/en-us/" hreflang="en-US">
<link rel="canonical" href="https://example.com/en-us/">

Here, hreflang tags indicate the existence of both UK and US English pages, while the canonical link points to the US English version as the preferred URL for indexing.

SEO Best Practices for hreflang Tags and Canonical Links

  1. Ensure Consistency: Ensure your hreflang tags are correctly set for all language versions and that canonical links point to the appropriate page.

  2. Avoid Conflicts: Do not point canonical links to a different language version than what hreflang tags specify, as this can confuse search engines.

  3. Monitor for Errors: Use tools like Google Search Console to check for errors in hreflang and canonical implementations.

Conclusion

Effectively localizing an Angular app with Angular Universal involves more than just translating content; it also requires implementing SEO best practices. By adding automatic language detection, hreflang tags, and understanding the differences between hreflang and canonical links, you can ensure that your app not only caters to a global audience but also performs well in search engines. This approach enhances user experience, reduces bounce rates, and boosts your site's overall SEO performance.