راهنمای جامع اسکیمای تصویر (ImageObject)؛ از صفر تا صد سئوی تصاویر با داده‌های ساختاریافته

راهنمای جامع اسکیمای تصویر (ImageObject)؛ از صفر تا صد سئوی تصاویر با دادههای ساختاریافته

تصویر فقط یک فایل گرافیکی نیست؛ یک «دارایی محتوایی» است که میتواند ترافیک ارگانیک مستقل بگیرد، در نتایج Google Images دیده شود و حتی به عنوان نتیجه غنی (Rich) به درک بهتر صفحه کمک کند. نشانهگذاری ساختاریافته تصویر با نوع ImageObject از واژگان Schema.org دقیقاً برای همین طراحی شده: به موتورهای جستوجو میگوید این عکس چیست، کجاست، به چه زبانی است و چه زمانی منتشر شده. نتیجه عملی؟ درک سریعتر و دقیقتر صفحه، زمینه بهتر برای ایندکس تصویر و شانس بالاتر برای نمایش مناسب در نتایج.

این راهنما همه چیزهایی را که برای پیادهسازی تمیز، امن و مقیاسپذیر اسکیمای تصویر لازم دارید پوشش میدهد: از انتخاب فیلدها و الگوهای کدنویسی تا خطاهای رایج، چک لیست انتشار، ارتباط با سایر مؤلفههای سئوی تصویر و نکات اجرایی در CMSها.

داده ساختاریافته به زبان ساده (و چرا JSON-LD)

سه روش رایج برای اضافهکردن اسکیمای ساختاریافته وجود دارد: Microdata ،RDFa و JSON-LD. هر سه معتبرند، اما JSON-LD عملاً استاندارد صنعتی شده چون:

• مستقل از DOM است و به هم ریختگی HTML را کم میکند.

• نگهداری و تغییرش سادهتر است (اسکریپت مستقل، جداسازی نگرانیها).

• با رندر سمتسرور و سمتکاربر بهتر کنار میآید.

در عمل، برای تصاویر تقریباً همیشه از یک بلوک <script type="application/ld+json"> استفاده میکنیم که در <head> یا انتهای <body> تزریق میشود.

کی و کجا ImageObject لازم است؟

همیشه لازم نیست برای هر عکس اسکیما بنویسید. تمرکز را بگذارید روی تصاویری که:

• یونیک و متعلق به شما هستند (اینفوگرافیک، عکاسی اختصاصی، رندرهای اختصاصی، خروجی هوش مصنوعی با مالکیت روشن).

• «بار معنایی» صفحه را حمل میکنند (مثلاً تصویر اصلی مقاله، نمودار کلیدی، عکس محصول).

• قرار است در نتایج جستوجو یا Google Images نقش جدی ایفا کنند.

برای تصاویر استوک تکراری یا عکسهایی که فقط تزئینیاند، معمولاً اسکیما ارزش افزودهٔ ملموسی ندارد.

حداقل الزامی برای ImageObject (الگوی تمیز و مینیمال)

الگوی زیر برای اکثر سناریوهای وبلاگی/محتوایی کفایت میکند. همین را مبنا بگیرید و در صورت نیاز توسعه دهید.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://example.com/media/hero.webp",
  "url": "https://example.com/post-1",
  "name": "عنوان دقیق و کوتاه تصویر",
  "description": "توضیح مرتبط با محتوا و کاربرد تصویر",
  "inLanguage": "fa-IR",
  "datePublished": "2025-08-30"
}

توضیح فیلدها

• contentUrl: نشانی مستقیم فایل تصویر را قرار دهید.

• URL: آدرس صفحهای که تصویر در آن قرار دارد.

• name: نام/عنوان تصویر؛ همراستا با محتوای عکس (مشابه متن آلت).

• description: توضیح کوتاه و مرتبط درباره تصویر.

