ترجمة موقع React: نسخ لغوية قابلة للزحف تتجاوز مكتبات i18n

تحل مكتبات i18n في React مشكلة تحميل السلاسل النصية، لكن تحسين محركات البحث متعدد اللغات يتطلب HTML قابلًا للفهرسة على عناوين URL مستقلة لكل نسخة لغوية. أما تبديل اللغة من جانب العميل فقط ضمن مسار واحد لتطبيق أحادي الصفحة (SPA)، فيحجب النسخ البديلة عن Google، وغالبًا ما يُظهر اللغة الأخرى للحظات أثناء تهيئة التفاعلية (hydration).

الإجابة المختصرة: HTML قابل للفهرسة على عنوان URL لكل نسخة لغوية

لترجمة موقع React بما يناسب محركات البحث: قدّم HTML كاملًا على عنوان URL فريد لكل نسخة لغوية. توصي Google باستخدام عناوين URL مختلفة وقابلة للزحف لكل لغة، بدلًا من الاعتماد على ملفات تعريف الارتباط أو لغة المتصفح وحدها. مكتبة react-i18next وما شابهها ضرورية، لكنها لا تكفي؛ إذ تحتاج أيضًا إلى استراتيجية للتوجيه والتصيير.

إذا لم يظهر المحتوى الرئيسي إلا بعد أن تحدد JavaScript اللغة، فقد لا ترى برامج الزحف نسخة لغوية مكتملة. ويمكن سد هذه الفجوة باستخدام SSR أو SSG أو التصيير المسبق أو إطار عمل متكامل مثل Next.js أو Remix.

لماذا لا ينجح تبديل اللغة في تطبيقات SPA في تلبية متطلبات تحسين محركات البحث

تقدّم تطبيقات SPA التقليدية المبنية باستخدام create-react-app هيكلًا أوليًا مقتضبًا من index.html، ثم تهيّئ النصوص المترجمة للتفاعل من جانب العميل. تجلب برامج الزحف عنوان URL واحدًا، ولا يمكن الاعتماد عليها لتنفيذ كل تفرّع لغوي. تحتاج النسخ اللغوية إلى عناوين URL مستقلة وقابلة للزحف؛ فتبديل اللغة من جانب العميل فقط على عنوان URL واحد يتعارض مع إرشادات Google للمواقع متعددة اللغات.

يؤدي تحديد النسخة اللغوية عبر ملفات تعريف الارتباط أو localStorage على /app/dashboard دون تغيير عنوان URL إلى المشكلة نفسها في صفحات التسويق العامة. وإذا أُدرج المحتوى الرئيسي بعد تحديد اللغة باستخدام JavaScript، تتضرر الفهرسة.

تجنّب إعادة التوجيه التلقائية بناءً على لغة مفترضة. ووفّر بدلًا منها أداة ظاهرة لاختيار اللغة تتضمن روابط إلى /en/pricing و/de/preise. اطّلع على الفرق بين تحسين محركات البحث الدولي ومتعدد اللغات لفهم السياق الاستراتيجي.

أنماط توجيه النسخ اللغوية في React

استخدم React Router، أو موجّه إطار العمل لديك، مع بادئات للنسخ اللغوية:

• /en/products, /fr/produits
• توجيه عبر نطاقات فرعية مرتبطة بشجرة المسارات نفسها
• عمليات بناء منفصلة لكل نسخة لغوية في المواقع الثابتة

تحدد Google لغة الصفحة من المحتوى الظاهر؛ لذا اجعل لغة واحدة هي السائدة في كل مسار، بما يشمل عناصر التنقل والتذييل. ولزيادة الوضوح، اجعل الأجزاء المقروءة من عناوين URL متوافقة مع لغة النسخة كلما أمكن.

خيارات SSR وSSG والتصيير المسبق

يجب أن تظهر النصوص المترجمة في استجابة HTML للصفحات العامة قبل تهيئة التفاعلية. ويمكن لمكوّنات العميل (Client Components) احتواء العناصر التفاعلية، بينما ينبغي تصيير رسائل القيمة والعناوين على الخادم أو أثناء التصيير المسبق.

