تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

يساعدك هذا الدليل في تحديد وإصلاح مشاكل 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 المعروض ومعلومات أخرى.

    اختياريًا، ننصح أيضًا بتجميع أخطاء 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';
         }
       });
    • إضافة العلامة الوصفية 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 في &quot;بحث Google‏&quot;.