• inLanguage: برای سایت فارسی «fa-IR» بماند؛ در غیر اینصورت با زبان سایت تنظیم شود.

• datePublished: تاریخ انتشار/آپلود تصویر به میلادی (فرمت ISO-8601). قرار دهید.

نکته: اگر سایت شما بهروزرسانی تصویر را جدا از متن انجام میدهد، dateModified هم میتواند معنیدار باشد؛ ولی برای اکثر سناریوها همان datePublished کفایت میکند.

کجا اسکیما را تزریق کنیم؟ ملاحظات CMSها

• وردپرس: اسنیپت را در قالب (header.php) یا از طریق افزونه مدیریت اسکیما/هد تزریق کنید.

• Next.js/React: از رندر سمتسرور (SSR) یا next/head برای تزریق استفاده کنید تا محتوای JSON-LD در HTML اولیه باشد.

• GTM (Google Tag Manager): قابل انجام است، اما توصیه کلی این است که دادههای ساختاریافته را تا حد امکان SSR کنید تا از تأخیرهای لود جلوگیری شود.

توسعه منطقی ImageObject (اختیاریهای پرتأثیر)

برای مالکیت، نسبتدادن و نمایش صحیح در برخی سرویسها، افزودن فیلدهای زیر مفید است. همه اختیاریاند، اما کیفیت متادیتا را بالا میبرند:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://example.com/media/chart.webp",
  "url": "https://example.com/insight-2025",
  "name": "نمودار روند هزینهٔ جذب مشتری",
  "description": "این تصویر روند CAC طی ۱۲ ماه گذشته را نشان میدهد.",
  "inLanguage": "fa-IR",
  "datePublished": "2025-08-30",

  "uploadDate": "2025-08-30",
  "fileFormat": "image/webp",
  "width": 1280,
  "height": 720,
  "caption": "CAC در ۱۲ ماه اخیر",
  "thumbnailUrl": "https://example.com/media/chart-thumb.jpg",
  "creator": {
    "@type": "Organization",
    "name": "Example Media Lab"
  },
  "creditText": "© Example Media Lab",
  "license": "https://example.com/license"
}

کاربردها:

• uploadDate: در داراییهای رسانهای شفافتر از datePublished است.

• fileFormat ،width ،height: به فهم کیفیت/نسبت تصویر کمک میکند.

• caption: کپشن کوتاه.

• thumbnailUrl: پیشنمایش بهینه.

• creator ،creditText ،license: نسبتدادن و حقوق استفاده را روشن میکند (برای برنامه «Licensable Images» هم مفید است).

اگر فقط میخواهید «حداقل» را رعایت کنید، همین بخش اختیاریها را کنار بگذارید و به الگوی مینیمال بسنده کنید.

چند تصویر در یک صفحه: الگوهای کدنویسی

وقتی صفحه چند تصویر کلیدی دارد، دو رویکرد رایج است:

رویکرد A) یک اسکریپت JSON-LD شامل آرایهای از ImageObjectها

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "ImageObject",
      "@id": "https://example.com/media/inf-1#image",
      "contentUrl": "https://example.com/media/inf-1.webp",
      "url": "https://example.com/post-1",
      "name": "اینفوگرافیک روند کلی",
      "description": "اینفوگرافیک خلاصهٔ مقاله.",
      "inLanguage": "fa-IR",
      "datePublished": "2025-08-30"
    },
    {
      "@type": "ImageObject",
      "@id": "https://example.com/media/fig-2#image",
      "contentUrl": "https://example.com/media/fig-2.webp",
      "url": "https://example.com/post-1",
      "name": "نمودار جزئیات بخش دوم",
      "description": "جزئیات عملکرد کانالها.",
      "inLanguage": "fa-IR",
      "datePublished": "2025-08-30"
    }
  ]
}

رویکرد B) چند اسکریپت جداگانه (هر تصویر، یک بلوک)