توطين البيانات الوصفية والبيانات المنظّمة

اضبط <title> والوصف التعريفي ووسم canonical ووسوم Open Graph وTwitter لكل مسار لغوي. عند استخدام React Helmet مع SSR، أدرج الوسوم من جانب الخادم. ومع Next.js، استخدم generateMetadata. يجب ألا يعتمد العنوان والوصف التعريفي الموطّنان على الاستبدال من جانب العميل.

تحتاج البيانات المنظّمة (WebSite وProduct والأسئلة الشائعة) إلى حقول مترجمة وقيمة صحيحة لـ inLanguage. واحرص على توافق JSON-LD مع النص الظاهر؛ فعدم التطابق يربك برامج الزحف والمستخدمين.

وسوم hreflang وcanonical

أضف عناصر روابط hreflang في رأس المستند لكل مسار، مع إدراج جميع النسخ البديلة، بما فيها الصفحة نفسها. ويجب أن تكون إشارات hreflang متبادلة بين جميع صفحات المجموعة. وعند وجود نسخ مكررة، ينبغي أن تشير وسوم canonical إلى عنوان URL المفضّل ضمن اللغة نفسها.

لخرائط مسارات SPA الكبيرة، أنشئ hreflang عبر نصوص البناء البرمجية أو إدخالات xhtml:link في خريطة الموقع. يتناول دليلنا حول المواقع متعددة اللغات المحسّنة لمحركات البحث قوائم التحقق الخاصة بالتدقيق. وتساعد خرائط مواقع XML على اكتشاف الصفحات، ويمكن أن تتضمن تعليقات hreflang التوضيحية.

سير عمل للمحتوى يتجاوز مكتبات i18n

تدير المكتبات مفاتيح الترجمة، لكنها لا تضمن الالتزام بمسرد المصطلحات أو ذاكرة الترجمة (TM) أو المراجعة. أضف منصة ترجمة أو سير عمل للترجمة بمساعدة الحاسوب (CAT):

• صدّر ملفات JSON/PO وفق جدول زمني
• ثبّت مصطلحات المنتجات في مسرد
• راجع كل نسخة لغوية على عناوين URL لبيئة الاختبار المرحلي
• أعِد التصدير عند تغيير المحتوى الإنجليزي

تعطي إرشادات Google للمحتوى المفيد الأولوية للصفحات التي تضع احتياجات الناس أولًا؛ ولا تفي النسخ اللغوية محدودة المحتوى بهذا المعيار، حتى لو كان التوجيه صحيحًا.

قائمة التحقق من التنفيذ

• عنوان URL مستقل لكل نسخة لغوية في جميع المسارات العامة
• استخدام SSR أو SSG أو التصيير المسبق لإنتاج HTML لصفحات التسويق
• بيانات وصفية موطّنة في الاستجابة الأولية (التحقق عبر عرض مصدر الصفحة)
• إشارات hreflang متبادلة ووسوم canonical لكل نسخة لغوية
• إرسال إدخالات خريطة الموقع للنسخ اللغوية إلى Search Console
• أداة ظاهرة لاختيار اللغة (دون إعادة توجيه تلقائية حسب عنوان IP)
• اختبار تهيئة التفاعلية للتأكد من عدم ظهور الإنجليزية للحظات
• تطبيق مسرد المصطلحات وإجراء المراجعة على صفحات المحتوى الركيزة

تؤكد إرشادات Bing لمشرفي المواقع أيضًا أهمية المحتوى المفيد القابل للزحف والبنية الواضحة.

أخطاء شائعة

تدويل (i18n) بلا مسارات مخصّصة للغات والمناطق — عنوان URL واحد، ونسخ بديلة غير ظاهرة.

تشغيل Helmet على جانب العميل فقط — عناوين فارغة عند عرض مصدر الصفحة.

تعيين النسخة الإنجليزية رابطًا أساسيًا للمسارات المترجمة — إشارة خاطئة لمحركات البحث.

إعادة توجيه تلقائية بناءً على Accept-Language — عوائق أمام برامج الزحف والمستخدمين.

