ImageObject Schema and Alt Text for AI: Optimizing Images So AI Understands and Cites Them

Images account for 50-70% of page bandwidth — but most Vietnamese websites treat images as "decoration" rather than structured data sources. AI search is increasingly able to read images, but clear alt text and ImageObject schema remain the most reliable ways to ensure AI correctly understands your image content.

How AI processes images

ImageObject schema inside Article

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Hướng dẫn JSON-LD cho người mới bắt đầu",
  "image": [
    {
      "@type": "ImageObject",
      "url": "https://example.vn/images/json-ld-guide-1200x630.jpg",
      "contentUrl": "https://example.vn/images/json-ld-guide-1200x630.jpg",
      "thumbnailUrl": "https://example.vn/images/json-ld-guide-400x210.jpg",
      "width": 1200,
      "height": 630,
      "caption": "Sơ đồ cấu trúc JSON-LD cho Article schema với các trường bắt buộc và tùy chọn",
      "author": {
        "@type": "Organization",
        "name": "AEO Saigon"
      },
      "license": "https://creativecommons.org/licenses/by/4.0/",
      "acquireLicensePage": "https://example.vn/license"
    },
    {
      "@type": "ImageObject",
      "url": "https://example.vn/images/json-ld-result-1200x630.jpg",
      "width": 1200,
      "height": 630,
      "caption": "Screenshot kết quả Rich Results Test sau khi triển khai Article schema"
    }
  ]
}

ImageObject inside Product schema

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Áo Polo Nam Cotton Premium",
  "image": [
    {
      "@type": "ImageObject",
      "url": "https://shop.example.vn/images/ao-polo-nam-navy-front.jpg",
      "contentUrl": "https://shop.example.vn/images/ao-polo-nam-navy-front.jpg",
      "width": 1200,
      "height": 1200,
      "caption": "Áo polo nam màu navy nhìn từ phía trước — cotton 100% dệt pique"
    },
    {
      "@type": "ImageObject",
      "url": "https://shop.example.vn/images/ao-polo-nam-navy-back.jpg",
      "width": 1200,
      "height": 1200,
      "caption": "Áo polo nam màu navy nhìn từ phía sau — cổ bẻ 3 nút"
    },
    {
      "@type": "ImageObject",
      "url": "https://shop.example.vn/images/ao-polo-nam-navy-detail.jpg",
      "width": 800,
      "height": 800,
      "caption": "Chi tiết chất vải cotton pique 220GSM, đường may phẳng"
    }
  ]
}

Next.js: alt text and automatic ImageObject

// components/blog/ArticleImage.tsx
import Image from "next/image";

interface ArticleImageProps {
  src: string;
  alt: string;
  caption?: string;
  width: number;
  height: number;
  priority?: boolean;
}

export function ArticleImage({
  src,
  alt,
  caption,
  width,
  height,
  priority = false,
}: ArticleImageProps) {
  return (
    <figure className="my-8">
      <Image
        src={src}
        alt={alt}
        width={width}
        height={height}
        priority={priority}
        className="rounded-lg w-full h-auto"
      />
      {caption && (
        <figcaption className="mt-2 text-sm text-center text-muted-foreground">
          {caption}
        </figcaption>
      )}
    </figure>
  );
}

// Hàm generate ImageObject từ danh sách ảnh
export function generateImageObjects(
  images: Array<{ url: string; width: number; height: number; caption?: string }>
) {
  return images.map((img) => ({
    "@type": "ImageObject",
    url: img.url,
    contentUrl: img.url,
    width: img.width,
    height: img.height,
    ...(img.caption && { caption: img.caption }),
  }));
}

Image optimization checklist for AI

• Each image has alt text describing its actual content (no keyword stuffing)
• Alt text 10-120 characters, a complete sentence, not starting with "Image of"
• Meaningful file names: kebab-case, not IMG_0042.jpg
• ImageObject schema in Article/Product with url, width, height, caption
• Featured image: 1200x630px (OG), 1200x1200px (Product square)
• figcaption for infographics and information-dense images
• Stable image URLs — don't change after publishing
• AI-generated images: clearly note in caption and alt text
• Multiple product angles = multiple ImageObjects in the image array
• Text version of infographic (table/list) below the image so AI can read the data

Properly optimized images not only help AI understand your content better — they also improve accessibility (screen readers), increase traffic from Google Image Search, and serve as an E-E-A-T signal when images have clear author and license information.

Frequently asked questions