از نظر اعتبارسنجی هم معتبر است و گاهی خوانش انسانی را سادهتر میکند. در وبسایتهای بزرگ، رویکرد A معمولاً مدیریتپذیرتر است.

نکته عملی: برای هر ImageObject یک شناسه پایدار (@id) بدهید تا در گزارشهای سرچ کنسول، عیبیابی راحتتر شود.

پیوند دادن ImageObject با سایر انواع اسکیما (Article ،Product ،Organization)

گاهی بهتر است رابطه «تصویر ↔ نوع اصلی محتوا» را هم آشکار کنید:

مقاله وبلاگی و تصویر اصلی

در Article میتوانید در فیلد image هم URL ساده بگذارید و هم یک ImageObject. رویکرد تمیز: هم Article داشته باشید، هم ImageObjectهای مستقل، و با @id به هم ارجاع دهید.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "@id": "https://example.com/post-1#article",
  "headline": "گزارش روند CAC در ۲۰۲۵",
  "image": [
    "https://example.com/media/hero.webp"
  ],
  "mainEntityOfPage": "https://example.com/post-1",
  "datePublished": "2025-08-30",
  "inLanguage": "fa-IR"
}


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "@id": "https://example.com/media/hero#image",
  "contentUrl": "https://example.com/media/hero.webp",
  "url": "https://example.com/post-1",
  "name": "کاور مقاله: روند CAC",
  "description": "کاور مقاله دربارهٔ CAC.",
  "inLanguage": "fa-IR",
  "datePublished": "2025-08-30"
}

محصول و تصاویر گالری

در Product فیلد image وجود دارد. باز هم میتوانید به ImageObjectها لینک دهید تا متادیتای دقیقتری ارائه کنید (ابعاد، لایسنس، کپشن…).

لوگوی برند

برای Organization فیلد logo معمولاً یک ImageObject یا URL است. اگر لوگو را هم دقیقاً توصیف کنید (ابعاد، فایلفرمت)، به نمایش تمیز در سرویسهای مختلف کمک میکند.

رابطه اسکیما با سایر مؤلفههای سئوی تصویر

اسکیما بهتنهایی معجزه نمیکند؛ باید با سایر اصول سئوی تصویر همراستا باشد:

نامگذاری فایلها

hero-customer-acquisition-cost-2025.webp
chart-cac-by-channel-2024-2025.webp

نام فایل توصیفی و به زبان محتوای صفحه باشد (برای فارسی میتوانید لاتین معنادار یا ترنسلیت پایدار استفاده کنید؛ از رشتههای بیمعنی پرهیز کنید).

ویژگیهای HTML تصویر

• alt: جایگزین متنی کوتاه و دقیق.

• width و height: به مرورگر برای محاسبهٔ فضای اشغالشده کمک میکنند.

• loading="lazy": برای تصاویر پایین صفحه (نه لزوماً تصویر اصلی).

• srcset و sizes: ریسپانسیو واقعی، مخصوصاً در موبایل.

• فرمتها: WebP یا AVIF برای وزن کم؛ اگر سازگاری اهمیت دارد، fallback JPEG/WebP در نظر بگیرید.

ویژگیهای HTML تصویر

مکان و اندازه تصویر اصلی

تصویر اصلی مقاله را در بالای محتوا بگذارید، با ابعاد کافی (مثلاً عرض حداقل ~۱۲۰۰ پیکسل برای کاورهای وبلاگی) تا در نتایج و اشتراکگذاریها کیفیت مطلوب داشته باشد.

فنیات دسترسی و خزش

• فایل تصویر روی دامنه/زیردامنهای باشد که با robots.txt بلوکه نشده.

• هدرهای کش (Cache-Control) منطقی تنظیم شوند.

• از ریدایرکتهای زنجیرهای برای تصویر پرهیز کنید.

• CDN سازگار و سریع کمک میکند، اما URL پایدار و قابل ایندکس ضروریتر است.

مالکیت، نسبتدادن و مجوز استفاده (Licensable Images)