واجهة تنقّل غير مترجمة — إشارات لغوية مختلطة.

تصيير مسبق للصفحة الرئيسية فقط — تظل الروابط الداخلية فارغة أمام برامج الزحف.

نشر ترجمة آلية دون مراجعة — محتوى ضعيف للنسخ المحلية.

أسس البحث التقليدي ومحركات الإجابات

تظل الأسس المشتركة لاستخدام عناوين URL مخصّصة للغات والمناطق في React مع التصيير على الخادم (SSR) أو توليد الصفحات الثابتة (SSG)، بدلًا من الاكتفاء بأزرار تبديل اللغة على جانب العميل، مهمة لدى Google وBing ومحركات الإجابات على حد سواء: نسخ لغوية قابلة للزحف، وكيانات واضحة، وادعاءات مدعومة بالأدلة، وبيانات منظّمة تعكس المحتوى بأمانة، وتوطين حقيقي لا مجرد واجهات بالإنجليزية. انظر إلى الأدلة أدناه بوصفها رؤى خاصة بكل منصة لتحقيق المعيار نفسه في تقديم محتوى متعدد اللغات.

دليل المنصة: Google Search

في بحث Google، يعتمد اكتشاف الصفحات على عناوين URL قابلة للزحف لكل لغة ومنطقة، مع HTML ملائم للغة، وعناوين رئيسية وفرعية دقيقة، وإشارات hreflang متبادلة عند وجود نسخ بديلة. وتشمل الأسس التقنية محتوى قابلًا للفهرسة، لا مجرد مفاتيح تبديل تعتمد على ملفات تعريف الارتباط، وبيانات وصفية موطّنة، وخرائط للموقع، وضبطًا سليمًا للعناوين الأساسية المعتمدة. وتعني جودة المحتوى تقديم محتوى رئيسي يضع المستخدم أولًا في كل لغة، بينما تنبع الموثوقية من وضوح هوية المؤسسة والمصادر المؤيّدة، لا من التسويق لأدوات الترجمة. وبالنسبة للمحتوى متعدد اللغات، يجب أن يكون عنوان URL الخاص بكل سوق أو لغة مكتملًا بحد ذاته. قِس الأداء عبر تغطية الفهرسة وفحص عناوين URL في Search Console لكل لغة ومنطقة. المعلوم مقابل غير المؤكد: توثّق Google آلية التعامل مع المحتوى متعدد اللغات وhreflang، لكنها لا تضمن ترتيبًا معينًا نتيجة استخدام أي نظام لإدارة المحتوى أو سير عمل للتحرير اللاحق للترجمة الآلية.

دليل المنصة: Bing

يكتشف Bing الصفحات متعددة اللغات القابلة للزحف ويفهرسها عندما تكون بنيتها واضحة، بما يشبه متطلبات Google المتعلقة بوضوح عناوين URL والمحتوى. وتشمل الأسس التقنية عناوين URL لكل لغة ومنطقة يمكن جلبها، ومحتوى مفيدًا، ومراقبة عبر Bing Webmaster Tools. أعطِ الأولوية لتوطين العناوين والادعاءات والأسئلة الشائعة، بدلًا من الاكتفاء بترجمة عناصر الواجهة. وتظل إشارات الموثوقية معتمدة على مصادر جديرة بالثقة وكيانات متسقة. وبالنسبة للمحتوى متعدد اللغات، لا تُخفِ اللغات خلف مفاتيح تبديل تعمل من جهة العميل فقط. قِس الفهرسة وإحصاءات الزحف في Bing Webmaster Tools. المعلوم مقابل غير المؤكد: تؤكد إرشادات Bing أهمية المحتوى المفيد القابل للزحف؛ فلا تختلق عوامل ترتيب حصرية لـBing تتعلق بأدوات الترجمة.

دليل المنصة: ChatGPT

