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

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

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

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

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

   اختياريًا، ننصح أيضًا بتجميع أخطاء 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.

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