إصلاح مشاكل JavaScript المتعلقة بـ "بحث Google"

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

تم تصميم Googlebot بطريقة لا تؤدي إلى مشاكل أثناء الزحف على الويب. ومهمته الأساسية هي الزحف مع الحرص على عدم خفض مستوى تجارب المستخدمين الذين يزورون الموقع الإلكتروني. يعمل Googlebot ومكوّنه "خدمة العرض على الويب" ‏(WRS) باستمرار على تحليل وتحديد الموارد التي ليست ضمن المحتوى الأساسي للصفحة، وقد لا يهتمان باسترجاع هذه الموارد. على سبيل المثال، عند استخلاص المحتوى الأساسي للصفحة، لا يتم استخدام طلبات إعداد التقارير والأخطاء التي ليست ضمن المحتوى الأساسي للصفحة والأنواع الأخرى المشابهة من الطلبات، أو تُعتبر هذه الطلبات غير ضرورية لاستخلاص المحتوى. قد لا توفر التحليلات من جهة العميل تمثيلاً كاملاً أو دقيقًا لنشاط Googlebot وWRS على موقعك الإلكتروني. ولهذا السبب ننصح باستخدام Search Console لرصد نشاط Googlebot وWRS والملاحظات الواردة على موقعك الإلكتروني.

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

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

   اختياريًا، ننصح أيضًا بتجميع أخطاء JavaScript التي واجهها مستخدمو موقعك الإلكتروني، ومنهم Googlebot، والتدقيق فيها لتحديد المشاكل المحتملة التي يمكن أن تؤثر في عرض المحتوى.

   في ما يلي مثال يوضّح كيفية تسجيل أخطاء JavaScript الواردة في معالج onerror العمومي. يُرجى العِلم بأنه يتعذّر تسجيل بعض أنواع أخطاء JavaScript باستخدام هذه الطريقة، مثل خطأ التحليل.

   window.addEventListener('error', function(e) {
       var errorText = [
           e.message,
           'URL: ' + e.filename,
           'Line: ' + e.lineno + ', Column: ' + e.colno,
           'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
       ].join('\n');
   
       // Example: log errors as visual output into the host page.
       // Note: you probably don't want to show such errors to users, or
       //       have the errors get indexed by Googlebot; however, it may
       //       be a useful feature while actively debugging the page.
       var DOM_ID = 'rendering-debug-pre';
       if (!document.getElementById(DOM_ID)) {
           var log = document.createElement('pre');
           log.id = DOM_ID;
           log.style.whiteSpace = 'pre-wrap';
           log.textContent = errorText;
           if (!document.body) document.body = document.createElement('body');
           document.body.insertBefore(log, document.body.firstChild);
       } else {
           document.getElementById(DOM_ID).textContent += '\n\n' + errorText;
       }
   
       // Example: log the error to remote service.
       // Note: you can log errors to a remote service, to understand
       //       and monitor the types of errors encountered by regular users,
       //       Googlebot, and other crawlers.
       var client = new XMLHttpRequest();
       client.open('POST', 'https://example.com/logError');
       client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
       client.send(errorText);
   
   });

2. احرص على تجنُّب أخطاء soft 404. وقد يكون ذلك صعبًا على وجه التحديد في تطبيق من صفحة واحدة (SPA). لمنع فهرسة صفحات الخطأ، يمكنك استخدام إحدى الاستراتيجيتَين التاليتَين أو كلتيهما:
   • إعادة التوجيه إلى عنوان URL حيث يستجيب الخادم برمز حالة 404.

     fetch(`https://api.kitten.club/cats/${id}`)
      .then(res => res.json())
      .then((cat) => {
        if (!cat.exists) {
          // redirect to page that gives a 404
          window.location.href = '/not-found';
        }
      });

   • إضافة العلامة meta robots أو استبدالها بالعلامة noindex.

     fetch(`https://api.kitten.club/cats/${id}`)
      .then(res => res.json())
      .then((cat) => {
        if (!cat.exists) {
          const metaRobots = document.createElement('meta');
          metaRobots.name = 'robots';
          metaRobots.content = 'noindex';
          document.head.appendChild(metaRobots);
        }
      });

   عندما يستخدم SPA محتوى JavaScript من جهة العميل لمعالجة الأخطاء، يتم غالبًا الإبلاغ عن رمز حالة HTTP 200 بدلاً من رمز الحالة المناسب. وقد يؤدي ذلك إلى فهرسة صفحات الخطأ وربما ظهورها في نتائج البحث.

3. توقَّع أن يرفض Googlebot طلبات أذونات المستخدمين.
   لا يفهم برنامج Googlebot أو أي مستخدم آخر الميزات التي تتطلب إذن المستخدم. على سبيل المثال، إذا كان من المطلوب السماح بالوصول إلى Camera API، لن يتمكن Googlebot من توفير كاميرا لك. لذلك، يجب توفير وسيلة تتيح للمستخدم الوصول إلى المحتوى بدون أن تفرض عليه السماح بالوصول إلى الكاميرا.