قد يستشهد ChatGPT بصفحات متاحة للعامة أو يلخّصها عندما تكون نسخها اللغوية واضحة ومهيّأة لتقديم إجابات. ولا يجري الاكتشاف وفق ترتيب تقليدي قائم على الزحف؛ بل يتمثل الظهور في اختيار الصفحة مصدرًا أو الإشارة إليها في الإجابات. وتظل الأسس التقنية تبدأ بعناوين URL لصفحات HTML يمكن الوصول إليها، لا بطبقات أدوات عائمة تُخفي النصوص. ومن خصائص المحتوى المفيدة الإجابات المباشرة والأسئلة الشائعة والمصطلحات الثابتة المستمدة من المسارد. وتنبع الموثوقية من الأدلة واتساق الكيانات عبر نسخ اللغات والمناطق. وبالنسبة للمحتوى متعدد اللغات، ينبغي أن تكون كل صفحة موطّنة مفهومة بحد ذاتها. والقياس ليس دقيقًا تمامًا؛ لذا تعامل مع نتائج التحقق من الاستشهادات باعتبارها فرضيات. المعلوم مقابل غير المؤكد: لا يوجد ضمان موثّق بأن التحرير اللاحق للترجمة الآلية أو أي تكامل مع نظام لإدارة المحتوى يؤدي إلى استشهادات من ChatGPT.

دليل المنصة: Gemini

يستفيد Gemini وتجارب الذكاء الاصطناعي المرتبطة به لدى Google من اتساق الكيانات، والبيانات المنظّمة حيث تكون دقيقة، والصفحات الموطّنة القابلة للفهرسة. ويتمثل الظهور في الإشارة إلى المحتوى أو التعرّف عليه، لا في اختلاق عوامل ترتيب لـGemini. وتتقاطع الأسس التقنية مع قابلية الزحف وجودة البيانات الوصفية في بحث Google. وينبغي أن يقدّم المحتوى ادعاءات وتعريفات واضحة في كل لغة. وتعتمد الموثوقية على اتساق معلومات المؤسسة والأدلة المؤيّدة. وبالنسبة للمحتوى متعدد اللغات، تقلّل أسماء المنتجات المضبوطة بالمسرد الالتباس بين نسخ اللغات والمناطق. قِس الأداء بالطرق التقليدية عبر Search Console، وقيّم عيّنات من إجابات الذكاء الاصطناعي نوعيًا. المعلوم مقابل غير المؤكد: سلوك Gemini ليس بديلًا عن إرشادات بحث Google الموثّقة بشأن hreflang والنسخ اللغوية.

دليل المنصة: Google AI Overviews

قد تتضمن ميزة «نبذات باستخدام الذكاء الاصطناعي» من Google روابط إلى صفحات داعمة؛ وتظل الأهلية للظهور فيها قائمة على محتوى قابل للفهرسة يضع المستخدم أولًا. وهي ليست وسيلة للتبديل بين اللغات ولا تحلّ محل hreflang. وتبقى الأسس التقنية هي صفحات HTML قابلة للزحف لكل لغة ومنطقة، وبيانات منظّمة تعكس الحقائق. وتشمل خصائص المحتوى إجابات موجزة وعناوين واضحة في كل لغة. وتعكس إشارات الموثوقية معايير المحتوى المفيد. وبالنسبة للمحتوى متعدد اللغات، لا يوجد ضمان لإدراج أي صفحة مترجمة في هذه النبذات. قِس الأداء عبر تقارير الذكاء الاصطناعي التوليدي في Search Console حيثما تتوفر، وأبقِ مقاييس الفهرسة التقليدية منفصلة. المعلوم مقابل غير المؤكد: لا يمكن لأي سير عمل للترجمة أن يَعِد بالظهور في هذه النبذات.

كيف يساعدك GlotEO

تحتاج فرق React التي تتوسع إلى ما هو أبعد من مجرد تبديل ملفات JSON إلى ضبط المصطلحات والمراجعة والتحقق من متطلبات تحسين محركات البحث. يتكامل GlotEO مع حزم التقنيات الحديثة، مع إبقاء إدارة مسارات اللغات والمناطق بيد المهندسين. تعرّف على ترجمة المواقع وتوطينها بالذكاء الاصطناعي وأسعار ترجمة المواقع عند التخطيط لإطلاق مواقع React متعددة اللغات.