文章目录
Hình ảnh chiếm 50-70% băng thông trang web — nhưng hầu hết website Việt Nam xử lý ảnh như "trang trí" thay vì nguồn dữ liệu có cấu trúc. AI search ngày càng đọc được ảnh, nhưng alt text rõ ràng và ImageObject schema vẫn là cách đáng tin cậy nhất để đảm bảo AI hiểu đúng nội dung ảnh của bạn.
Cách AI xử lý hình ảnh
| Nguồn dữ liệu | AI có thể đọc? | Độ tin cậy | Ghi chú |
|---|---|---|---|
Alt text (alt="") | ✅ Luôn | Rất cao | Bắt buộc cho AEO |
| Caption (figcaption) | ✅ Luôn | Cao | Nên có cho ảnh quan trọng |
| Surrounding text | ✅ Luôn | Trung bình | AI dùng để hiểu ngữ cảnh |
| ImageObject schema | ✅ Luôn | Cao | Cho metadata đầy đủ |
| File name ảnh | ✅ Luôn | Thấp | Tín hiệu phụ |
| Nội dung pixel ảnh | ⚠️ Tuỳ model | Thấp-Trung | Không đáng tin hoàn toàn |
ImageObject schema trong 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 trong 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 và ImageObject tự động
// 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 }),
}));
}
Checklist tối ưu ảnh cho AI
- Mỗi ảnh có alt text mô tả nội dung thực (không keyword stuffing)
- Alt text 10-120 ký tự, câu hoàn chỉnh, không bắt đầu bằng "Hình ảnh"
- File name có ý nghĩa: kebab-case, không phải IMG_0042.jpg
- ImageObject schema trong Article/Product với url, width, height, caption
- Featured image: 1200×630px (OG), 1200×1200px (Product square)
- figcaption cho infographic và ảnh có nhiều thông tin
- URL ảnh stable — không thay đổi sau khi publish
- Ảnh AI-generated: ghi rõ trong caption và alt text
- Nhiều góc sản phẩm = nhiều ImageObject trong mảng image
- Text version của infographic (table/list) phía dưới để AI đọc được data
Ảnh được tối ưu đúng cách không chỉ giúp AI hiểu content tốt hơn — mà còn cải thiện accessibility (screen reader), tăng traffic từ Google Image Search, và là tín hiệu E-E-A-T khi ảnh có author và license rõ ràng.
常见问题
AI đọc hình ảnh như thế nào khi crawl website?
AI crawlers đọc hình ảnh qua 3 nguồn: (1) Alt text của thẻ img — quan trọng nhất, là mô tả text của ảnh, (2) Surrounding text (caption, tiêu đề gần ảnh, đoạn văn xung quanh) — AI dùng để hiểu ngữ cảnh, (3) ImageObject schema trong JSON-LD — cho phép khai báo metadata đầy đủ (tên, mô tả, author, license, dimensions). Nhiều AI models hiện tại đã có vision capability và có thể 'nhìn' ảnh — nhưng alt text và ImageObject vẫn là dữ liệu đáng tin cậy hơn vì không phụ thuộc vào model version. Thiếu alt text = AI phải đoán nội dung ảnh = thông tin không chính xác.
Alt text nên viết như thế nào cho AEO?
Alt text tốt cho AEO: mô tả nội dung thực của ảnh (không phải keyword nhồi nhét), 10-120 ký tự, có ngữ cảnh. Ví dụ tệ: 'schema.org json-ld seo'. Ví dụ tốt: 'JSON-LD code snippet cho Product schema với priceRange và aggregateRating'. Với ảnh sản phẩm: '[Tên sản phẩm] — [màu/kiểu] — [đặc điểm nổi bật]'. Với infographic: 'Infographic: [tiêu đề infographic] — [số liệu hoặc insight chính]'. Với ảnh thực tế: mô tả người, hành động, địa điểm. Không lặp lại alt text giống nhau cho nhiều ảnh.
ImageObject schema giúp ích gì so với chỉ có alt text?
ImageObject schema cho phép khai báo thêm: author (ai chụp/tạo ảnh — quan trọng cho E-E-A-T), license (quyền sử dụng), contentUrl vs thumbnailUrl (URL ảnh gốc và thumbnail khác nhau), width/height (dimensions), dateCreated, caption (mô tả đầy đủ hơn alt text). Với Google Image Search: ImageObject giúp ảnh xuất hiện với thông tin tác giả và license. Với AI: caption trong ImageObject có thể dài hơn alt text — mô tả 1-3 câu — và được AI dùng để hiểu ngữ cảnh ảnh. Quan trọng: contentUrl phải là URL ảnh thực (không phải trang chứa ảnh).
Ảnh sản phẩm e-commerce cần tối ưu như thế nào?
Ảnh sản phẩm e-commerce: (1) Alt text = '[Tên sản phẩm] [màu sắc/kích thước] [đặc điểm nổi bật]' — ví dụ 'Áo polo nam màu navy size L cotton 100%', (2) ImageObject schema trong Product schema — Google hiển thị ảnh sản phẩm trong Shopping rich results, (3) Nhiều góc chụp = nhiều ImageObject trong mảng image của Product, (4) Ảnh phải đạt chuẩn: nền trắng hoặc neutral, độ phân giải 1200×1200px tối thiểu, tỷ lệ 1:1 cho thumbnail, (5) File name có ý nghĩa: 'ao-polo-nam-navy-size-l.jpg' thay vì 'IMG_0042.jpg'. Google Shopping và AI cùng dùng tất cả những điểm này.
Infographic và diagram có cần schema riêng không?
Có — nhưng không phải ImageObject thuần túy. Infographic thường là ảnh mang thông tin mà AI không thể đọc được nếu chỉ nhìn ảnh. Giải pháp: (1) Alt text mô tả insight chính của infographic (không mô tả hình ảnh), (2) Phía dưới infographic có text version của data (table hoặc bullet list) — AI đọc được text, (3) Caption mô tả nguồn dữ liệu và ngày cập nhật, (4) Nếu infographic có nhiều dữ liệu số: cân nhắc dùng Dataset schema kết hợp. Mục tiêu: AI có thể trích dẫn thông tin từ infographic qua text version, không phải chỉ link đến ảnh.
AEO Saigon
位于胡志明市的答案引擎优化(AEO)机构 — 帮助企业网站被 AI 引用。 关于 AEO Saigon →
想让您的网站也这样被 AI 引用吗?
免费审计