فهم أساسيات تحسين محركات البحث المستندة إلى "جافا سكريبت"

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

يشرح هذا الدليل الطريقة التي يعالج بها "بحث Google" لغة "جافا سكريبت" كما يوضِّح أفضل الممارسات المُتبَعة لتحسين تطبيقات الويب المستندة إلى "جافا سكريبت" لتتوافق مع "بحث Google".

آلية معالجة Googlebot للغة "جافا سكريبت"

يعالج Googlebot تطبيقات الويب المستندة إلى "جافا سكريبت" في ثلاث مراحل رئيسية:

  1. الزحف
  2. العرض
  3. الفهرسة

يزحف Googlebot إلى الصفحة ويعرضها ثم يفهرسها.

يأخذ برنامج Googlebot عنوان URL من قائمة انتظار الزحف ويزحف إليه ثم ينقله إلى مرحلة المعالجة. تستخرج مرحلة المعالجة الروابط التي تعود إلى قائمة انتظار الزحف وتضع الصفحة في قائمة الانتظار لعرضها. تنتقل الصفحة من قائمة انتظار العرض إلى العارض الذي يعيد رمز HTML المعروض إلى مرحلة المعالجة التي تفهرس المحتوى وتستخلص الروابط لوضعها في قائمة انتظار الزحف.

عندما يجلب Googlebot عنوان URL من قائمة انتظار الزحف عن طريق تقديم طلب HTTP، يتحقق أولاً مما إذا كان عنوان URL يسمح بالزحف إليه. حيث يقرأ Googlebot ملف robots.txt. وفي حال وضع الملف علامة على عنوان URL تفيد بأنه غير مسموح بالزحف إليه، لا يقدم Googlebot طلب HTTP إلى هذا العنوان ويتخطاه.

بعد ذلك، يُجري برنامج Googlebot تحليلاً لغويًا للاستجابة الواردة من عناوين URL الأخرى في السمة href لروابط HTML ويضيف عناوين URL إلى قائمة انتظار الزحف. ويمكنك استخدام آلية nofollow لمنع رصد الرابط.

يتوافق كل من الزحف إلى عنوان URL وتحليل استجابة HTML مع المواقع الإلكترونية الكلاسيكية أو الصفحات التي يعرضها الخادم، وفي هذه الصفحات تحتوي رموز HTML الظاهرة في استجابة HTTP على كل المحتوى. قد تستخدم بعض المواقع الإلكترونية المستندة إلى "جافا سكريبت" نموذج هيكل التطبيق الذي لا تشتمل رموز HTML الأولية فيه على المحتوى الفعلي. ويحتاج برنامج Googlebot إلى تنفيذ "جافا سكريبت" حتى يتمكّن من رؤية محتوى الصفحة الفعلي الذي تنشئه لغة "جافا سكريبت".

ينظِّم برنامج Googlebot جميع الصفحات في قائمة انتظار لعرضها ما لم يطلب الرأس أو العلامة الوصفية لبرامج الروبوت من Googlebot عدم فهرسة صفحة معيَّنة. تبقى الصفحة في قائمة الانتظار هذه لبضع ثوان، لكن قد تستغرق وقتًا أطول من ذلك. بعد أن تسمح موارد Googlebot بالعرض، يقوم Chromium الذي تنقصه واجهة مستخدم رسومية بعرض الصفحة وتنفيذ جافا سكريبت. يُجري برنامج Googlebot تحليلاً لغويًا لمحتوى HTML المعروض بحثًا عن الروابط مرةً أخرى ويضع ضمن قائمة انتظار الزحف عناوين URL التي يعثر عليها. يستخدِم Googlebot أيضًا محتوى HTML المعروض لفهرسة الصفحة.

تجدر الإشارة إلى أن العرض على الخادم أو العرض المُسبَق لا يزال فكرة فعّالة لأنه يجعل موقعك الإلكتروني أسرع بالنسبة إلى المستخدمين وبرامج الزحف، كما يسمح بتنفيذ جافا سكريبت إذا لم تتمكّن برامج التتبُّع من ذلك.

إضافة وصف إلى صفحتك باستخدام العناوين والمقتطفات الفريدة

