شحن موقع عربي وإنجليزي سريع وصحيح في RTL ويتصدر في بحث السعودية يتبع نمطا قابلا للتكرار: Next.js مع نظام محتوى يحمل ترجمات وCSS منطقي لـ RTL وتحسين SEO صارم لكل لغة.
يغطي هذا الدليل نمذجة الترجمة والتوجيه المحلي وتنفيذ RTL والخطوط وتحسين SEO والتخزين للمواقع ثنائية اللغة.
1. نموذج محتوى يتوسع
استخدم جداول أساس مع ترجمات. مثلا مقالات مع ترجمات تحمل كود اللغة والعنوان والمقتطف والمحتوى وحقول SEO. ولا تخزن العربية والإنجليزية في نفس الصف أبدا. واستعلم دائما مع fallback. اللغة المطلوبة أولا ثم الإنجليزية.
والقواعد المطلوبة هي عنوان وslug ثابت بالإنجليزية للروابط وH1 مترجم ومقتطف مترجم وعنوان SEO ووصف مترجمين منفصلين لا منسوخين آليا. ويجب أن يرى المحررون حالة الترجمة المفقودة في القائمة. وأضف تحققا يمنع النشر عندما يكون العنوان العربي فارغا والإنجليزي موجودا أو العكس إلا إذا علم أحادي اللغة.
والوسائط تحتاج نص بديل لكل لغة. وخطأ سعودي شائع هو alt إنجليزي على صفحات عربية مما يضر بحث الصور وإمكانية الوصول.
2. التوجيه والعرض في Next.js
استخدم مقاطع [lang] مثل /ar/articles/slug و/en/articles/slug. وولد params ثابتة للغتين عند البناء للصفحات العليا واستخدم ISR مع إعادة ساعة للذيل الطويل. وهذا يحافظ على سرعة البناء وحداثة المحتوى.
واضبط html lang وdir لكل طلب. لـ ar-SA اضبط lang ar وdir rtl. ولـ en-US اضبط lang en وdir ltr. وافعل في layout الجذر لا بـ JS عميل حتى تحصل الزواحف وقارئات الشاشة عليه من أول رسم.
وكشف اللغة يجب أن يحترم الاختيار الصريح عبر كوكي أولا ثم Accept-Language ثم افتراض ar-SA لنطاقات sa. ولا تعيد توجيه Googlebot بعنف. واستخدم hreflang بدل التحويل القسري.
3. RTL مع Tailwind بالطريقة الصحيحة
استخدم الخصائص المنطقية في كل مكان. وهوامش ms وme وحشو ps وpe ومحاذاة text-start وtext-end وحدود border-s وborder-e. ولا تستخدم ml وmr وpl وpr وtext-left وtext-right في كود جديد أبدا. فهي تكسر في RTL.
واقلب الأيقونات الاتجاهية بـ rtl:rotate-180 للأسهم والشيفرون ومؤشرات التقدم. ولا تقلب الشعارات والساعات وأزرار التشغيل. واختبر باللغتين جنبا لجنب.
والنماذج تحتاج عناية. والتسميات فوق المدخلات تعمل بالاتجاهين. وplaceholders عربية مع قيم إنجليزية تحتاج dir auto على المدخل. والأرقام وأسعار الريال وأرقام +9665 يجب أن تستخدم dir ltr داخل صفحات RTL لتتجنب إعادة ترتيب الأرقام.
والجداول والخطوط الزمنية والخطوات يجب أن تعكس. والخطوة الأولى تبدأ من اليمين بالعربية. والشرائح تسحب يمينا ليسارا. وهذه التفاصيل تقرر هل الموقع أصلي أو مترجم.
4. الخطوط والأداء
الخطوط العربية ثقيلة. وقلل Tajawal أو IBM Plex Sans Arabic للعربية مع لاتينية واستخدم font-display swap وpreconnect لنطاق خطوطك. واستضف الخطوط على نطاقك لتتجنب تأخر طرف ثالث.
وحافظ على LCP تحت 2.5 ثانية على 4G في الدمام وجدة. والصور تحتاج AVIF مع alt عربي وتحميل كسول تحت الطية وعرض وطول صريح لتتجنب CLS. وخزن ردود النظام في Redis مع TTL خمس دقائق وإعادة عبر webhook عند النشر.
وقس مع PageSpeed للشرق الأوسط وWebPageTest جوال. فدرجات مختبر أوروبا تكذب عن 4G السعودية.
5. SEO لكل لغة يتصدر
Hreflang لـ ar-SA وen-US مع x-default في كل صفحة. وcanonical لكل لغة لنفسها. وخرائط منفصلة /ar/sitemap.xml و/en/sitemap.xml. وعناوين 50 إلى 60 حرفا بكل لغة وأوصاف 150 إلى 160 ولا ترجمة آلية بدون مراجعة.
وأبق السلقات إنجليزية للاستقرار. وضع العربية في H1 وtitle. والسلقات العربية تسبب مشاكل ترميز ومشاركة وتحليلات. وعميل تحول من عربية لإنجليزية ورأى 18 بالمئة CTR أعلى من روابط أنظف في مشاركات واتساب.
وأضف أسئلة شائعة ومقال Schema بلغة الصفحة ونشاط محلي مع أسعار ريال وعنوان دمام ومراجعات عربية. وهذا يفوز بالنتائج الغنية.
وتجنب العناوين مختلطة اللغة حيث تظهر كلمة إنجليزية داخل عربي. فهي تخفض النقر. وأصلحنا عنوانين ورأينا تحسنا فوريا.
6. التخزين وWebhooks
استراتيجية التخزين stale-while-revalidate للقوائم وISR للتفاصيل وno-store للمسودات. وwebhook عند النشر يجب أن يمسح مفاتيح Redis حسب slug ويفعل revalidateTag لذلك lang مع slug.
ووضع المعاينة يحتاج مصادقة وجلب مسودة يتجاوز التخزين مع شريط يعرض اللغة والحالة. ويجب أن يشارك محررو الرياض رابط معاينة على واتساب يعمل بدون حيل انتهاء.
والخلاصة نمذج الترجمات نظيفا ووجه حسب lang ونسق بخصائص منطقية وتعامل مع SEO كموقعين يشتركان مكونات. وافعل مرة وكل موقع ثنائي جديد إعداد لا اختراع.
