معظم المواقع العربية مواقع إنجليزية استُبدل نصها. هذه القائمة تغطي ما يجب أن يتغيّر فعلاً: الاتجاه، والخطوط، والنص المختلط، والنماذج، والأرقام، وإشارات الـ SEO التي يقرأها الزاحف.
معظم المواقع العربية مواقع إنجليزية استُبدلت نصوصها. التخطيط ما زال يُقرأ من اليسار إلى اليمين بمئة طريقة صغيرة، والخط هو ما يرجع إليه هاتف الزائر، واسم علامة لاتيني داخل جملة عربية يُعرض معكوساً، ورقم الهاتف ينقسم في منتصفه، والزاحف يُخبَر أن الصفحة بالإنجليزية. كل واحد من هذه بند قابل للإصلاح، وهذه هي القائمة. كُتبت لتُشغَّل من أعلى إلى أسفل على صفحة حقيقية، في المتصفح أولاً ثم في الـ Crawler.
1. إعداد المستند
<html lang="ar" dir="rtl">على كل صفحة عربية، محسوبة من الـ Locale، لا مثبّتة على قيمة واحدة للموقع كله. الموقع ثنائي اللغة الذي يحملdir="ltr"في التخطيط الجذري يعرض كل صفحة عربية معكوسة.<meta charset="utf-8">أولاً في الـ Head. مشاكل الترميز تظهر كعلامات استفهام ومربعات.- للنسخة العربية رابطها الخاص (
/ar/…)، لا معامل ولا Cookie. يجب أن يحصل الزاحف والإنسان على المستند نفسه على العنوان نفسه. langعلى أي عنصر يبدّل اللغة داخل الصفحة، كاقتباس إنجليزي داخل نص عربي، ليقرأه قارئ الشاشة ومحرك البحث بشكل صحيح.
2. الطباعة
- اختر خطاً عربياً عمداً. الخطوط الاحتياطية للنظام تختلف كثيراً بين الأجهزة؛ ستبدو الصفحة مختلفة على كل هاتف. استضف ذاتياً خطاً بتغطية عربية كاملة وبالأوزان التي تستخدمها.
- حمّل الخط العربي واللاتيني كلاً على حدة ودع
unicode-rangeيقرّر أيهما ينطبق على كل حرف. هكذا تأخذ المصطلحات اللاتينية داخل النص العربي الخط اللاتيني، والعربية الخط العربي، دون أي Override للخطوط تحت[dir="rtl"]. - ارتفاع سطر بين 1.8 و 1.9 لنص المتن. الحروف العربية أطول وتحمل علامات فوق خط الأساس وتحته؛ والافتراضي اللاتيني 1.5 يجعلها مزدحمة.
- لا تطبّق
letter-spacingعلى العربية أبداً. إنها كتابة متصلة؛ التباعد يقطع الوصلات والكلمة. - أحجام العناوين تحتاج ضبطاً. العربية أطول من الإنجليزية بنسبة 20 إلى 30%، والعنوان الذي يستقر في سطرين بالإنجليزية يلتف إلى خمسة على الهاتف بالعربية. قصّر النص أو صغّر حجم العرض للـ Locale العربية.
- تأكد من وجود الأوزان الغليظة فعلاً. الوزن 700 المفقود يجعله المتصفح غليظاً اصطناعياً، فتتلطّخ الحروف العربية.
3. النص المختلط
هنا تبدو معظم المواقع العربية معطوبة في نظر القارئ الأصلي.
- المصطلحات اللاتينية داخل الجمل العربية (أسماء المنتجات، المصطلحات التقنية) تحتاج مسافة على الجانبين. حرف العطف الملتصق بكلمة لاتينية (
وWordPress) يُعرض كحرف شارد ملتصق بالطرف الخطأ. - السوابق قبل الكلمات اللاتينية تأخذ كشيدة:
بـ React،الـ Frontend. وخوارزمية الـ Bidi في المتصفح تتكفّل بالباقي ما دامت الوحدات مفصولة. - أرقام الهواتف والرموز وأي شيء يبدأ بـ
+أو رقم تحتاج علامة LTR قبلها أو غلافاً بـdir="ltr"، وإلا قفزت علامة الزائد إلى الجهة الخطأ. - كتل الكود ومسارات الملفات والروابط تُغلَّف بـ
<code>أو<pre>معdirection: ltr; unicode-bidi: isolate; text-align: left. الصفحة العربية التي تعرض/ar/services/معكوساً مشهد شائع. - النصوص الديناميكية مجهولة الاتجاه (أسماء المستخدمين، عناوين المنتجات من قاعدة بيانات) توضع داخل
<bdi>حتى لا تقلب السطر المحيط. - علامات الترقيم: الفاصلة العربية
،وعلامة الاستفهام؟. الفاصلة اللاتينية في نهاية جملة عربية تستقر في الجهة الخطأ.
4. عكس التخطيط
- ابنِ بـ خصائص CSS المنطقية:
margin-inline-startوpadding-inline-endوinset-inlineوtext-align: start. التخطيط المكتوب بـmargin-leftيجب أن يُتجاوز قاعدةً قاعدة للـ RTL، ودائماً يُنسى شيء. - التنقل و Breadcrumbs وترقيم الصفحات تنعكس. فواصل الـ Breadcrumbs يجب أن تشير إلى الاتجاه الآخر. و«التالي» على اليسار.
- الأيقونات التي تدل على اتجاه (الأسهم، الأقواس، «رجوع») تُعكس بـ
transform: scaleX(-1)تحت[dir="rtl"]. أما التي لا تدل على اتجاه (هاتف، علامة صح) فلا. - الـ Carousels والـ Sliders تحتاج ضبط اتجاهها صراحةً؛ معظم المكتبات لديها خيار RTL وتتجاهل اتجاه المستند بدونه.
- التكوينات الفنية الثابتة (Hero مبني من قطع بموضع مطلق) تُثبَّت على
direction: ltrليبقى العمل الفني سليماً بينما تنعكس الصفحة حوله. - الجداول تنعكس تلقائياً في محاذاة النص، لكن افحص الأعمدة الرقمية: الأرقام تبقى من اليسار إلى اليمين داخل خلية محاذاة لليمين، وهذا صحيح، لكن العناوين والمجاميع تحتاج غالباً
text-align: end.
5. النماذج
- التسميات والـ Placeholders بالعربية، مع
dirللحقل مطابق للمحتوى المتوقع:dir="ltr"على حقول البريد والرابط والهاتف حتى في الصفحات العربية، لأن محتواها لاتيني. - رسائل التحقق بالعربية، لا من نصوص المتصفح الإنجليزية الافتراضية.
- الأزرار: الإجراء الأساسي حيث ينتهي ترتيب القراءة، وهو ما ينعكس عن التخطيط الإنجليزي.
- منتقيات التواريخ وقوائم الاختيار من المكتبات كثيراً ما تتجاهل
dir. اختبر كلاً منها.
6. الأرقام والتواريخ
- اختر نظام أرقام واحداً، عربي هندي (١٢٣) أو غربي (123)، وطبّقه على الموقع كله. خلطهما في صفحة واحدة يُقرأ إهمالاً.
- نسّق التواريخ والأسعار والأعداد بدوال الـ Locale في المنصة (
Intl.DateTimeFormatوIntl.NumberFormatمعarأوar-u-nu-latn) لا بكتابة النصوص يدوياً. التواريخ المكتوبة يدوياً هي التي تنتهي بنظام أرقام خاطئ في نصف الصفحات. - رموز العملات والوحدات توضع حيث يضعها الـ Locale، وهو ما تتولاه الدوال نفسها.
7. أداء خاص بالعربية
- خطوط الويب العربية كبيرة. قلّصها إلى نطاقات الحروف التي تستخدمها، وقدّمها بصيغة WOFF2، واضبط
font-display: swapحتى لا يختفي النص أبداً أثناء تحميل الخط. - حمّل الخط العربي على الصفحات العربية فقط. مع
unicode-rangeيحدث هذا تلقائياً: يتخطّى المتصفح الخط الذي لا يظهر نطاقه في الصفحة. - اختبر على هاتف متوسط باتصال بطيء. الصفحات العربية تميل إلى أن تكون أثقل من توائمها الإنجليزية بسبب الخط ولأن النص العربي أطول؛ وهدف الـ LCP هو 2.5 ثانية نفسها.
8. الـ Technical SEO للصفحات العربية
- hreflang على كل صفحة:
enوarوx-default، متبادلة، تشير إلى روابط Canonical، وتُصدَر فقط للصفحات الموجودة فعلاً بالعربية. - Canonical على كل صفحة عربية يشير إلى نفسها، لا إلى النسخة الإنجليزية.
- Sitemap يذكر الروابط العربية مع بدائلها. إن غابت الروابط العربية عن الـ Sitemap فستُكتشف متأخرة وتُفهرس متأخرة.
- عناوين وأوصاف مكتوبة بالعربية، لا مترجمة بـ Plugin، مطابقة لما يكتبه الناطقون بالعربية. ويمكن أن تبقى المصطلحات التقنية بالحروف اللاتينية حين يبحث الناس عنها هكذا.
- Structured Data بـ
inLanguage: "ar"على الصفحات العربية، وبيانات الـ Organization مشتركة عبر@idواحد في اللغتين. - لا Redirects تلقائية بحسب لغة المتصفح. فهي تخفي النسخة العربية عن الزواحف التي تتقدّم كإنجليزية، وعن الناطقين بالعربية الذين ضُبط متصفحهم على الإنجليزية.
- تطابق حقيقي في المحتوى. الصفحة العربية الهزيلة بجوار صفحة إنجليزية كاملة تُزحف وتُهمل. إن كان في الصفحة العربية ثلث الكلمات فليست ترجمة؛ إنها مسودة.
القائمة
| المجال | الفحص | نجاح |
|---|---|---|
| المستند | lang="ar" dir="rtl" من الـ Locale؛ رابط خاص | |
| الخطوط | خط عربي مستضاف ذاتياً، مقلّص، unicode-range، بلا Letter Spacing | |
| النص المختلط | مسافات حول المصطلحات اللاتينية، كشيدة للسوابق، علامات LTR على الأرقام، كود معزول | |
| التخطيط | خصائص منطقية، أيقونات معكوسة، Sliders بـ RTL، فن مثبّت | |
| النماذج | تسميات عربية، dir لكل نوع حقل، تحقق بالعربية | |
| الأرقام | نظام واحد، تواريخ وأسعار منسّقة بالـ Locale | |
| الأداء | WOFF2 مقلّص، Swap، LCP أقل من 2.5 ثانية على الهاتف | |
| الـ SEO | hreflang، Canonical ذاتي، Sitemap، عناوين عربية، inLanguage، بلا Redirect تلقائي، تطابق محتوى |
شغّلها على ثلاث صفحات: الرئيسية، وصفحة خدمة، ومقال. إن نجحت الثلاث فالقوالب ناجحة. وإن فشلت واحدة ففشل معها كل صفحة على ذلك القالب.
لماذا هذا مقال SEO لا مقال تصميم
تقرأ محركات البحث الإشارات نفسها التي يقرأها القارئ الأصلي. الصفحة ذات الـ lang الخاطئ، وبلا hreflang، وبنص مترجم هزيل، و Canonical لاتيني، تُحكم عليها تماماً كما يحكم عليها القارئ: ليست عربية حقاً. بنود التصميم أعلاه مهمة لأنها ما يراه الزاحف بعد الرسم، وبنود الـ SEO مهمة لأنها الطريقة التي يُخبَر بها الزاحف بما ينظر إليه. أصلح الاثنين، بهذا الترتيب، فتتوقف الصفحات العربية عن أن تكون الجزء من الموقع الذي لا يظهر أبداً في النتائج.
أسئلة
هل يكفي direction: rtl في CSS لجعل الموقع عربياً؟
لا. الاتجاه يعكس تدفق النص داخل السطر فقط. يحتاج المستند إلى lang و dir على عنصر html، وخط يحتوي حروفاً عربية، وتخطيطات مبنية بخصائص منطقية لتنعكس، ونماذج وأيقونات تنعكس، ومعالجة للمصطلحات اللاتينية المختلطة حتى لا تتبعثر. الاتجاه هو الأول من نحو عشرين بنداً.
هل تستخدم الصفحات العربية الأرقام العربية الهندية أم الغربية؟
كلاهما عربية صحيحة؛ اختر واحداً وطبّقه في كل مكان. الأرقام الغربية تنسجم أكثر مع المصطلحات اللاتينية والأسعار، وهي ما يتوقعه معظم الجمهور التقني. وأياً كان اختيارك، نسّق التواريخ والأرقام بدوال الـ Locale في المنصة لا بالكتابة اليدوية.
لماذا لا تتصدّر صفحاتي العربية رغم أن الإنجليزية تتصدّر؟
الأسباب المعتادة بالترتيب: الصفحات العربية ليست في الـ Sitemap أو بلا hreflang، أو خاصية lang في html تقول en، أو النص العربي ضعيف أو مترجم آلياً، أو الروابط العربية تعيد التوجيه إلى الإنجليزية لبعض الزوار. أصلح إشارات الـ Crawl قبل كتابة مزيد من المحتوى العربي.
اعمل مع Alnitak
التحليل ثنائي اللغة يشغّل هذه القائمة على صفحاتك العربية، في المتصفح وفي الـ Crawler، ويسلّمك قائمة الإصلاح.
تحليل Technical SEO ثنائي اللغة — من 1,700 دولار (5 إلى 7 أيام)