اگر میخواهید تصاویر شما با نشان «قابل اخذ مجوز» و اطلاعات مالکیت در سرویسهای تصویری دیده شوند:

• creator/author، creditText و license را در ImageObject پر کنید.

• صفحه لایسنس روشن باشد (شرایط استفاده ساده و قابل خواندن).

• در صورت وجود صفحه دریافت مجوز، URL آن را پایدار نگه دارید.

اعتبارسنجی، مانیتورینگ و گزارشگیری

پس از انتشار، این چرخه را اجرا کنید:

1. Rich Results Test یا ابزارهای معادل برای اعتبارسنجی JSON-LD.

2. URL Inspection در سرچ کنسول برای بررسی ایندکس صفحه.

3. گزارشهای Search Console: خطاها/هشدارهای داده ساختاریافته را دورهای چک کنید.

4. Analytics: سشنهایی که از Google Images میآیند را جداگانه تحلیل کنید (سگمنت سفارشی).

عیبیابی سریع: اگر صفحه ایندکس شده اما تصویر نه، معمولاً یکی از اینها رخ داده: URL محتوای تصویر در دسترس خزنده نیست، تصویر خیلی کوچک/بیکیفیت است، یا صفحه مرجع سیگنالهای کافی ندارد.

خطاهای رایج که باید از آنها دوری کنید

• افزودن اسکیما به تصاویر استوک یا تکراری؛ ارزش افزودهی کمی دارد.

• استفاده از URL نسبی یا لینک شکسته در contentUrl.

• «کیوردچپانی» در name/description. طبیعی و توصیفی بنویسید.

• عدم تطابق inLanguage با زبان صفحه.

• عدم همخوانی تاریخها (مثلاً datePublished بعد از تاریخ انتشار واقعی).

• تزریق JSON-LD فقط از سمتکاربر (CSR) بهطوری که HTML اولیه خالی باشد و دیر برسد.

چکلیست اجرایی قبل از انتشار

• تصاویر کلیدی را انتخاب و مالکیتشان را قطعی کنید.

• نام فایل، فرمت، ابعاد و فشردهسازی را بهینه کنید.

• برای هر تصویر کلیدی یک ImageObject بسازید (حداقل فیلدهای بخش ۳).

• در صورت نیاز، اختیاریهای بخش ۵ را اضافه کنید (creator ،license، …).

• اگر صفحه Article/Product دارد، اتصال منطقی با @id را برقرار کنید.

• اعتبارسنجی با Rich Results Test.

• انتشار و سپس مانیتورینگ در سرچ کنسول.

الگوی پیادهسازی در مقیاس (دهها/صدها تصویر)

• Template-driven: الگوهای JSON-LD را در لایه قالب/کامپوننتها بسازید.

• ID پایدار: برای هر تصویر یک @id استاندارد از روی URL تولید کنید (/media/foo.webp#image).

• Data source واحد: ابعاد، فرمت، کپشن و… را از یک منبع داده (CMS/DB) فراخوانی کنید تا خطای انسانی کم شود.

• QA خودکار: پیش از دیپلوی، یک اسکریپت اعتبارسنجی ساختاریافته (lint) روی خروجی HTML اجرا کنید.

سناریوهای نمونه

مقاله تحلیلی با یک کاور و یک نمودار

• Article با image (URL کاور).

• دو ImageObject: یکی برای کاور، یکی برای نمودارِ داخل متن.

• هر دو با url برابر URL صفحه و inLanguage = fa-IR.

• کاور حداقل ۱۲۰۰px عرض، نمودار با نسبت ۱۶:۹ و متن خوانا.

صفحه محصول با گالری ۴ تایی

• Product با آرایه image و جزئیات قیمت/برند.

• برای هر تصویر کلیدی یک ImageObject با caption و license.

• اگر یکی «تصویر اصلی» است، در UI هم این را رعایت کنید و ابعاد کافی بگذارید.

اینفوگرافیک قابل اشتراکگذاری

• ImageObject با name کوتاه و description زمینهساز.

• license و creditText مشخص.

• thumbnailUrl برای پیشنمایش سریع در شبکههای اجتماعی مفید است (هرچند شبکهها از Open Graph هم استفاده میکنند).

نمونه نهایی تمیز (جمعبندی عملی)

این نمونه، حداقلها را رعایت میکند و برای انتشار عمومی قابل اتکاست:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://example.com/media/marketing-funnel-2025.webp",
  "url": "https://example.com/marketing-funnel-2025",
  "name": "نمودار قیف بازاریابی در سال ۲۰۲۵",
  "description": "این تصویر مراحل قیف بازاریابی و نرخ تبدیل هر مرحله را نشان میدهد.",
  "inLanguage": "fa-IR",
  "datePublished": "2025-08-30"
}

