سيو React: العرض والبيانات الوصفية والروابط لتطبيق React يتصدر النتائج

اختبار سريع

هل السيو مناسب لك، وكيف تبدأ؟

السؤال 1 من 425%

هل يبحث الناس على Google عمّا تبيعه؟

نعم، أعتقد ذلكلا، إنه جديد أو متخصص جدًالا أعرف

يقصد بـ سيو React جعل تطبيق React قابلًا للزحف والفهرسة والفهم من قبل محركات البحث ومساعدات الذكاء الاصطناعي. React في حد ذاته محايد: المشكلات تأتي من عرض كل شيء في المتصفح. تؤكد Google في أساسيات تحسين محركات البحث لـ JavaScript أنها تعالج تطبيقات JavaScript على ثلاث مراحل (الزحف والعرض والفهرسة)، وأن العرض من جهة الخادم أو العرض المسبق "لا يزال فكرة ممتازة لأنه يجعل موقعك أسرع للمستخدمين والزواحف، وليست كل الروبوتات قادرة على تشغيل JavaScript".

لماذا يُعد React صعبًا من ناحية السيو؟

يقدّم تطبيق React المبني كتطبيق صفحة واحدة ملف HTML لا يحتوي إلا على عنصر div جذري فارغ ووسم script تقريبًا. يحمّل المتصفح JavaScript وينفّذه ويبني الصفحة. أما الزاحف الذي يقرأ HTML فقط فلا يرى شيئًا يفهرسه: لا عناوين ولا نص ولا روابط.

ينفّذ Googlebot شيفرة JavaScript فعلًا، لكن في خطوة منفصلة: تُزحف الصفحة، ثم توضع في طابور العرض، ثم تُعرض في Chromium بلا واجهة، وبعدها فقط تُستخدم الروابط والمحتوى المعروض. كل خطوة إضافية فرصة للفشل (خطأ في سكربت، أو واجهة برمجية محجوبة، أو انتهاء المهلة) وتأخير إضافي قبل ظهور الصفحات الجديدة في البحث. يشرح دليلنا حول سيو JavaScript هذه العملية، ويوضح مقالنا عن الفهرسة في Google كيفية تسريعها.

الروبوتات الأخرى أقل صبرًا. وجد تحليل Vercel الصادر في ديسمبر 2024، The rise of the AI crawler، أن "أيًّا من زواحف الذكاء الاصطناعي الكبرى لا يعرض JavaScript حاليًا"، وذكر GPTBot وChatGPT-User وOAI-SearchBot وClaudeBot وPerplexityBot. صفحة React المعروضة من جهة العميل غير مرئية لـ ChatGPT وClaude وPerplexity، حتى عندما تفهرسها Google.

أي أسلوب عرض يناسب موقع React؟

يوصي فريق React الآن ببدء التطبيقات الجديدة بإطار عمل. وعندما أوقف Create React App في 14 فبراير 2025، كتب في إعلانه أن "العرض على الخادم يمكن أن يحسّن السيو"، وأنه يحسّن الأداء أيضًا بتقليل JavaScript الذي يجب تنزيله قبل رؤية المحتوى. الخيارات من الأضعف إلى الأقوى للبحث:

بشأن العرض الديناميكي، وثائق Google صريحة: "كان حلًا مؤقتًا وليس حلًا طويل الأمد"، وتوصي Google بدلًا منه بالعرض على الخادم أو العرض الثابت أو الترطيب. وإن كنت تختار إطار عمل، فإن دليلنا حول سيو Next.js يشرح أوضاع العرض وMetadata API وخرائط الموقع بالتفصيل.

إن تعذّر الانتقال، يمكن لـ Google مع ذلك فهرسة تطبيق صفحة واحدة ببعض العناية. يسرد دليلنا حول سيو تطبيقات الصفحة الواحدة الشروط اللازمة، وبقية هذا المقال تنطبق على الحالتين.

كيف تضبط العناوين والوسوم الوصفية في React؟

منذ React 19 (المستقر منذ 5 ديسمبر 2024)، يمكن للمكوّنات عرض وسوم title وmeta وlink مباشرة، ويرفعها React إلى head المستند. وتذكر ملاحظات إصدار React 19 أن هذا الدعم المدمج يعمل "مع تطبيقات العميل فقط، وSSR المتدفق، وServer Components". قبل React 19 كانت مكتبات مثل react-helmet أو react-helmet-async تؤدي هذه المهمة، ولا تزال مفيدة لتجاوز القيم الافتراضية في كل مسار.

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

ثلاث قواعد تنطبق أيًّا كانت الطريقة:

• عنوان واحد لكل صفحة، فريد ووصفي. تحذّر وثائق React من أنه إذا عرضت عدة مكوّنات عنوانًا في الوقت نفسه، فإن "سلوك المتصفحات ومحركات البحث غير محدد". مرّر سلسلة نصية واحدة (قالب نصي)، لا خليطًا من النص والمتغيرات.
• وصف واحد ورابط أساسي واحد لكل رابط، يُولَّدان من بيانات الصفحة. يساعدك مولّد الوسوم الوصفية على صياغتهما، ويؤكد مدقق الرابط الأساسي ما هو منشور فعلًا.
• وسوم Open Graph في HTML الأولي للصفحات التي تُشارك، لأن روبوتات معاينة الروابط تقرأ عادة HTML الخام.