تساعد العناوين الوصفية الفريدة والأوصاف التعريفية المفيدة المستخدِمين على التحديد السريع لأفضل نتيجة تحقق هدفهم. وسنشرح عوامل إنشاء العناوين والأوصاف الجيدة باتّباع إرشاداتنا.

يمكنك استخدام "جافا سكريبت" لتحديد الوصف التعريفي والعنوان أو تغييرهما.

كتابة رمز متوافق

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

استخدام رموز حالة HTTP الهادفة

يستخدم برنامج Googlebot رموز حالة HTTP لاكتشاف أي أخطاء عند الزحف إلى الصفحة.

عليك استخدام رمز حالة هادف لإعلام برنامج Googlebot في حال عدم وجوب الزحف إلى الصفحة أو فهرستها، مثل رمز 404 لصفحة لا يمكن العثور عليها أو رمز 401 للصفحات المحمية بتسجيل الدخول. ويمكنك استخدام رموز حالة HTTP لإخبار Googlebot بما إذا كانت الصفحة قد انتقلت إلى عنوان URL جديد بحيث يمكن تعديل الفهرس وفقًا لذلك.

في ما يلي قائمة برموز حالة HTTP وحالات استخدامها:

رموز حالة HTTP حالات الاستخدام
301 / 302 انتقال الصفحة إلى عنوان URL جديد
401 / 403 عدم توفُّر الصفحة بسبب مشاكل تتعلّق بالأذونات
404 / 410 عدم توفُّر الصفحة نهائيًا
5xx حدوث خطأ من جانب الخادم

استخدام العلامات الوصفية لبرامج الروبوت بعناية

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

<!-- Googlebot won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">

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

fetch('/api/products/' + productId)
  .then(function (response) { return response.json(); })
  .then(function (apiResponse) {
    if (apiResponse.isError) {
      // get the robots meta tag
      var metaRobots = document.querySelector('meta[name="robots"]');
      // if there was no robots meta tag, add one
      if (!metaRobots) {
        metaRobots = document.createElement('meta');
        metaRobots.setAttribute('name', 'robots');
        document.head.appendChild(metaRobots);
      }
      // tell Googlebot to exclude this page from the index
      metaRobots.setAttribute('content', 'noindex');
      // display an error message to the user
      errorMsg.textContent = 'This product is no longer available';
      return;
    }
    // display product information
    // ...
  });
    

عندما يصادف برنامج Googlebot العلامة الوصفية لبرامج الروبوت noindex قبل تشغيل "جافا سكريبت"، لا يعرض البرنامج الصفحة ولا يفهرسها.

اتباع أفضل الممارسات لمكونات الويب

يدعم Googlebot مكونات الويب. عندما يعرض Googlebot صفحة، يعمل على تنظيم المحتوى في shadow DOM وlight DOM . ويعني هذا أن بإمكان Googlebot رؤية المحتوى المرئي فقط في رمز HTML المعروض. تأكّد من أنّه بإمكان Googlebot رؤية المحتوى بعد عرضه، باستخدام فحص التوافق مع الأجهزة الجوّالة أو أداة فحص عنوان URL وألق نظرة على محتوى HTML المعروض.

إذا لم يكن المحتوى مرئيًا في رمز HTML المعروض، لن يتمكّن Googlebot من فهرسته.

في المثال التالي يتم إنشاء مكوّن ويب يعرض محتوى light DOM داخل shadow DOM إحدى الطرق للتأكد من عرض محتوى light DOM وshadow DOM في رمز HTML المعروض هي باستخدام عنصر خانة.

<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
      let p = document.createElement('p');
      p.innerHTML = 'Hello World, this is shadow DOM content. Here comes the light DOM: <slot></slot>';
      this.shadowRoot.appendChild(p);
    }
  }

  window.customElements.define('my-component', MyComponent);
</script>

<my-component>
  <p>This is light DOM content. It's projected into the shadow DOM.</p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>
            

بعد العرض، سيقوم Googlebot بفهرسة هذا المحتوى:

<my-component>
  Hello World, this is shadow DOM content. Here comes the light DOM:
  <p>This is light DOM content. It's projected into the shadow DOM<p>
  <p>WRS renders this content as well as the shadow DOM content.</p>
</my-component>
    

حلّ مشاكل الصور باستخدام التحميل البطيء للمحتوى

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