داده های ساخت یافته را با جاوا اسکریپت تولید کنید

وب سایت های مدرن از جاوا اسکریپت برای نمایش محتوای پویا استفاده می کنند. وجود دارد هنگام استفاده از جاوا اسکریپت برای تولید داده های ساختاریافته بر روی خود باید به چند چیز توجه کنید وب سایت ها، و این راهنما بهترین شیوه ها و استراتژی های پیاده سازی را پوشش می دهد. اگر تازه وارد هستید داده های ساخت یافته، می توانید بیشتر در مورد آن بیاموزید نحوه عملکرد داده های ساخت یافته.

روش های مختلفی برای تولید داده های ساختاریافته با جاوا اسکریپت وجود دارد، اما رایج ترین آنها عبارتند از:

• گوگل تگ منیجر
• جاوا اسکریپت سفارشی

از Google Tag Manager برای تولید JSON-LD به صورت پویا استفاده کنید

Google Tag Manager پلتفرمی است که به شما امکان می دهد برای مدیریت برچسب ها در وب سایت خود بدون ویرایش کد. برای تولید داده های ساخت یافته با گوگل تگ منیجر، مراحل زیر را دنبال کنید:

1. Google Tag Manager را در سایت خود تنظیم و نصب کنید.
2. یک برچسب HTML سفارشی جدید به ظرف اضافه کنید.
3. جای‌گذاری داده‌های ساختاریافته مورد نظر را در محتوای برچسب مسدود کنید.
4. کانتینر را همانطور که در بخش نصب Google Tag Manager در منوی مدیریت ظرف خود نشان داده شده است، نصب کنید.
5. برای افزودن برچسب به وب سایت خود، ظرف خود را در رابط Google Tag Manager منتشر کنید.
6. اجرای خود را آزمایش کنید.

استفاده از متغیرها در گوگل تگ منیجر

Google Tag Manager (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>

داده های ساخت یافته را با جاوا اسکریپت سفارشی تولید کنید

روش دیگری که می توانید داده های ساخت یافته تولید کنید، استفاده از جاوا اسکریپت برای تولید همه داده های ساخت یافته خود را یا اطلاعات بیشتری را به داده های ساخت یافته ارائه شده در سمت سرور اضافه کنید. در هر صورت، جستجوی Google می‌تواند داده‌های ساختار یافته‌ای را که در DOM در دسترس هستند، درک کرده و پردازش کند صفحه را رندر می کند. برای کسب اطلاعات بیشتر در مورد نحوه پردازش جاوا اسکریپت جستجوی Google، این را بررسی کنید راهنمای اصول جاوا اسکریپت.

در اینجا نمونه ای از داده های ساخت یافته تولید شده توسط جاوا اسکریپت آورده شده است:

1. نوع را پیدا کنید داده های ساخت یافته مورد علاقه شماست.
2. HTML وب سایت خود را ویرایش کنید تا شامل یک قطعه جاوا اسکریپت مانند مثال زیر باشد (رجوع کنید به مستندات 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 کلیک کنید.

   موفقیت: اگر همه کارها را به درستی انجام داده اید و نوع داده ساختاریافته شما در ابزار پشتیبانی می شود، پیام "صفحه برای نتایج غنی واجد شرایط است" را مشاهده خواهید کرد.
   اگر یک نوع داده ساخت یافته را آزمایش می کنید که توسط تست Rich Results پشتیبانی نمی شود، HTML ارائه شده را بررسی کنید. اگر HTML ارائه شده حاوی داده های ساخت یافته باشد، جستجوی Google می تواند آن را پردازش کند.

   دوباره امتحان کنید: اگر خطاها یا هشدارهایی مشاهده کردید، به احتمال زیاد یک خطای نحوی یا یک ویژگی گم شده است. اسناد را بخوانید برای نوع داده های ساخت یافته شما و مطمئن شوید که همه ویژگی ها را اضافه کرده اید. اگر مشکل شماست همچنان ادامه دارد، حتماً راهنمای را نیز بررسی کنید رفع مشکلات جاوا اسکریپت مربوط به جستجو.