SEO hình ảnh
Tối ưu hình ảnh để Google hiểu và người dùng tải nhanh: thẻ img, alt, tên tệp, ngữ cảnh, định dạng và kích thước.
- Dùng thẻ img chuẩn và viết alt mô tả đúng nội dung ảnh.
- Đặt ảnh gần văn bản liên quan, tên tệp dễ hiểu.
- Tối ưu dung lượng, kích thước và lazy-load mà không làm hỏng LCP.
Hình ảnh có thể xuất hiện trong Google Hình ảnh và trong kết quả tìm kiếm chính. Google hiểu ảnh dựa trên chính ảnh, văn bản thay thế (alt), tên tệp, văn bản xung quanh và tiêu đề trang. Với Landing Page, ảnh thật về sản phẩm, xưởng, phòng nghỉ hay giao diện phần mềm vừa giúp chuyển đổi, vừa mang thông tin cho tìm kiếm.
Để Google tìm thấy ảnh
- Dùng thẻ <img src="…"> (hoặc picture). Google không lập chỉ mục ảnh nền khai báo bằng CSS background-image.
- Có thể khai báo ảnh trong sitemap (hoặc sitemap hình ảnh riêng) để giúp Google phát hiện.
- Định dạng được hỗ trợ: BMP, GIF, JPEG, PNG, WebP, SVG, AVIF.
- Lazy-load đúng cách: ảnh vẫn có trong HTML hoặc DOM sau khi render, không phụ thuộc thao tác người dùng.
Văn bản thay thế (alt) và ngữ cảnh
Alt tốt
- alt="Nhãn dệt logo màu trắng trên nền đen may ở cổ áo thun"
- alt="Phòng đôi homestay nhìn ra đồi thông, cửa kính lớn"
- Tên tệp: nhan-det-logo-co-ao.webp
Alt kém
- alt="ảnh" hoặc alt="IMG_2031"
- alt="nhãn mác, nhãn dệt, in nhãn, nhãn mác hà nội, nhãn giá rẻ"
- Tên tệp: 9f8a7b.jpg
Tối ưu hiệu năng ảnh
- Xuất ảnh đúng kích thước hiển thị, nén hợp lý; ưu tiên WebP/AVIF, giữ JPEG/PNG khi cần.
- Dùng srcset/sizes để trình duyệt chọn ảnh phù hợp màn hình điện thoại.
- Khai báo width và height (hoặc aspect-ratio) để tránh xô lệch bố cục (CLS).
- Lazy-load ảnh phía dưới màn hình đầu bằng loading="lazy"; không lazy-load ảnh hero — ảnh hero thường là phần tử LCP, có thể dùng fetchpriority="high".
Bài tập thực hành
Rà soát mọi ảnh trên Landing Page: đổi tên tệp dễ hiểu, viết lại alt, chuyển ảnh nền quan trọng sang thẻ img, nén và khai báo width/height.
Gợi ý: Trong DevTools, lọc tab Network theo Img để xem dung lượng từng ảnh; dùng Lighthouse để thấy gợi ý về ảnh.
- Ảnh mang nội dung đều dùng thẻ img và có alt mô tả.
- Ảnh trang trí có alt rỗng.
- Ảnh có width/height hoặc aspect-ratio.
- Ảnh hero không bị lazy-load; ảnh dưới màn hình đầu có loading="lazy".
- Mọi ảnh có quyền sử dụng rõ ràng.
Kiểm tra kiến thức
- Vì CSS làm chậm trang
- Vì Google không lập chỉ mục ảnh nền CSS
- Vì ảnh nền không hiển thị trên điện thoại
- Vì ảnh nền không nén được
Xem đáp án
B. Vì Google không lập chỉ mục ảnh nền CSS — Tài liệu image SEO của Google nói Google phân tích ảnh trong thẻ img; ảnh nền CSS không được lập chỉ mục.
- Có, luôn lazy-load mọi ảnh
- Không, ảnh hero thường là phần tử LCP nên cần tải sớm
- Chỉ trên máy tính
- Chỉ khi ảnh là PNG
Xem đáp án
B. Không, ảnh hero thường là phần tử LCP nên cần tải sớm — Lazy-load ảnh LCP làm trì hoãn hiển thị nội dung chính và làm xấu chỉ số LCP.