DEV Community

Lingo.dev profile image David Turnbull
David Turnbull for Lingo.dev

Posted on

i18n SEO checklist: 15 SEO tips to reach a global audience

#seo #webdev #i18n #programming

Introduction

Optimizing multilingual sites for search engines isn't just about translation quality. Search engines need explicit signals to understand which pages are translations of each other, which markets they target, and which version to serve to which users.

This checklist covers 15 requirements for effective SEO for a global audience.

Note: If your website isn't already multilingual (or if you want a better developer experience for your multilingual website), be sure to check out Lingo.dev.

1. Structure your URLs with language subdirectories

Use subdirectories with ISO language codes to organize your multilingual content. This consolidates domain authority while keeping language versions separate and identifiable.

2. Add bidirectional hreflang tags to your HTML

Tell search engines about all language versions by adding hreflang tags to every page. Each page must reference all variants including itself.

<link rel="alternate" hreflang="en" href="https://example.com/en/products/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/produkte/" />
<link rel="alternate" hreflang="es" href="https://example.com/es/productos/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/products/" />
Enter fullscreen mode Exit fullscreen mode

3. Set the HTML lang attribute correctly

Match the lang attribute to your page's actual content language. Browsers and screen readers use this to render text and select pronunciation rules correctly.

<html lang="en">
<html lang="de">
<html lang="es-MX">
<html lang="zh-CN">
Enter fullscreen mode Exit fullscreen mode

4. Point canonical tags to same-language versions

Canonical tags should reference the same language version to avoid duplicate content issues. Never point a German page's canonical to the English version.

<link rel="canonical" href="https://example.com/en/product/" />
Enter fullscreen mode Exit fullscreen mode 
<link rel="canonical" href="https://example.com/de/produkt/" />
Enter fullscreen mode Exit fullscreen mode

5. Generate localized URL slugs

Translate your URL slugs to match the content language. This improves user experience and local search relevance.

const slugs = {
  'about': { en: 'about', de: 'ueber-uns', es: 'acerca-de' },
  'products': { en: 'products', de: 'produkte', es: 'productos' }
};

const url = `/${lang}/${slugs['about'][lang]}/`;
Enter fullscreen mode Exit fullscreen mode

6. Include hreflang annotations in your XML sitemap

Add hreflang markup to your sitemap as a secondary discovery method. This reinforces the signal for search engines, especially on large sites.

<url>
  <loc>https://example.com/en/products/</loc>
  <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/products/" />
  <xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/produkte/" />
  <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/en/products/" />
</url>
Enter fullscreen mode Exit fullscreen mode

7. Organize sitemaps by language

Split your XML sitemaps by language for better crawl efficiency and clearer Search Console organization.

<sitemapindex>
  <sitemap>
    <loc>https://example.com/sitemap_en.xml</loc>
  </sitemap>
  <sitemap>
    <loc>https://example.com/sitemap_de.xml</loc>
  </sitemap>
  <sitemap>
    <loc>https://example.com/sitemap_es.xml</loc>
  </sitemap>
</sitemapindex>
Enter fullscreen mode Exit fullscreen mode

8. Build language-aware internal links

Keep all internal links within the same language version. This prevents users from jumping between languages unexpectedly.

const currentLang = window.location.pathname.split('/')[1];
const productLink = `/${currentLang}/products/`;
Enter fullscreen mode Exit fullscreen mode

9. Detect language preferences from Accept-Language header

Parse the Accept-Language header to suggest appropriate language versions. Show this as an optional banner rather than forcing redirects, which can hurt SEO.

const acceptLang = request.headers['accept-language'];
const userLangs = acceptLang.split(',').map(l => l.split(';')[0].substring(0, 2));

if (userLangs[0] !== currentLang) {
  showBanner(`View in ${userLangs[0]}?`);
}
Enter fullscreen mode Exit fullscreen mode

10. Add language-specific Schema.org markup

Include the inLanguage property in your structured data so search engines understand the language context of your content.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "Product Details",
  "inLanguage": "en",
  "url": "https://example.com/en/product/"
}
</script>
Enter fullscreen mode Exit fullscreen mode

11. Configure language-specific Open Graph tags

Set Open Graph metadata for each language version to ensure proper display when shared on social platforms.

<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="de_DE" />
<meta property="og:title" content="Wireless Headphones" />
Enter fullscreen mode Exit fullscreen mode 
<meta property="og:locale" content="de_DE" />
<meta property="og:locale:alternate" content="en_US" />
<meta property="og:title" content="Kabellose Kopfhörer" />
Enter fullscreen mode Exit fullscreen mode

12. List language sitemaps in robots.txt

Declare all language-specific sitemaps in robots.txt to help search engines discover them.

User-agent: *
Allow: /

Sitemap: https://example.com/sitemap_en.xml
Sitemap: https://example.com/sitemap_de.xml
Sitemap: https://example.com/sitemap_es.xml
Enter fullscreen mode Exit fullscreen mode

13. Send Content-Language HTTP headers

Add Content-Language headers to provide an additional language signal that both search engines and browsers can use.

const lang = request.path.split('/')[1];
response.setHeader('Content-Language', lang);
Enter fullscreen mode Exit fullscreen mode

14. Add resource hints for region-specific CDNs

Use preconnect and dns-prefetch hints to speed up connections to region-specific CDN servers and improve Core Web Vitals.

<link rel="preconnect" href="https://cdn-eu.example.com">
<link rel="dns-prefetch" href="https://cdn-eu.example.com">
Enter fullscreen mode Exit fullscreen mode 
<link rel="preconnect" href="https://cdn-asia.example.com">
Enter fullscreen mode Exit fullscreen mode

15. Load geo-specific third-party resources conditionally

Load region-specific resources like payment providers or analytics scripts based on user location to improve relevance and performance.

const paymentScripts = {
  'us': 'https://js.stripe.com/v3/',
  'eu': 'https://js.stripe.com/v3/',
  'cn': 'https://cdn.alipay.com/sdk.js'
};

const script = document.createElement('script');
script.src = paymentScripts[userRegion];
document.head.appendChild(script);
Enter fullscreen mode Exit fullscreen mode

Join our Hackathon 🚀

We're sponsoring the Hack this Fall 2025 hackathon and giving away some prizes to the most creative uses of Lingo.dev. To learn more, join our Discord channel.

Top comments (0)