4. لا تستخدم عناوين URL مجزّأة لتحميل محتوى مختلف.
   يمكن أن يستخدم SPA عناوين URL مجزّأة (على سبيل المثال، https://example.com/#/products) لتحميل طرق عرض مختلفة. لقد تم إيقاف مخطط زحف AJAX نهائيًا منذ عام 2015، لذلك لا يمكنك الاعتماد على عناوين URL المجزّأة لتعمل في Googlebot. نقترح استخدام History API لتحميل محتوى مختلف استنادًا إلى عنوان URL في SPA.
5. لا تعتمد على ثبات البيانات لعرض المحتوى.
   تُحمّل خدمة WRS جميع عناوين URL بعد أن يجري الخادم والبرنامج عمليات إعادة التوجيه كما هي الحال في أي متصفّح (يُرجى مراجعة صفحة طريقة عمل محرك بحث Google للاطّلاع على نظرة عامة حول الطريقة التي يكتشف بها Google المحتوى). ولا تحتفظ خدمة WRS بحالتها في جميع عمليات تحميل الصفحات:
   • يتم محو بيانات التخزين المحلي وتخزين الجلسة في جميع عمليات تحميل الصفحات.
   • يتم محو ملفات تعريف الارتباط HTTP في جميع عمليات تحميل الصفحات.
6. استخدِم بصمة المحتوى لتجنُّب مشاكل التخزين المؤقّت في Googlebot.
   ينشط Googlebot في التخزين المؤقّت لتقليل طلبات الشبكة واستخدام الموارد. وقد تتجاهل خدمة WRS رؤوس التخزين المؤقّت. وقد يؤدي ذلك إلى استخدام WRS لموارد JavaScript أو CSS قديمة. تتجنّب بصمة المحتوى هذه المشكلة من خلال جعل بصمة من المحتوى جزءًا من اسم الملف، مثل main.2bb85551.js. وتعتمد بصمة المحتوى على محتوى الملف، لذا يتم إنشاء اسم ملف مختلف كلما تم إجراء تعديلات. يمكنك الاطّلاع على دليل web.dev للحصول على مزيد من المعلومات عن استراتيجيات التخزين المؤقّت الطويل الأجل.
7. تأكَّد من أنّ التطبيق يستخدم رصد الميزات لجميع واجهات برمجة التطبيقات المهمّة التي يحتاج إليها، واحرص على توفير إجراء بديل أو استخدام رمز polyfill حيثما كان ذلك منطبقًا.
   قد لا تستخدم بعض برامج وكيل المستخدم ميزات ويب معيّنة، بينما تتعمّد بعض البرامج الأخرى إيقاف ميزات معيّنة. إذا كنت تستخدم مثلاً WebGL لعرض تأثيرات الصور في المتصفح، يُظهر "رصد الميزات" أنّ Googlebot لا يتيح عمل WebGL. لحلّ هذه المشكلة، يمكنك تخطّي تأثيرات الصور أو استخدام العرض من جهة الخادم لعرض تأثيرات الصور مسبقًا، ما يتيح للجميع الوصول إلى المحتوى، بما في ذلك Googlebot.
8. تأكَّد من أنّ المحتوى يتوافق مع اتصالات HTTP.
   يستخدم Googlebot طلبات HTTP لاسترداد المحتوى من الخادم. ولا يتيح أنواعًا أخرى من الاتصالات، مثل اتصالات WebSockets أو WebRTC. لتجنّب حدوث مشاكل في مثل هذه الاتصالات، احرص على توفير اتصال HTTP بديل لاسترداد المحتوى واستخدام المعالجة القوية للأخطاء ورصد الميزات.
9. تأكَّد من أنّ مكوّنات الويب تُعرض على النحو المتوقّع. يمكنك استخدام اختبار النتائج الغنية بصريًا أو أداة فحص عنوان URL للتحقق مما إذا كانت مكوّنات HTML المعروضة تتضمّن كل المحتوى الذي تتوقّعه.
   تنظّم خدمة WRS المحتوى في light DOM وshadow DOM. إذا كانت مكوّنات الويب التي تستخدمها لا تستخدم آلية <slot> لمحتوى light DOM، يمكنك مراجعة مستندات مكوّن الويب للحصول على مزيد من المعلومات أو استخدام مكوّن ويب آخر بدلاً من ذلك. لمزيد من المعلومات، راجِع أفضل الممارسات الخاصة بمكوّنات الويب.
10. بعد إصلاح العناصر الواردة في قائمة التحقق هذه، اختبِر صفحتك مرة أخرى باستخدام اختبار النتائج الغنية بصريًا أو أداة فحص عنوان URL في Search Console.

    إذا تم حل المشكلة، ستظهر علامة اختيار خضراء ولن يتم عرض أي أخطاء. إذا استمر ظهور الأخطاء، انشر مشاركة في مجموعة عمل مواقع JavaScript في "بحث Google".