Multilingual SEO in Next.js with next-intl
A practical guide to shipping a fully translated, search-engine-friendly site with next-intl — locale routing, hreflang tags, and RTL support included.
Mehran Hatami3 min readMultilingual SEO is more than translating strings. Search engines need to know that your Persian, English, and German pages are the same content in different languages — not duplicate content competing against each other.
Locale-prefixed routes and hreflang, from one config
Real multilingual SEO means every locale gets its own routes, layout mirroring, and hreflang — not a translation bolted onto one fixed structure.
next-intl makes locale-aware routing straightforward: every route is prefixed with its locale, and a single routing.ts config defines the supported locales and the default. From there, generating localized hreflang alternates and per-locale metadata (title, description, Open Graph tags) becomes a matter of calling getTranslations inside generateMetadata for each page.
The part that's easy to skip is the x-default alternate — the hint search engines use when they can't confidently match a visitor to one of your explicit locales. Point it at your default locale rather than omitting it.
RTL is a layout concern, not a CSS toggle
RTL support deserves special attention. It's not enough to flip direction: rtl — spacing, icons, and animations that use physical left/right values need to be reconsidered with logical properties like start/end, so the layout mirrors correctly for Persian readers instead of just feeling reversed.
Done properly, multilingual SEO means every locale ranks on its own terms, in its own language, with a layout that actually feels native to its readers instead of a translated afterthought.