إنشاء بيانات منظَّمة باستخدام JavaScript

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

هناك طرق مختلفة لإنشاء بيانات منظَّمة باستخدام JavaScript، ولكن أكثرها شيوعًا هي:

• إدارة العلامات من Google
• محتوى JavaScript مخصّص

استخدام أداة "إدارة العلامات من Google" لإنشاء JSON-LD بشكل ديناميكي

أداة "إدارة العلامات من Google" هي منصة تتيح لك إدارة العلامات على موقعك الإلكتروني بدون تعديل الرمز. لإنشاء بيانات منظَّمة باستخدام أداة "إدارة العلامات من Google"، اتّبِع الخطوات التالية:

1. إعداد وتثبيت أداة "إدارة العلامات من Google" على موقعك الإلكتروني
2. إضافة علامة HTML مخصّصة جديدة إلى الحاوية
3. لصق كتلة بيانات منظَّمة متوافقة في محتوى العلامة
4. تثبيت الحاوية كما هو موضّح في القسم تثبيت أداة "إدارة العلامات من Google" ضمن قائمة مدير الحاوية.
5. نشر الحاوية في واجهة أداة "إدارة العلامات من Google" لإضافة العلامة إلى موقعك الإلكتروني
6. التحقق من نجاح العملية

استخدام المتغيّرات في أداة "إدارة العلامات من Google"

تتيح أداة "إدارة العلامات من Google" (أي GTM) إمكانية استعمال المتغيّرات من أجل استخدام المعلومات المتوفّرة على الصفحة كجزء من بياناتك المنظَّمة. استخدِم المتغيّرات لاستخراج البيانات المنظَّمة من الصفحة بدلاً من إنشاء نسخة طبق الأصل من المعلومات في GTM. يؤدي إنشاء نسخة طبق الأصل من المعلومات في GTM إلى زيادة احتمال عدم تطابق محتوى الصفحة مع البيانات المنظَّمة التي يتم إدراجها باستخدام GTM.

على سبيل المثال، يمكنك بشكل ديناميكي إنشاء كتلة JSON-LD لوصفة طعام تستخدم عنوان الصفحة كاسم للوصفة، وذلك من خلال إنشاء المتغيّر المخصَّص التالي والمُسمّى recipe_name:

function() { return document.title; }

يمكنك بعد ذلك استخدام {{recipe_name}} في علامة HTML المخصّصة.

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

إليك مثال لمحتوى علامة HTML المخصّصة:

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

إنشاء بيانات منظَّمة باستخدام محتوى JavaScript مخصّص

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

في ما يلي مثال على بيانات منظَّمة تم إنشاؤها باستخدام JavaScript:

1. ابحث عن نوع البيانات المنظَّمة الذي يهمّك.
2. عدِّل HTML الخاص بموقعك الإلكتروني لتضمين مقتطف JavaScript كما هو وارد في المثال التالي (راجِع المستندات التي يقدّمها موفّر "نظام إدارة المحتوى" (CMS) أو المستضيف، أو اطلب المعلومات من مطوّري البرامج).
   

   fetch('https://api.example.com/recipes/123')
   .then(response => response.text())
   .then(structuredDataText => {
     const script = document.createElement('script');
     script.setAttribute('type', 'application/ld+json');
     script.textContent = structuredDataText;
     document.head.appendChild(script);
   });

3. تحقَّق من نجاح العملية باستخدام اختبار النتائج الغنية بصريًا.

استخدام العرض على جهة الخادم

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

التحقق من نجاح العملية

للتأكد من أنّ محرّك بحث Google يمكنه الزحف إلى بياناتك المنظَّمة وفهرستها، تحقّق من نجاح العملية:

1. افتح اختبار النتائج الغنية بصريًا.
2. أدخِل عنوان URL الذي تريد اختباره.
3. انقر على اختبار عنوان URL.

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

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