دليل عملي لبناء موقع محتوى عربي سريع وصديق للسيو (RTL)

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

1. ابدأ بالاتجاه الصحيح

السطر الأول في أي صفحة عربية:

<html lang="ar" dir="rtl">

lang يساعد محركات البحث وقارئات الشاشة، وdir يقلب اتجاه الصفحة كاملة. لا تعتمد على text-align: right وحده، فهو يغيّر محاذاة النص فقط، ولا يقلب ترتيب العناصر ولا علامات الترقيم.

2. استخدم خصائص CSS المنطقية

بدل margin-left وpadding-right، استخدم الخصائص المنطقية التي تتبع اتجاه الصفحة تلقائيًا:

.card {
  margin-inline-start: 1rem;   /* بدل margin-right في RTL */
  padding-inline: 1.25rem;     /* يمين ويسار معًا */
  border-inline-start: 3px solid var(--accent);
  text-align: start;           /* بدل right */
}

الفائدة: إذا أضفت نسخة إنجليزية لاحقًا، يعمل التصميم نفسه دون إعادة كتابة.

3. الخط العربي: خط واحد ومحسَّن

الخطوط العربية أثقل من اللاتينية لكثرة أشكال الحروف. القواعد التي تحافظ على السرعة:

• خط واحد فقط في الموقع كله، بوزنين على الأكثر (عادي وعريض).
• صيغة WOFF2 مع تجزئة الخط (Subsetting) للحروف العربية واللاتينية الأساسية فقط.
• تحميل مسبق للوزن المستخدم في العناوين والنص الأساسي:

<link rel="preload" href="/fonts/plex-arabic-400.woff2"
      as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/fonts/plex-arabic-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
body {
  font-family: "IBM Plex Sans Arabic", Tahoma, system-ui, sans-serif;
}

font-display: swap يعرض النص فورًا بخط النظام حتى يكتمل تحميل الخط، فلا يبقى القارئ أمام صفحة فارغة.

4. البحث الداخلي: وحّد الحروف قبل المقارنة

المستخدم العربي قد يكتب «اسامة» أو «أسامة»، و«مدرسة» أو «مدرسه». إن لم توحّد النص، سيفشل البحث في نتائج صحيحة:

function normalizeArabic(text) {
  return text
    .replace(/[ً-ْـ]/g, "") // حذف التشكيل والتطويل
    .replace(/[أإآ]/g, "ا")
    .replace(/ة/g, "ه")
    .replace(/ى/g, "ي")
    .trim()
    .toLowerCase();
}

// طبّق الدالة على النص المفهرس وعلى كلمة البحث معًا
const match = normalizeArabic(title).includes(normalizeArabic(query));

5. روابط الصفحات: إنجليزية قصيرة

الروابط العربية مقبولة لمحركات البحث، لكنها تتحول عند النسخ والمشاركة إلى سلاسل طويلة مثل %D9%85%D8%A7.... لذلك نستخدم روابط إنجليزية قصيرة مع عناوين عربية:

https://example.com/tech/what-is-vpn/

القاعدة: لا سنوات في روابط المحتوى الدائم، وعمق لا يتجاوز «تصنيف ← مقال».

6. الصور والإعلانات دون إزاحة المحتوى

مواقع المحتوى تعتمد غالبًا على الإعلانات، والإعلانات من أكبر أسباب ارتفاع مؤشر الإزاحة (CLS). الحل: احجز المساحة مسبقًا.

<!-- الصورة الرئيسية: أولوية عالية وبلا تحميل كسول -->
<img src="/img/hero.webp" width="1600" height="900"
     fetchpriority="high" alt="وصف عربي دقيق للصورة">

<!-- صور أسفل الصفحة -->
<img src="/img/step-2.webp" width="1200" height="675"
     loading="lazy" alt="...">

.ad-slot {
  min-height: 280px; /* احجز ارتفاع الإعلان قبل تحميله */
  display: grid;
  place-items: center;
}

الأهداف التي نقيس عليها (بيانات المستخدمين الفعلية على الجوال): LCP أقل من 2.5 ثانية، وINP أقل من 200 ملي ثانية، وCLS أقل من 0.1.

7. البيانات المنظمة للمقالات

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "ما هو VPN وكيف يعمل؟",
  "inLanguage": "ar",
  "datePublished": "2026-10-28",
  "dateModified": "2026-10-28",
  "author": { "@type": "Person", "name": "اسم الكاتب", "url": "https://example.com/authors/name/" },
  "image": ["https://example.com/img/what-is-vpn-hero.webp"]
}
</script>

لا تنسَ inLanguage: "ar"، وحدّث dateModified فقط عند تغيير حقيقي في المحتوى.

8. أبلغ محركات البحث فور النشر (IndexNow)

بروتوكول IndexNow يبلغ Bing وYandex ومحركات أخرى بالروابط الجديدة فور نشرها:

curl -X POST "https://api.indexnow.org/indexnow" \
  -H "Content-Type: application/json; charset=utf-8" \
  -d '{"host":"example.com","key":"YOUR_KEY",
       "keyLocation":"https://example.com/YOUR_KEY.txt",
       "urlList":["https://example.com/tech/what-is-vpn/"]}'

جوجل لا يدعم IndexNow، فاعتمد معه على خريطة موقع بتواريخ lastmod دقيقة، وعلى الربط الداخلي من الصفحة الرئيسية للمقالات الجديدة.

الخلاصة

السرعة في المواقع العربية تأتي من قرارات صغيرة متراكمة: اتجاه صحيح، وخط واحد محسَّن، ومساحات محجوزة للصور والإعلانات، وبحث داخلي يفهم الإملاء العربي. هذه هي الأسس التقنية التي نطبقها في tadwenaa.com، وإن كان لديك سؤال عن أي نقطة منها فاكتبه في التعليقات.