Product Image SEO

Product Image SEO là gì?

Product Image SEO (tối ưu ảnh sản phẩm cho công cụ tìm kiếm) là tập hợp các kỹ thuật kỹ thuật nhằm giúp ảnh sản phẩm trên website thương mại điện tử được Google và các công cụ tìm kiếm khác hiểu, lập chỉ mục và hiển thị đúng trong kết quả tìm kiếm — đặc biệt là trong Tìm kiếm Hình ảnh. Đây không chỉ là việc chèn ảnh đẹp, mà là cách bạn giao tiếp với máy tìm kiếm qua tên tệp, thẻ alt, kích thước, định dạng và cách tải ảnh.

Tại sao quan trọng trong SEO?

Ảnh sản phẩm chiếm tới 60–80% trải nghiệm người dùng trên trang danh mục và chi tiết sản phẩm. Nếu tối ưu sai, chúng gây chậm trang, làm giảm tỷ lệ chuyển đổi và khiến sản phẩm 'biến mất' khỏi Tìm kiếm Hình ảnh — một kênh traffic miễn phí, có tính mua cao. Theo báo cáo của Ahrefs (2023), 22% lượt tìm kiếm hình ảnh dẫn đến hành động mua hàng trực tiếp hoặc so sánh giá. Ngoài ra, Google sử dụng ảnh để xác minh nội dung trang: nếu ảnh không có thẻ alt mô tả rõ ràng, thuật toán khó xác định sản phẩm đang bán là gì — dẫn đến xếp hạng thấp hơn dù nội dung văn bản đầy đủ.

Cách hoạt động

Google thu thập ảnh qua trình thu thập (crawling) như với văn bản, nhưng dựa vào ba yếu tố chính: (1) Tên tệp ảnh (file name), (2) Thẻ <img alt="">, và (3) Ngữ cảnh xung quanh (tiêu đề trang, tiêu đề H2, văn bản gần ảnh). Sau đó, hệ thống phân tích nội dung hình ảnh bằng AI (Google Vision AI), đối chiếu với dữ liệu từ thẻ alt và tên tệp để xác nhận chủ đề. Nếu cả ba yếu tố nhất quán — ví dụ: tên tệp ao-thun-nu-mau-den.jpg, thẻ alt Áo thun nữ màu đen cổ tròn, chất liệu cotton mềm mại, và tiêu đề trang là Áo thun nữ thời trang – Mua online giá tốt — thì khả năng xuất hiện trong tìm kiếm hình ảnh tăng đáng kể.

Hướng dẫn thực hiện

Dưới đây là quy trình chuẩn, áp dụng được cho đa số nền tảng (Shopify, WooCommerce, Shopee Mall, Sendo Store):

1. Tên file ảnh: Dùng dấu gạch ngang (-), viết thường, không dấu, mô tả ngắn gọn sản phẩm + thuộc tính nổi bật. Ví dụ: giay-the-thao-nam-mau-xanh-42.jpg — không dùng IMG_12345.jpg hay giày-the-thao-1.jpg.
2. Thẻ alt: Viết ngắn gọn (dưới 125 ký tự), có chủ ngữ – vị ngữ rõ ràng, chứa từ khóa chính + 1–2 từ khóa phụ. Tránh nhét từ khóa, không dùng “ảnh sản phẩm”, “hình ảnh”. Ví dụ tốt: Giày thể thao nam màu xanh dương, đế cao su chống trượt, size 42.
3. Kích thước ảnh: Không cố định một kích thước duy nhất. Tối ưu theo vị trí: ảnh chính (hero) nên dưới 1200px chiều rộng; ảnh thumbnail dưới 300px; ảnh zoom cần độ phân giải cao hơn (tối đa 2000px chiều dài), nhưng phải nén. Tốc độ tải ảnh chậm hơn 3 giây làm tăng tỷ lệ thoát lên 32% (Google Core Web Vitals).
4. Định dạng ảnh: Dùng WebP cho mọi ảnh (trừ khi cần hỗ trợ IE11 — lúc đó dùng fallback JPEG/PNG). WebP giảm dung lượng trung bình 25–35% so với JPEG cùng chất lượng. Với ảnh có nền trong suốt: WebP hoặc PNG-8 (không dùng PNG-24 nếu không cần độ trong suốt cao).
5. Lazy loading: Bật loading="lazy" cho mọi thẻ <img> nằm ngoài vùng nhìn ban đầu. Không áp dụng cho ảnh đầu trang (above-the-fold) — vì có thể gây delay hiển thị ảnh chính. Kiểm tra bằng Lighthouse: điểm Offscreen Images phải đạt 100%.

Lỗi thường gặp