ما أخطاء التوجيه والروابط التي تعيق الفهرسة؟

تقول Google إنها "لا تستطيع اكتشاف روابطك إلا إذا كانت عناصر HTML من نوع a تحمل الخاصية href"، وتنصح بعدم استخدام أجزاء الرابط (fragments) لتحميل محتوى مختلف. تأتي معظم إخفاقات سيو React من تفاصيل التوجيه:

لرؤية ما تعرضه Google، استخدم أداة فحص عنوان URL في Search Console واطّلع على HTML الصفحة المختبرة، أو مرّر قوالب الصفحات الأساسية على مدقق قابلية الفهرسة.

كيف تتعامل مع خريطة الموقع والبيانات المنظمة في React؟

لا يتضمن React خريطة موقع مدمجة. أنشئ sitemap.xml وقت البناء من مساراتك وبياناتك (أو بميزة خريطة الموقع في إطار العمل)، ولا تُدرج إلا الروابط الأساسية التي تعيد 200، وأشر إليها في robots.txt. ويكفي مولّد خريطة موقع XML لموقع ثابت صغير.

تتبع البيانات المنظمة القاعدة نفسها التي تتبعها البيانات الوصفية: اعرض سكربت JSON-LD مع الصفحة، ومن البيانات نفسها، ويُفضَّل على الخادم. يمكن لـ Google قراءة JSON-LD المحقون عبر JavaScript بعد العرض، لكن الترميز الغائب عن HTML الأولي يغيب أيضًا عن الزواحف التي لا تعرض. استخدم Article للمقالات، وProduct للتجارة الإلكترونية، وOrganization على مستوى الموقع، وBreadcrumbList للصفحات العميقة.

كيف يؤثر الأداء في سيو React؟

تضر حزم JavaScript الكبيرة بمؤشرات Core Web Vitals: على المتصفح تنزيل الشيفرة وتحليلها وترطيبها قبل أن تستجيب الصفحة، ما يثقل Largest Contentful Paint وInteraction to Next Paint، خاصة على الجوال. ويذكر إعلان فريق React عن Create React App أن العرض على الخادم يرسل JavaScript أقل ومستند HTML كاملًا، ما يسرّع First Contentful Paint وقد يخفض INP. أدوات عملية: تقسيم الشيفرة حسب المسار بـ React.lazy، وتقديم الصور بأبعاد صريحة، وتأجيل تحميل المكوّنات أسفل الجزء الظاهر، ومراجعة سكربتات الأطراف الخارجية.

ما الذي يجب أن تتضمنه قائمة تحقق سيو React؟

1. كل رابط قابل للفهرسة يعيد HTML كاملًا (عرض على الخادم أو عرض مسبق)، مع التحقق عبر curl.
2. عنوان ووصف ورابط أساسي يشير إلى الصفحة نفسها، فريدة لكل رابط.
3. مسارات قائمة على السجل، دون روابط بعلامة #، وكل رابط داخلي معروض كعنصر a مع href.
4. رموز حالة حقيقية: 404 للصفحات المفقودة، و301 أو 308 للصفحات المنقولة.
5. ملف sitemap.xml مُولَّد من بيانات المسارات نفسها ومُعلن في robots.txt.
6. JSON-LD معروض مع الصفحة ومُتحقق منه باختبار النتائج المنسّقة.
7. السكربتات والأنماط والواجهات البرمجية اللازمة للعرض مسموح بها في robots.txt.
8. شيفرة مقسّمة حسب المسار، ومتابعة Core Web Vitals لدى المستخدمين الحقيقيين.

كيف تجعل موقع React ظاهرًا في إجابات الذكاء الاصطناعي؟

يبدأ GEO (التحسين للمحركات التوليدية) بالوصول. فبما أن زواحف الذكاء الاصطناعي تجلب HTML الخام، يجب أن تقدّم صفحة React نصها وعناوينها وJSON-LD دون JavaScript كي تُقرأ وتُلخَّص ويُستشهد بها. ويُظهر تدقيق قابلية الزحف للذكاء الاصطناعي ما تتلقاه هذه الروبوتات من صفحاتك. والشرط الثاني محتوى يستحق الاستشهاد: صفحات تجيب عن سؤال واحد في كل قسم، مع مصادر وأرقام وتعريفات واضحة.

جانب المحتوى هذا هو ما تؤتمته Sorank، منتجنا. Sorank برنامج سيو وGEO يعمل بنظام autopilot: يكتب مولّد مقالات المدونة فيه 20 أو 60 أو 120 مقالًا شهريًا وينشرها مع مصادر وروابط داخلية وصور، ويتصل عبر webhook بالمواقع المبنية خصيصًا مثل مواقع React أو Next.js. ويجيب SEO Chat في محادثة عن أسئلتك حول أداء موقعك في البحث.

الخلاصة: قدّم HTML من الخادم، وامنح كل رابط عنوانه ووصفه ورابطه الأساسي الخاص، واستخدم روابط حقيقية. عندها يتصدر React النتائج مثل أي موقع آخر، وتستطيع مساعدات الذكاء الاصطناعي قراءته. لتغذية هذا الموقع بمقالات مصممة لـ Google والذكاء الاصطناعي، اطّلع على خطط Sorank، بدءًا من 49$ شهريًا مع تجربة مجانية لمدة 3 أيام.