تحسين SEO لمواقع متعددة اللغات بـNext.js (العربية والإنجليزية والتركية) 2026
الموقع متعدد اللغات الذي يحقق ترتيبًا ليس ثلاث نسخ مترجمة من المحتوى نفسه. بل ثلاثة مواقع مستقلة تربطها hreflang، بروابط مُعرَّبة، وmeta أصيل لكل لغة، وخريطة موقع تُخبر Google بالضبط بأي نسخة يُقدّم لأي مستخدم.
الهندسة التي تحقق ترتيبًا
| النهج | جهد الإعداد | جودة SEO | الترتيب بالعربية/التركية |
|---|---|---|---|
ما ننفّذه جزء [locale]، روابط مُعرّبة، id قانوني، hreflang كامل، صور OG لكل لغة، بيانات مهيكلة لكل لغة. | نظيف | ★★★★★ | ترتيب أصيل في كل نص |
رابط إنجليزي + ?lang=ar الأسوأ. Google قد يفهرس البارامتر، والمحتوى العربي يُبتلع في ترتيب الإنجليزية. | منخفض | ★ | بالكاد يظهر بالعربية |
نفس الرابط الإنجليزي لكل اللغات شائع وغير مثالي — الكلمات المفتاحية العربية/التركية في URL إشارة ترتيب قوية تضيّعها. | منخفض | ★★★ | مقبول لكن يفوّت فرصًا سهلة |
نطاق فرعي لكل لغة (ar.site.com) يعمل لكن إدارته أصعب، ويفرّق سلطة النطاق ما لم يُربَط جيدًا. | مرتفع | ★★★★ | يحقّق ترتيبًا لكن يحتاج روابط داخلية أكثر |
1. جزء [locale]
في Next.js 14، ضع كل المسارات تحت app/[locale]/. middleware يكتشف اللغة ويحوّل عند الحاجة.
في التخطيط الجذر: <html lang={locale} dir={locale === 'ar' ? 'rtl' : 'ltr'}>. لا تضع dir على body.
2. روابط مُعرّبة مع مُعرّف قانوني
المفتاح: كل نسخة مترجمة تتشارك id قانونيًا في frontmatter، لكن كل لغة لها رابطها الأصلي.
# blog-posts/en/gulf-payment-gateways.mdx
slug: gulf-payment-gateways-mada-stc-pay-tabby
id: gulf-payment-gateways-guide
lang: en
# blog-posts/ar/بوابات-الدفع-الخليجية.mdx
slug: بوابات-الدفع-الخليجية-مدى-اس-تي-سي-باي-تابي
id: gulf-payment-gateways-guide
lang: ar
مساعد يحل الترجمات بـid:
export function getSlugById(id, locale) {
return allPosts.find(p => p.id === id && p.lang === locale)?.slug
}
3. وسوم hreflang لكل صفحة
في generateMetadata لكل page.tsx:
const languages = {}
for (const locale of ['en','ar','tr']) {
const slug = getSlugById(post.id, locale)
if (slug) languages[locale] = `/${locale}/blog/${slug}`
}
return { alternates: { canonical, languages } }
4. خريطة الموقع
app/sitemap.ts يجب أن يسرد كل URL لكل لغة مع lastModified صحيح.
5. Meta لكل لغة — لا ترجمة
ترجم العناوين والأوصاف وصور OG أصيلاً لكل لغة. العنوان الإنجليزي المترجم يصبح 70 حرفًا بالعربية. أعد كتابته.
6. البيانات المهيكلة لكل لغة
BlogPosting وFAQPage وBreadcrumbList — كلها يجب أن تُصدَر بـinLanguage مطابق.
7. الربط الداخلي داخل اللغة
لا تربط من مقال عربي إلى صفحة خدمة إنجليزية. ابقَ ضمن اللغة.
قائمة التحقق
- [ ] جزء
app/[locale]/مع middleware - [ ]
<html lang dir>منparams.locale - [ ] frontmatter يستخدم
idقانوني +slugخاص بكل لغة - [ ] مساعد
getSlugByIdفي meta ومبدّل اللغة - [ ]
generateMetadataيصدرalternates.languages - [ ]
sitemap.tsيتضمّن كل لغة × slug - [ ] صور OG مُعرّبة
- [ ]
inLanguageفي البيانات المهيكلة يطابق الصفحة - [ ] الروابط الداخلية تبقى داخل اللغة الحالية
أسئلة شائعة حول SEO متعدد اللغات في Next.js
الحروف الأصلية. ترتيب Google في الأسواق العربية يكافئ الكلمات العربية في الرابط. نفس الأمر للتركية — استخدم الإملاء التركي.
الخلاصة
SEO متعدد اللغات في Next.js ليس صعبًا لكنه غير متسامح. اضبط جزء [locale] والروابط الأصلية وid القانوني وhreflang وmeta لكل لغة من اليوم الأول.
