---
title: "كيف تبني موقعاً واحداً بالعربية والتركية والإنجليزية يتصدّر نتائج Google باللغات الثلاث · Abdullah Raslan"
url: https://abdullahraslan.com/ar/blog/multilingual-website-english-turkish-arabic/
language: ar
---

[← كل المقالات](https://abdullahraslan.com/ar/blog/)

نُشر 20 أكتوبر 20266 دقائق قراءة

# كيف تبني موقعاً واحداً بالعربية والتركية والإنجليزية يتصدّر نتائج Google باللغات الثلاث

روابط منفصلة لكل لغة، وhreflang، وصفحات HTML جاهزة مسبقاً، وتصميم حقيقي من اليمين إلى اليسار، وخطوط لا تُبطئ الموقع — قائمة التحقق التي أستخدمها في المواقع ثلاثية اللغة في إسطنبول.

عبدالله رسلان · إسطنبول

> **باختصار:** اجعل لكل لغة رابطها الخاص (`/` و`/tr/` و`/ar/`)، واربط النسخ ببعضها بروابط hreflang متبادلة، وقدّم صفحات HTML مُنشأة مسبقاً، وابنِ العربية كتصميم حقيقي من اليمين إلى اليسار، وحمّل لكل لغة الخطوط التي تحتاجها فقط — ثم قِس السرعة بكل لغة.

معظم الشركات التي أعمل معها في إسطنبول تبيع لثلاثة جماهير في الوقت نفسه: العملاء الأتراك، والزوار والمشترين من العالم العربي، وبقية العالم بالإنجليزية. لذلك نادراً ما يكون السؤال _"هل نحتاج موقعاً؟"_، بل _"كيف نبني موقعاً واحداً يعمل — ويظهر في Google — بثلاث لغات؟"_

الحل المعتاد — إضافة ترجمة مع قائمة لاختيار اللغة — يفشل غالباً بصمت. يبدو الموقع متعدد اللغات، لكن Google لا يرى إلا لغة واحدة، والنسخة العربية تنعكس في بعض المواضع، والصفحات تزداد بطئاً مع كل خط يُضاف.

هذه قائمة التحقق التي أستخدمها بدلاً من ذلك، وهي نفسها الطريقة التي بُني بها هذا الموقع: [English](https://abdullahraslan.com/) و[Türkçe](https://abdullahraslan.com/tr/) و[العربية](https://abdullahraslan.com/ar/).

## 1\. اجعل لكل لغة رابطاً خاصاً بها

محركات البحث تفهرس الروابط لا الأزرار. إذا تغيّرت اللغة عبر ملف تعريف ارتباط أو قائمة منسدلة أو عنوان IP للزائر بينما يبقى الرابط في شريط العنوان كما هو، فسيزحف Google إلى نسخة واحدة ولن يرى البقية أبداً.

اختر نمطاً واحداً واضحاً والتزم به في كل مكان:

-   `example.com/` — الإنجليزية (أو لغتك الأساسية)
-   `example.com/tr/` — التركية
-   `example.com/ar/` — العربية

المجلدات الفرعية هي الخيار الأبسط لشركة صغيرة: نطاق واحد، وشهادة SSL واحدة، وكل اللغات تستفيد من الثقة التي يبنيها النطاق. ويجب أن تكون كل صفحة موجودة بكل لغة _على المسار نفسه_ — `/work/maro/` و`/tr/work/maro/` و`/ar/work/maro/` — حتى يبقى الزائر على الصفحة نفسها عندما يغيّر اللغة.

**لا تعيد توجيه الزوار تلقائياً حسب عنوان IP أو لغة المتصفح.** اقترح عليهم لغة إن شئت، لكن اترك لهم — ولـ Googlebot الذي يزحف غالباً من الولايات المتحدة — الوصول المباشر إلى كل نسخة.

## 2\. أخبر Google أن هذه الصفحات ترجمات لبعضها

دون إشارات واضحة، قد تبدو ثلاث نسخ من الصفحة نفسها محتوى مكرراً. روابط `hreflang` تحل هذه المشكلة: كل صفحة تذكر جميع نسخها اللغوية، بما فيها نفسها:

```html
<link rel="alternate" hreflang="en" href="https://example.com/" />
<link rel="alternate" hreflang="tr" href="https://example.com/tr/" />
<link rel="alternate" hreflang="ar" href="https://example.com/ar/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />
```

ثلاث قواعد تمنع معظم الأخطاء:

1.  **يجب أن تكون الروابط متبادلة.** إذا أشارت الصفحة التركية إلى العربية، فيجب أن تشير العربية إلى التركية أيضاً. أي hreflang في اتجاه واحد يتم تجاهله.
2.  **لكل صفحة رابط canonical خاص بها.** الـ canonical لصفحة `/ar/` هو `/ar/` وليس الصفحة الإنجليزية. توجيه كل اللغات إلى canonical الإنجليزية يعني أنك تطلب من Google حذف الترجمات من الفهرس.
3.  **`x-default` هي النسخة الاحتياطية** للزوار الذين لا تقدّم لغتهم.

أضف الروابط البديلة نفسها إلى خريطة الموقع XML أيضاً، ثم أرسل الخريطة إلى Google Search Console _و_Bing Webmaster Tools — ففهرس Bing يغذّي أيضاً إجابات الذكاء الاصطناعي مثل Microsoft Copilot.

## 3\. اجعل محتوى الصفحة موجوداً قبل تشغيل JavaScript

كثير من المواقع الحديثة تبني كل شيء داخل المتصفح: يرسل الخادم صفحة شبه فارغة، ثم يملؤها JavaScript بالنص — باللغة الصحيحة — بعد لحظة. يستطيع Google تشغيل JavaScript، لكنه يفعل ذلك لاحقاً وبموثوقية أقل، ومعظم زواحف الذكاء الاصطناعي لا تشغّله إطلاقاً.

الحل هو **إنشاء الصفحات مسبقاً** (prerender) أو على الخادم، بكل لغة، بحيث يحتوي HTML الذي يرسله الخادم على العنوان والعناوين الفرعية والنص الحقيقي. في هذا الموقع، كل عملية بناء تُنتج ملف HTML ثابتاً لكل صفحة بكل لغة — 24 صفحة قبل إضافة المدونة — وJavaScript يضيف طبقة التفاعل فقط.

اختبار سريع: افتح صفحتك، واختر **عرض مصدر الصفحة** (وليس _فحص العنصر_)، وابحث عن جملة من النسخة العربية. إن لم تجدها هناك، فمحركات البحث لا تراها أيضاً.

## 4\. العربية تصميم كامل، وليست مجرد ترجمة

دعم الكتابة من اليمين إلى اليسار هو المكان الذي تتعطل فيه معظم المواقع ثلاثية اللغة. إضافة `dir="rtl"` إلى عنصر `<html>` هي البداية فقط:

-   **استخدم خصائص CSS المنطقية.** `margin-inline-start` بدلاً من `margin-left`، و`padding-inline-end` بدلاً من `padding-right`، و`text-align: start` بدلاً من `left`. هكذا يعمل ملف أنماط واحد في الاتجاهين.
-   **اعكس الاتجاه لا المحتوى.** الأسهم وأزرار "التالي/السابق" وأشرطة التقدم يجب أن تنعكس. أما الشعارات والصور وأرقام الهاتف والأكواد وأسماء العلامات بالأحرف اللاتينية فلا.
-   **ألغِ تباعد الأحرف.** الأحرف الكبيرة المتباعدة تبدو أنيقة في النص اللاتيني، لكن التباعد يقطع اتصال الحروف العربية ببعضها. اجعله `0` للعربية.
-   **امنح العربية ارتفاع سطر أكبر.** الحروف العربية أطول، وأسلوب العناوين اللاتيني المضغوط يجعل الأسطر العربية تتداخل.
-   **قرّر شكل الأرقام مرة واحدة.** أرقام هندية (١٢٣) أم أرقام عربية غربية (123)؟ كلاهما صحيح، لكن خلطهما في الصفحة نفسها يبدو إهمالاً. تنسيق `Intl` يتيح لك الاختيار: الإعداد المحلي `ar-EG-u-nu-latn` يكتب التواريخ العربية بالأرقام الغربية.

ثم اختبر بمحتوى حقيقي، فالنص العشوائي بالعربية يُخفي بالضبط المشكلات التي تبحث عنها.

## 5\. حمّل الخطوط التي تحتاجها كل لغة — وهي فقط

ثلاث لغات تعني عادةً عائلتي خطوط على الأقل: واحدة للأحرف اللاتينية (مع الحروف التركية ş وğ وı وİ)، وأخرى مصممة للعربية. إن حُمّلت دون تخطيط، فستُنزّل مئات الكيلوبايتات قبل أن يظهر أول سطر.

ما ينجح فعلاً:

-   **استضف الخطوط على خادمك** بدلاً من تحميلها من ملف CSS خارجي. هذا يلغي اتصالاً إضافياً وطلباً يؤخر عرض الصفحة.
-   **قسّم الخطوط باستخدام `unicode-range`.** عندها لا يُنزّل المتصفح ملف الخط العربي إلا إذا احتوت الصفحة فعلاً على حروف عربية، ولا ملف Latin Extended إلا عند وجود حرف تركي.
-   **حمّل مسبقاً خطاً أو خطين فقط مما يظهر في الشاشة الأولى** — عادةً خط العناوين.

عندما طبّقت هذه التغييرات على هذا الموقع، ارتفعت نتيجة أداء Lighthouse على الجوال من 70 إلى نحو 90، ولم يعد الخط العربي يُنزّل في الصفحات الإنجليزية.

## 6\. ترجم ما يبحث عنه الناس، لا الكلمات حرفياً

كل لغة تحتاج عنوان صفحة ووصفاً خاصين بها، مكتوبين وفق طريقة بحث الناس الفعلية بتلك اللغة. العميل التركي يبحث عن _"e-ticaret sitesi"_ لا عن ترجمة حرفية لعبارة "online store". والمتحدث بالعربية في إسطنبول قد يبحث بالعربية أو بالتركية أو بخليط منهما.

اطلب من متحدث أصلي مراجعة كل نسخة — ويُفضّل أن يكون ممن يعرفون المجال. الترجمة الآلية مسودة أولى جيدة ونسخة نهائية ضعيفة، والزائر يلاحظ الفرق من الجملة الأولى.

## 7\. قِس السرعة بكل لغة

النسخة العربية غالباً هي الأبطأ، لأنها تحمل خطوطها الخاصة وهي الأقل اختباراً. قِس كل نسخة على حدة باستخدام PageSpeed Insights أو Lighthouse، وانظر إلى **Largest Contentful Paint (LCP)**: كم يستغرق ظهور المحتوى الرئيسي؟ الحد "الجيد" عند Google أقل من 2.5 ثانية.

للمقارنة، هذه قيم LCP المقاسة (الوسيط، على سطح المكتب، ثلاث مرات تحميل دون ذاكرة مؤقتة) لمواقع بنيتها:

المشروع

النوع

LCP

[مارو باتسييه](https://abdullahraslan.com/ar/work/maro/)

متجر حلويات

0.32 ث

[فاغو شوب](https://abdullahraslan.com/ar/work/vagoshop/)

تجارة إلكترونية للفنادق والمطاعم

0.40 ث

[ميدوري باريس](https://abdullahraslan.com/ar/work/midoreparis/)

علامة تجميل

0.51 ث

[فاغو ديزاين](https://abdullahraslan.com/ar/work/vagodesign/)

موقع علامة تجارية

0.77 ث

## قائمة التحقق

-    رابط لكل لغة، بالبنية نفسها (`/` و`/tr/` و`/ar/`)
-    لا إعادة توجيه تلقائية حسب IP أو لغة المتصفح
-    روابط `hreflang` متبادلة مع `x-default`، في رأس الصفحة وفي خريطة الموقع
-    رابط canonical يشير إلى الصفحة نفسها في كل نسخة لغوية
-    صفحات HTML مُنشأة مسبقاً أو على الخادم وتحتوي النص الحقيقي
-    `dir="rtl"` وخصائص CSS منطقية وأسهم معكوسة للعربية
-    تباعد أحرف `0` وارتفاع سطر أكبر للنص العربي
-    شكل واحد للأرقام في كل صفحة
-    خطوط مستضافة على خادمك ومقسّمة بـ `unicode-range`، مع تحميل مسبق لخط العناوين فقط
-    عناوين وأوصاف منفصلة لكل لغة يراجعها متحدثون أصليون
-    قيمة LCP مقاسة لكل لغة وأقل من 2.5 ثانية
-    خريطة الموقع مُرسلة إلى Google Search Console وBing Webmaster Tools

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

عن الكاتب

عبدالله رسلان

مهندس حاسوب (جامعة أُسكدار) في إسطنبول. أصمم وأبني مواقع ومتاجر إلكترونية وأنظمة داخلية بالعربية والتركية والإنجليزية — منها فاغو شوب وميدوري باريس ومارو باتسييه.

[المزيد عني](https://abdullahraslan.com/ar/#about)[GitHub ↗](https://github.com/Abdullahrslan)[LinkedIn ↗](https://www.linkedin.com/in/abdullah-rslan-5bbb44183/)

## تخطط لموقع كهذا؟

أخبرني بما تعمل عليه — بالعربية أو التركية أو الإنجليزية.

[ابدأ المحادثة →](https://abdullahraslan.com/ar/#contact)