فهم أساسيات تحسين محرّكات البحث المستندة إلى 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 إذا لم تتمكّن برامج التتبُّع من ذلك.

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

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

يمكنك استخدام JavaScript لتحديد الوصف التعريفي وعنصر <title> أو تغييرهما.

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

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

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

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

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

في ما يلي قائمة برموز حالة HTTP وكيفية تأثيرها في &quot;بحث Google‏&quot;.

تجنُّب أخطاء 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>
    

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

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

مراعاة تسهيل الاستخدام عند تصميم الموقع الإلكتروني

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