Abubakr404
Back to blog

Bilingual SEO in Next.js: Getting Arabic and English Right

May 18, 20265 min read
Next.jsSEOi18nRTL

Why bilingual SEO is different

Serving two languages isn't just translation. Search engines need explicit signals about which page serves which audience.

The checklist

  1. Locale-prefixed URLs/en/blog/... and /ar/blog/.... Unambiguous for crawlers.
  2. hreflang alternates — every page declares its translations via alternates.languages in the Next.js Metadata API.
  3. Localized metadata — titles and descriptions written (not machine-translated) per locale.
  4. dir="rtl" and logical CSS properties — use ms-/me- instead of ml-/mr- in Tailwind so layouts mirror for free.
  5. JSON-LD in both languages — Person, Article, and BreadcrumbList schemas with localized strings.
  6. A sitemap with language alternates — one entry per locale per route.

The result

Search engines index both versions independently, Arabic users get Arabic snippets, and you avoid duplicate-content penalties entirely.

Bilingual SEO in Next.js: Getting Arabic and English Right | Abubakr Hisham — Full-Stack Developer