اگر به متادیتای مالکیت و جزئیات فنی نیاز دارید، نسخه توسعهیافته را در بخش ۵ ببینید.

چکلیست «عکس یونیک»

برای اینکه با خیال راحت روی تصویر سرمایهگذاری سئویی کنید:

• تصویر را خودتان تولید کردهاید یا مجوز روشن دارید.

• اندازه و کیفیت نمایش برای وب مناسب است.

• متن داخل تصویر (اگر هست) خواناست و فشردهسازی افراطی نشده.

• نام فایل، آلتتکست، کپشن، name و description در یک روایت مشترک حرکت میکنند.

• صفحه محتوا واقعاً درباره همان چیزی است که تصویر نشان میدهد (عدم گپ معنایی).

فرآیند پیشنهادی تیمی (Content Ops + Dev + SEO)

1. Content Ops: انتخاب تصاویر کلیدی، تولید یا سفارش به گرافیک، تدوین کپشن و توضیح.

2. SEO: تعریف نام فایل، آلت، name/description اسکیمایی، انتخاب فیلدهای اختیاری.

3. Dev: تزریق JSON-LD (ترجیحاً SSR)، تنظیم ابعاد/فرمت، سازوکار srcset.

4. QA: اعتبارسنجی ساختاریافته، تست لود، تست موبایل.

5. Release & Monitor: انتشار، ایندکس، مانیتورینگ سرچ کنسول و آنالیتیکس.

ضدالگوها (Anti-Patterns)

• کپی-پیست یک اسنیپت برای چند تصویر و فقط تعویض contentUrl. سایر فیلدها هم باید متناظر باشند.

• توصیفهای بیش از حد عمومی («تصویر مقاله»)؛ اطلاعات عملی و متمایز بدهید.

• بهروزرسانی تصویر بدون بهروزرسانی تاریخ یا توضیح مرتبط.

• استفاده از تصاویر با واترمارک آزاردهنده یا ناخوانا (تجربه کاربر و ایندکسپذیری را خراب میکند).

الگوی آماده: اسنیپت مینیمال و تمیز ImageObject برای استقرار سریع

اسکیمای تصویر (ImageObject) ابزاری سبک اما اثرگذار است که با کمترین تغییر در UI، بیشترین سیگنال معنایی را به موتورهای جستوجو منتقل میکند. برای بیشترین بازده:

• روی تصاویر یونیک و محوری تمرکز کنید.

• حداقلهای اسکیمای بخش ۳ را ثابت و بیخطا نگه دارید.

• در صورت نیاز، اختیاریهای مالکیت/نسبتدادن را اضافه کنید.

• پیادهسازی را SSR انجام دهید و پیش از انتشار اعتبارسنجی کنید.

• پس از انتشار، گزارشها را بسنجید و بهروزرسانیهای محتوا/تصویر را در اسکیمای متناظر منعکس کنید.

تهیه شده توسط تیم تخصصی سئو سید احسان خسروی (مدیر، متخصص و مشاور استراتژیک سئو)