• Ảnh không có thẻ alt hoặc alt rỗng: Google không thể hiểu ảnh là gì → ảnh không xuất hiện trong tìm kiếm hình ảnh. Cách khắc phục: Dùng công cụ kiểm tra (Screaming Frog, Sitebulb) để quét toàn bộ ảnh thiếu alt, sau đó bổ sung thủ công hoặc tự động qua plugin (WooCommerce Alt Text Generator).
• Tên file chung chung hoặc có ký tự đặc biệt: product-12345.jpg, ảnh#sp.jpg → ảnh không được lập chỉ mục đúng. Cách khắc phục: Đổi tên file trước khi upload; nếu đã đăng, dùng redirect 301 từ tên cũ sang tên mới và cập nhật thẻ src trong HTML.
• Ảnh quá nặng (trên 1MB) hoặc chưa nén: Làm chậm tốc độ trang, ảnh hưởng Core Web Vitals. Cách khắc phục: Dùng Squoosh.app hoặc ShortPixel để nén batch; thiết lập auto-compress trên CDN (Cloudflare Polish, Bunny Optimizer).
• Thiếu srcset và sizes cho ảnh responsive: Gây tải ảnh thừa trên mobile → tăng băng thông, giảm điểm LCP. Cách khắc phục: Dùng thẻ <picture> hoặc thuộc tính srcset với ít nhất 2 phiên bản (mobile: 600w, desktop: 1200w).

Ví dụ thực tế

Một cửa hàng thời trang Việt Nam bán áo sơ mi nam đã áp dụng Product Image SEO toàn diện:

• Trước: tên file shirt001.jpg, alt = áo sơ mi, ảnh 2,1MB, định dạng JPEG, không lazy load.
• Sau: tên file ao-so-mi-nam-voi-ca-lung-xanh-dam.jpg, alt = Áo sơ mi nam vải cotton lụa, cổ đứng, màu xanh đậm, form ôm vừa, ảnh WebP 320KB, lazy load bật, srcset hỗ trợ 3 kích thước.

Kết quả sau 8 tuần: lưu lượng từ Tìm kiếm Hình ảnh tăng 147%, thời gian tải trang giảm từ 4,2s xuống còn 1,8s, tỷ lệ thoát giảm 21%. Ảnh xuất hiện ở vị trí #1–3 cho từ khóa áo sơ mi nam xanh đậm trong Google Images.

Câu hỏi thường gặp

Thẻ alt có cần trùng với tiêu đề sản phẩm không?

Không bắt buộc. Thẻ alt nên mô tả chính xác nội dung ảnh, còn tiêu đề sản phẩm hướng đến từ khóa và trải nghiệm người dùng. Ví dụ: tiêu đề có thể là Áo sơ mi nam cao cấp – Freeship toàn quốc, nhưng alt vẫn là Áo sơ mi nam vải cotton lụa, cổ đứng, màu xanh đậm, form ôm vừa. Hai phần này bổ trợ nhau, không cần giống nhau.

Có nên dùng SVG cho ảnh sản phẩm?

Không. SVG chỉ phù hợp với biểu tượng, logo, icon — vì là vector, không thể hiện chi tiết texture, màu sắc thực tế của sản phẩm. Ảnh sản phẩm luôn cần raster (WebP/JPEG/PNG) để đảm bảo độ chân thực. Việc ép SVG cho ảnh chụp thực tế sẽ gây méo hình, mất chi tiết và không được Google ưu tiên.

Ảnh 360 độ hay ảnh zoom có cần tối ưu riêng?

Có. Ảnh zoom cần thẻ alt riêng (ví dụ: Chi tiết đường may áo sơ mi nam – mặt trong cổ áo) và nên có width/height khai báo rõ để tránh layout shift. Ảnh 360 độ thường dùng thư viện JavaScript (như Three.js), nên cần thêm noscript fallback với ảnh tĩnh có alt đầy đủ — vì Googlebot không chạy JS phức tạp để render ảnh xoay.

Yếu tố	Tốt	Xấu	Ghi chú
Tên file	mu-bao-ho-nu-mau-hong.jpg	IMG_9876.jpg	Không chứa từ khóa, không mô tả
Thẻ alt	Mũ bảo hộ nữ màu hồng, vành rộng, chống nắng UPF50+	mũ bảo hộ	Thiếu thuộc tính, quá ngắn, không phân biệt giới tính/màu
Định dạng	WebP (chất lượng 80)	JPEG (chưa nén)	WebP hỗ trợ cả lossy và lossless, ưu tiên lossy 75–85
Lazy loading	<img loading="lazy" ...>	Không có thuộc tính loading	Bắt buộc với ảnh ngoài viewport; tùy trường hợp với ảnh đầu trang