Google 圖片如何索引圖片：CSS 背景、錯誤延遲載入與 img 標籤審核

Developer thường tối ưu ảnh theo hướng hiệu năng: nén, lazy load, chuyển sang ảnh nền cho dễ căn chỉnh. Một số lựa chọn trong đó làm ảnh biến mất khỏi Google Hình ảnh mà không ai để ý. Bài này đi qua những gì tài liệu Google Search Central nói về cách Google tìm và hiểu ảnh, và một script audit thẻ img trên trang.

Google tìm ảnh ở đâu

Google tìm ảnh trong thuộc tính src của thẻ <img>, kể cả khi thẻ đó nằm trong <picture>. Ảnh đặt bằng CSS background-image thì Google không lập chỉ mục. Đây là lỗi hay gặp ở theme bán hàng: ảnh sản phẩm trong lưới danh mục được render bằng div có ảnh nền để dễ cắt khung.

<!-- Google không lập chỉ mục ảnh này -->
<div class="thumb" style="background-image:url(ao-thun-den.webp)"></div>

<!-- Dùng img với object-fit để có cùng hiệu ứng cắt khung -->
<img src="ao-thun-den.webp" alt="Áo thun nam cổ tròn màu đen, mặt trước"
     width="600" height="600" style="object-fit:cover" loading="lazy">

object-fit: cover cho kết quả hiển thị gần như giống ảnh nền, mà ảnh vẫn nằm trong img có alt.

Google hiểu ảnh bằng gì

Theo hướng dẫn SEO cho Google Hình ảnh: văn bản thay thế (alt) cùng thuật toán thị giác máy tính và nội dung trang; thông tin từ chú thích và tiêu đề trang; còn tên file chỉ là "gợi ý rất nhẹ". Hệ quả cho cấu trúc HTML: dùng figure và figcaption để chú thích gắn rõ với ảnh, và đặt ảnh gần đoạn chữ liên quan thay vì gom hết vào một gallery cuối trang.

<figure>
  <img src="yoast-o-seo-title-va-meta.webp"
       alt="Ô SEO title và meta description trong Yoast SEO trên WordPress">
  <figcaption>Thanh xanh cho biết title và mô tả nằm trong giới hạn hiển thị.</figcaption>
</figure>

Script audit ảnh trên một trang

import re
from bs4 import BeautifulSoup

DUOI_HOP_LE = {"bmp", "gif", "jpg", "jpeg", "png", "webp", "svg", "avif"}
TEN_CHUNG = re.compile(r"^(img|image|dsc|screenshot|pic|anh|hinh)[-_ ]?\d*", re.I)

def audit_anh(html: str) -> list:
    soup = BeautifulSoup(html, "html.parser")
    loi = []
    for el in soup.select("[style*=background-image]"):
        loi.append(f"Ảnh nền CSS (không được lập chỉ mục): {el.get('class')}")
    for img in soup.find_all("img"):
        src = img.get("src") or ""
        ten = src.rsplit("/", 1)[-1].split("?")[0]
        if not src or src.startswith("data:"):
            loi.append(f"img không có src thật (lazy load?): {img.get('data-src') or img}")
            continue
        if img.get("alt") is None:
            loi.append(f"Thiếu thuộc tính alt: {ten}")
        if TEN_CHUNG.match(ten):
            loi.append(f"Tên file chung chung: {ten}")
        duoi = ten.rsplit(".", 1)[-1].lower() if "." in ten else ""
        if duoi and duoi not in DUOI_HOP_LE:
            loi.append(f"Định dạng lạ: {ten}")
    return loi

Kiểm tra src rỗng hoặc data: bắt một lỗi lazy load phổ biến: thư viện cũ để ảnh thật trong data-src và chỉ gán vào src khi cuộn tới. Nếu Google không render tới bước đó, ảnh không có src thật. Thuộc tính loading="lazy" gốc của trình duyệt không gặp vấn đề này, và WordPress đã tự thêm nó cho ảnh trong nội dung.

Định dạng và kích thước

Google hỗ trợ BMP, GIF, JPEG, PNG, WebP, SVG và AVIF, và đuôi file phải khớp với loại ảnh. WordPress tự sinh nhiều kích thước và khai báo srcset, nên phần cần làm thủ công là cắt ảnh về đúng kích thước hiển thị trước khi tải lên. Với ảnh đại diện, Google khuyên rộng ít nhất 1200 pixel cho Discover.

Phần dành cho người viết nội dung, gồm vai trò của 4 ô alt, title, caption, description trong WordPress và ví dụ metadata theo ngành, có trong bài Tối ưu hình ảnh chuẩn SEO trên Onic.vn.

Bài gốc: https://onic.vn/kien-thuc/toi-uu-hinh-anh-chuan-seo/