Tối ưu hóa SEO hình ảnh thương mại điện tử (WebP/AVIF, cấu trúc Alt Text, Image Sitemap) thu hút truy cập từ Google Images

Chiến lược định dạng ảnh thế hệ mới (WebP, AVIF) và phân phối đa kích thước chuẩn Core Web Vitals

Trên trang danh mục và trang chi tiết sản phẩm, hình ảnh thường chiếm tới 70% – 85% tổng dung lượng tải trang và chính là phần tử quyết định chỉ số hiển thị nội dung lớn (Largest Contentful Paint - LCP) trong bộ tiêu chuẩn Core Web Vitals. Việc giữ nguyên định dạng JPEG hoặc PNG truyền thống khiến dung lượng mỗi bức ảnh góc rộng lên tới 500KB – 1.2MB, làm chậm tốc độ tải trên mạng di động và kéo tụt thứ hạng tìm kiếm. Chuyển đổi quy trình xử lý ảnh sang định dạng WebP hoặc AVIF giúp giảm từ 35% đến hơn 50% dung lượng tệp mà mắt thường không nhận thấy sự suy giảm độ sắc nét của bề mặt chất liệu sản phẩm.

Tuy nhiên, một nỗi lo thường trực của các kỹ sư khi áp dụng định dạng AVIF hoặc cấu hình mạng phân phối nội dung (CDN) tự động đổi định dạng theo trình duyệt là khả năng thu thập của Googlebot-Image. Để hệ thống tìm kiếm luôn đọc và lập chỉ mục hình ảnh ổn định, máy chủ cần cấu hình thẻ picture hoặc thuộc tính srcset chuẩn HTML5, hoặc kiểm soát đường dẫn ảnh luôn trả về định dạng hợp lệ kèm tiêu đề HTTP Content-Type chính xác ngay cả khi trình thu thập dữ liệu không gửi đầy đủ chuỗi Accept nâng cao. Đồng thời, mọi thẻ img bắt buộc phải khai báo tường minh hai thuộc tính chiều rộng (width) và chiều cao (height) để trình duyệt giữ chỗ sẵn, triệt tiêu hoàn toàn hiện tượng nhảy bố cục (CLS = 0).

Đối với bức ảnh đại diện chính của sản phẩm (Hero Product Image) nằm ngay vùng nhìn đầu tiên trên màn hình, hệ thống tuyệt đối không được áp dụng kỹ thuật tải trễ (Lazy Loading). Việc gắn thuộc tính loading=lazy cho ảnh đầu trang sẽ buộc trình duyệt phải chờ tải xong cấu trúc tài liệu rồi mới bắt đầu tải ảnh, làm chỉ số LCP bị phạt nặng. Ngược lại, bức ảnh đầu tiên phải được gắn thuộc tính loading=eager kết hợp fetchpriority=high để ưu tiên băng thông tải ngay lập tức, trong khi toàn bộ ảnh góc chụp phụ và ảnh sản phẩm liên quan bên dưới mới áp dụng loading=lazy.

• Sử dụng định dạng AVIF hoặc WebP làm chuẩn phân phối chính, giữ mức dung lượng ảnh đại diện danh mục dưới 45KB và ảnh phóng to chi tiết sản phẩm dưới 120KB.
• Triển khai thuộc tính srcset và sizes để trình duyệt điện thoại tự động tải bản ảnh rộng 480px – 640px thay vì phải tải bức ảnh gốc 1600px dành cho màn hình máy tính.
• Cấu hình fetchpriority=high và tắt Lazy Load cho bức ảnh sản phẩm chính đầu trang và 4 bức ảnh dòng đầu tiên trên lưới danh mục ngành hàng.
• Duy trì tỷ lệ khung hình nhất quán (ví dụ 1:1 hoặc 4:5) kèm thuộc tính width và height cố định trong mã HTML để bảo vệ điểm số ổn định bố cục (CLS).

Vuốt ngang để xem đủ bảng →

Khắc phục bẫy ẩn ảnh trong băng chuyền (Carousel Trap) và kỹ thuật Lazy Loading thân thiện với Googlebot

Trên trang chi tiết sản phẩm, để tiết kiệm diện tích hiển thị, các nhà phát triển thường gom từ 6 đến 12 bức ảnh góc chụp khác nhau cùng ảnh biến thể màu sắc vào một băng chuyền trượt (Image Carousel/Slider). Rủi ro kỹ thuật nghiêm trọng xảy ra khi thư viện trình diễn ảnh chỉ tạo thẻ img trong cấu trúc DOM tại thời điểm người dùng thực sự bấm mũi tên chuyển ảnh hoặc bấm chọn nút màu sắc bằng sự kiện JavaScript (onClick). Vì Googlebot không thực hiện hành vi bấm chuột tuần tự vào từng nút chuyển cảnh như người thật, toàn bộ các bức ảnh góc nghiêng, ảnh chụp tem nhãn và ảnh màu sắc phụ sẽ hoàn toàn vô hình trước bộ máy thu thập dữ liệu.

Để giải cứu kho ảnh sản phẩm khỏi bẫy băng chuyền, toàn bộ danh sách thẻ img của các góc chụp phải tồn tại sẵn trong mã nguồn HTML trả về từ máy chủ ngay từ lần tải đầu tiên, chỉ ẩn tạm thời các khung hình chưa tới lượt bằng thuộc tính CSS và kích hoạt tải trễ chuẩn xác. Khi sử dụng kỹ thuật tải trễ (Lazy Loading), hãy ưu tiên dùng thuộc tính gốc của trình duyệt là loading=lazy đặt trực tiếp trên thẻ img với đường dẫn ảnh thật nằm ở thuộc tính src và srcset, thay vì dùng các thư viện cũ giấu đường dẫn thật trong thuộc tính data-src rồi chờ cuộn trang mới chép sang src.

Ngoài ra, thuật toán xếp hạng hình ảnh hiện đại của Google còn đánh giá rất cao ngữ cảnh văn bản bao quanh bức ảnh (Surrounding Text Context) và tiêu đề trang chứa ảnh đó. Khi nhúng ảnh thực tế vào phần mô tả chi tiết sản phẩm hoặc bài viết đánh giá, việc bọc bức ảnh trong thẻ ngữ nghĩa figure kèm theo dòng chú thích cụ thể trong thẻ figcaption ngay bên dưới sẽ tạo ra tín hiệu liên kết ngữ nghĩa cực mạnh, giúp công cụ tìm kiếm tự tin xếp hạng bức ảnh cho các truy vấn chuyên sâu về đặc tính kỹ thuật của mặt hàng.

• Kết xuất sẵn toàn bộ danh sách thẻ img của bộ sưu tập sản phẩm trong cây DOM HTML ban đầu thay vì chỉ khởi tạo thẻ ảnh động khi có sự kiện bấm chuột.
• Sử dụng thuộc tính chuẩn loading=lazy của HTML5 với đường dẫn ảnh thật trong src/srcset; tuyệt đối tránh để src trỏ vào một ảnh rỗng 1x1 pixel dùng chung trên toàn website.
• Bọc các bức ảnh minh họa tính năng quan trọng trong cặp thẻ figure và figcaption để bổ sung chú thích ngữ cảnh trực quan ngay dưới chân ảnh.
• Kiểm tra thực tế bằng công cụ Kiểm tra URL (URL Inspection) trong Google Search Console ở tab Xem trang đã thu thập để xác nhận mọi thẻ img trong băng chuyền đều có mặt đầy đủ trong HTML đã dựng.