اسکیمای محصول (JSON-LD) در Next.js؛ کد اسکیمای استاندارد گوگل برای فروشگاه
نویسنده: آرش لطیفی
پیاده‌سازی schema.org Product با JSON-LD در Next.js App Router به همراه کد کامل، نکات ریچ‌ریزلت گوگل و اشتباهات رایج در قالب فروشگاهی.
TL;DR — اسکیمای محصول همان قطعه JSON در
headصفحه است که به گوگل می‌فهماند این صفحه یک محصول با قیمت و موجودی مشخص است؛ در Next.js با یک کامپوننت کوچک سروری ساخته می‌شود.
هرچقدر هم محتوای صفحه محصولت عالی باشد، گوگل قیمت و موجودی تو را از متن قیمتی حدس می‌زند. احتمالش که اشتباه کند بالاست، چون قیمت‌های مختلف برای یک محصول در صفحات دیگر هم وجود دارد.
JSON-LD راه مستقیم گفتن این حرف به گوگل است. نتیجه‌اش چیزی است که در ریچ‌ریزلت‌ها و نمایش‌های جدید گوگل خودت می‌بینی.
قبل از کد: داده‌ها را جدا کن
قانون تمیز نگه داشتن کد: هیچ HTML قاطی اسکیما نریز. JSON-LD یک بلوک <script type="application/ld+json"> است که هیچ چیزی به صفحه اضافه نمی‌کند و در محتوای رندرشده هم ظاهر نمی‌شود.
اول نوع محصول و قیمت را مشخص کن. برای فروشگاه‌های ایرانی، موجودی با InStock نمایش داده می‌شود ولی قیمت را همیشه به تومان در قیمت پایه بگذار و واحد را در priceCurrency بنویس:
"priceCurrency": "IRT"
نکتهٔ ISO 4217:
IRT(تومان) از نظر schema.org معتبر است، اما گوگل مرکز تجارت واحدها را با ISO 4217 اعتبارسنجی می‌کند و IRR (ریال) می‌خواهد. اگر فید محصول می‌فرستیIRRبگذار؛ برای نمایش تومان فقط متن نمایشی را عوض کن.
حالا بریم سراغ پیاده‌سازی. فیلدهای اصلی که در کد زیر می‌بینی:
| فیلد | چرا لازم است | منبع داده در پروژه تو |
|---|---|---|
| name | عنوان قابل نمایش در نتایج | فیلد title محصول |
| description | خلاصه‌ای که همراه قیمت نشان داده می‌شود | فیلد summary |
| sku | شناسه‌ای که قیمت را به محصول گره می‌زند | id یا کد کالا |
| image | پیش‌نمایش محصول در نتایج | آدرس CDN عکس |
| offers.price | قیمت لحظه‌ای، نه قیمت تخفیف‌خورده قدیمی | قیمت فعال در دیتابیس |
| offers.availability | وضعیت موجودی برای نمایش در نتایج | stock بیشتر از صفر |
کد کامل: کامپوننت اسکیمای محصول
در App Router یک کامپوننت سروری کوچک کافی است. نکته کلیدی: این کامپوننت هیچ use clientی ندارد، پس خروجی مستقیم داخل HTML نهایی می‌نشیند و کلاینت‌ساید جاوااسکریپت لازم ندارد.
حالا در صفحه محصول صدایش بزن:
چرا این روش درست کار می‌کند
سه نکته که معمولا خرابش می‌کنند:
- کامپوننت سروری بماند. اگر
use clientبزنی، داده در بسته جاوااسکریپت می‌رود و ممکن است دیر برسد یا اصلا در HTML اولیه نباشد. - از
JSON.stringifyاستفاده کن. نوشتن دستی JSON ریسک کامای جا افتاده دارد. - قیمت را رشته بده.
schema.orgقیمت را به صورت متن می‌خواهد، نه عدد اعشاری.
اگر چند محصول در یک صفحه لیست داری، می‌توانی چند نمونه را در یک آرایه با @graph بگذاری. جزئیات بیشتر درباره متادیتا و سایت‌مپ در راهنمای متادیتا و OG در Next.js هست.
اشتباهات رایج در قالب‌های فروشگاهی
یکی دو محصول را اسکیما می‌زنند ولی بقیه صفحات نه. اسکیما باید روی همه صفحات محصول باشد، وگرنه الگوی ناقص گزارش می‌گیری.
قیمت نمایشی با قیمت واقعی فرق دارد. اگر تخفیف داری، price باید همان چیزی باشد که کاربر می‌پردازد و برای تخفیف یک AggregateOffer اضافه کن. درباره کمپین تخفیف در راهنمای کمپین کد تخفیف حرف زدیم.
عکس‌ها دامنه دیگری هستند. آدرس عکس باید مستقیم و قابل دسترس باشد؛ درباره بهینه‌سازی سایز و مسیر ذخیره‌سازی عکس‌ها در راهنمای بهینه‌سازی عکس صحبت کردیم.
ساختار صفحه درست است ولی محتوا نیست. اسکیما جای محتوای مفید را نمی‌گیرد؛ راهنمای چیدمان صفحه محصول فروشنده‌ها را حتما کنارش بخوان.
تست قبل از انتشار
قبل از اینکه منتشر کنی، خروجی را اعتبارسنجی کن:
- [ ] کپی هدر
curl -s https://example.com/product/123 | grep application/ld.jsonو بررسی JSON - [ ] اجرای همین خروجی در validator.schema.org
- [ ] تست در Rich Results Test برای دسته
Product - [ ] بررسی که قیمت با آنچه روی صفحه نمایش داده می‌شود یکی باشد
- [ ] تست نسخه موبایل که اسکیما در رندر اولیه حاضر است
- [ ] اجرای تست ساختاریافته روی ۵ محصول مختلف، نه فقط یکی
- [ ] پاک کردن کش و تست مجدد سرچ کنسول بعد از چند روز
بعد از فعال شدن چه اتفاقی می‌افتد؟
گزارش «بهبودی‌ها» در سرچ کنسول شروع می‌کند به پر شدن از خطاهای مربوط به اسکیما. لازم نیست همه را یکجا حل کنی. اول همان دسته خطایی را بگیر که بیشترین تعداد را دارد، معمولا قیمت و موجودی، بعد برو سراغ بقیه.
یادت باشد اسکیما رتبه را مستقیم جابه‌جا نمی‌کند. کارش این است که اطلاعاتت را دقیق منتقل کند تا گوگل با اطمینان بیشتری نمایشت دهد و کاربر با اطلاعات کامل‌تری کلیک کند.
سوالات متداول
Q: تفاوت JSON-LD با Microdata در چیست؟
JSON-LD در یک بلوک اسکریپت جدا قرار می‌گیرد و به HTML کد اضافه نمی‌کند؛ Microdata داخل تگ‌های HTML است و نگهداری‌اش سخت‌تر است. گوگل هر دو را می‌فهمد ولی JSON-LD تمیزتر است.
Q: آیا برای هر محصول باید اسکیمای جدا بنویسم؟
یک کامپوننت مشترک بنویس و با داده هر محصول صدایش بزن. نوشتن دستی برای هر صفحه، دردسر نگهداری دارد.
Q: امتیاز اسکیما روی رتبه تاثیر دارد؟
مستقیم نه. ولی نمایش قیمت و موجودی، نرخ کلیک را بالا می‌برد و همین برای رتبه مهم است.