هل لديك أسئلة؟ انتقِل إلى منتدى مشرفي المواقع من Google. انتقِل إلى منتدى مشرفي المواقع بلغتك المحلية لمناقشة المواضيع المرتبطة بخدمة Search Console ومشرفي المواقع وتحسين محرّكات البحث (SEO) وغيرها من المواضيع، وطرح أسئلة حولها والإجابة عن أسئلة الآخرين.

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

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

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

طريقة معالجة Googlebot للغة JavaScript

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

  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 على كل المحتوى. قد تستخدم بعض المواقع الإلكترونية المستندة إلى JavaScript نموذج هيكل التطبيق الذي لا تشتمل رموز HTML الأولية فيه على المحتوى الفعلي. ويحتاج برنامج Googlebot إلى تنفيذ JavaScript حتى يتمكّن من رؤية محتوى الصفحة الفعلي الذي تنشئه لغة JavaScript.

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

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

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

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

يمكنك استخدام JavaScript لضبط الوصف التعريفي والعنوان أو تغييرهما.

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

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

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

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

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

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

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

تجنّب أخطاء soft 404 في تطبيقات الصفحة الواحدة

في تطبيقات الصفحة الواحدة المعروضة من جهة العميل، غالبًا ما يتم تنفيذ التوجيه كتوجيه من جهة العميل. في هذه الحالة، قد يكون استخدام رموز حالة HTTP المفيدة غير ممكن أو غير عملي. ولتجنّب أخطاء soft 404 عند استخدام العرض والتوجيه من جهة العميل، استخدِم إحدى الاستراتيجيات التالية:

  • استخدِم إعادة توجيه JavaScript إلى عنوان URL يستجيب له الخادم برمز حالة HTTP 404 (مثلاً، /not-found).
  • أضِف <meta name="robots" content="noindex"> إلى صفحات الخطأ باستخدام JavaScript.

في ما يلي رمز نموذجي لطريقة إعادة التوجيه:

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    window.location.href = '/not-found'; // redirect to 404 page on the server.
  }
})

في ما يلي رمز نموذجي لطريقة noindex:

fetch(`/api/products/${productId}`)
.then(response => response.json())
.then(product => {
  if(product.exists) {
    showProductDetails(product); // shows the product information on the page
  } else {
    // this product does not exist, so this is an error page.
    // Note: This example assumes there is no other meta robots tag present in the HTML.
    const metaRobots = document.createElement('meta');
    metaRobots.name = 'robots';
    metaRobots.content = 'noindex';
    document.head.appendChild(metaRobots);
  }
})

استخدام History API بدلاً من الأجزاء

عندما يبحث Googlebot عن روابط في صفحاتك، ينظر فقط إلى عناوين URL في السمة href لروابط HTML.

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

<nav>
  <ul>
    <li><a href="#/products">Our products</a></li>
    <li><a href="#/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="#/products">our products</a> and <a href="#/services">our services</p>
</div>
<script>
window.addEventListener('hashchange', function goToPage() {
  // this function loads different content based on the current URL fragment
  const pageToLoad = window.location.hash.slice(1); // URL fragment
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
});
</script>

بدلاً من ذلك، يمكنك التأكّد من إمكانية وصول Googlebot إلى عناوين URL للروابط من خلال تطبيق History API:

<nav>
  <ul>
    <li><a href="/products">Our products</a></li>
    <li><a href="/services">Our services</a></li>
  </ul>
</nav>

<h1>Welcome to example.com!</h1>
<div id="placeholder">
  <p>Learn more about <a href="/products">our products</a> and <a href="/services">our services</p>
</div>
<script>
function goToPage(event) {
  event.preventDefault(); // stop the browser from navigating to the destination URL.
  const hrefUrl = event.target.getAttribute('href');
  const pageToLoad = hrefUrl.slice(1); // remove the leading slash
  document.getElementById('placeholder').innerHTML = load(pageToLoad);
  window.history.pushState({}, window.title, hrefUrl) // Update URL as well as browser history.
}

// Enable client-side routing for all links on the page
document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage));

</script>

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

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

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

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

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 في العلامة الوصفية لبرامج الروبوت قبل تشغيل JavaScript، لا يعرض الصفحة ولا يفهرسها.

استخدام التخزين المؤقّت الطويل الأجل

ينشط Googlebot في التخزين المؤقّت لتقليل طلبات الشبكة واستخدام الموارد. وقد تتجاهل خدمة WRS رؤوس التخزين المؤقّت. وقد يؤدي ذلك إلى استخدام WRS لموارد JavaScript أو CSS قديمة. تتجنّب بصمة المحتوى هذه المشكلة من خلال جعل بصمة من المحتوى جزءًا من اسم الملف، مثل main.2bb85551.js. وتعتمد بصمة المحتوى على محتوى الملف، لذا يتم إنشاء اسم ملف مختلف كلما تم إجراء تعديلات. يمكنك الاطّلاع على دليل web.dev للحصول على مزيد من المعلومات عن استراتيجيات التخزين المؤقّت الطويل الأجل.

استخدام البيانات المنظَّمة

عند استخدام البيانات المنظَّمة على صفحاتك، يمكنك استخدام JavaScript لإنشاء محتوى JSON-LD المطلوب وإدخاله في الصفحة. احرص على اختبار نجاح العملية لتجنُّب حدوث المشاكل.

اتّباع أفضل الممارسات الخاصة بمكوّنات الويب

يدعم 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>
    

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

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