SEO Hình Ảnh và Alt Text: Tối Ưu Đúng Từ Gốc

Một trang bán máy pha cà phê có ảnh chụp rất đẹp nhưng file mang tên IMG_8472.jpg, được đặt làm background CSS, nặng 4 MB và không có nội dung nào gần ảnh nói đó là model gì. Người dùng trên mạng chậm phải chờ, trình đọc màn hình không biết ảnh thể hiện gì, còn công cụ tìm kiếm nhận được rất ít ngữ cảnh.

SEO hình ảnh không phải việc điền từ khóa vào ô alt sau khi bài đã xuất bản. Nó là chuỗi quyết định từ chọn ảnh, đặt tên, xuất kích thước, viết nội dung xung quanh, nhúng bằng HTML, phân phối qua CDN đến khai báo trong sitemap. Làm đúng chuỗi này vừa giúp khả năng khám phá hình ảnh, vừa giữ trải nghiệm và tốc độ trang.

Google hiểu ảnh từ nhiều tín hiệu

Alt text quan trọng nhưng không đứng một mình. Công cụ tìm kiếm có thể dùng:

• Nội dung và heading của trang chứa ảnh.
• Đoạn văn, caption và tiêu đề nằm gần ảnh.
• Tên file và URL hình ảnh.
• Thuộc tính alt.
• Dữ liệu có cấu trúc và Open Graph.
• Liên kết tới ảnh hoặc trang chứa ảnh.
• Phân tích thị giác của chính tệp.

Vì vậy, ảnh “máy pha cà phê X200 đặt trên quầy bar” nên nằm trong trang thật sự nói về X200, gần đoạn mô tả thiết kế hoặc cách sử dụng. Đặt ảnh đó vào một gallery chung không có ngữ cảnh rồi viết alt dài không tạo cùng mức rõ ràng.

Dùng phần tử HTML mà crawler tìm được

Google Search Central khuyến nghị dùng phần tử <img> với URL trong thuộc tính src. Ảnh nền CSS phục vụ trang trí, nhưng không phải cách phù hợp để nhúng ảnh nội dung muốn được tìm thấy trong Google Images.

Ví dụ cơ bản:

<img
  src="/images/may-pha-ca-phe-x200-mau-den.webp"
  alt="Máy pha cà phê X200 màu đen đặt cạnh cối xay"
  width="1200"
  height="800"
>

Với ảnh responsive, có thể dùng srcset, sizes hoặc <picture>, nhưng phải giữ một img src hợp lệ làm phần tử chính. Kiểm tra source và HTML đã render để chắc URL không chỉ xuất hiện sau một tương tác khó xảy ra.

Ảnh dùng hoàn toàn để trang trí có thể nằm trong CSS. Đừng đưa mọi họa tiết, icon nền và đường kẻ vào image sitemap chỉ vì chúng là tệp hình.

Cách viết alt text theo mục đích của ảnh

Alt text giúp người không nhìn thấy ảnh hiểu thông tin hoặc chức năng mà ảnh đóng góp. Một công thức duy nhất không phù hợp với mọi loại.

Ảnh mang thông tin

Mô tả điều cần thiết để hiểu đoạn nội dung. Ví dụ:

alt="Biểu đồ organic click tăng từ 1.200 lên 1.850 sau ba tháng"

Nếu đoạn văn ngay sau đã trình bày đầy đủ mọi con số, alt có thể ngắn hơn để tránh bắt người dùng trình đọc màn hình nghe lặp.

Ảnh sản phẩm

Nêu sản phẩm và góc nhìn hoặc biến thể hữu ích:

alt="Mặt bên giày chạy bộ AirFlow màu xanh, đế cao su trắng"

Không cần lặp “mua giày chạy bộ giá rẻ chính hãng” trên mọi ảnh. Các ảnh trước, sau, chi tiết đế cần alt khác nhau vì chúng cung cấp thông tin khác nhau.

Ảnh chức năng

Khi ảnh là nút hoặc link, alt mô tả hành động hay đích:

<a href="/gio-hang">
  <img src="/icons/cart.svg" alt="Mở giỏ hàng">
</a>

Ảnh trang trí

Dùng alt="" để trình đọc màn hình bỏ qua:

<img src="/decor/divider.png" alt="">

Thiếu thuộc tính alt và alt rỗng không hoàn toàn giống nhau về accessibility. Alt rỗng là quyết định rõ rằng ảnh không mang thông tin.

Ảnh chứa chữ

Nếu có thể, hãy đưa chữ quan trọng ra HTML thật. Chữ nằm trong ảnh khó co giãn, khó dịch, khó truy cập và khó cập nhật. Logo là ngoại lệ quen thuộc; alt thường là tên tổ chức hoặc chức năng khi logo liên kết về trang chủ.

Những alt text trông tối ưu nhưng thực ra gây hại

Các lỗi thường thấy:

• Liệt kê từ khóa và địa danh không xuất hiện trong ảnh.
• Mọi ảnh sản phẩm dùng cùng một alt.
• Bắt đầu tất cả bằng “hình ảnh của” dù ngữ cảnh đã rõ.
• Viết một đoạn 200 chữ thay cho caption và nội dung.
• Dùng tên file làm alt tự động mà không làm sạch.
• Để AI mô tả vật thể nhưng bỏ qua mục đích của ảnh trong bài.

Một mô hình có thể nhận ra “người đứng cạnh bảng”, nhưng biên tập viên mới biết đó là ảnh minh họa quy trình audit hay chân dung diễn giả. Alt tốt cần cả nội dung thị giác lẫn vai trò trong ngữ cảnh.

Tên file và cấu trúc URL

Tên may-pha-ca-phe-x200-mau-den.webp cung cấp gợi ý nhẹ và dễ quản lý hơn DSC00991.webp. Quy tắc thực tế:

1. Ngắn nhưng đủ phân biệt.
2. Dùng từ mô tả thật, không nhồi danh sách từ khóa.
3. Dùng dấu gạch ngang để dễ đọc.
4. Giữ phần mở rộng đúng định dạng.
5. Không thay URL ảnh mỗi lần deploy nếu nội dung ảnh không đổi.

Với kho hàng nghìn ảnh, tạo tên từ mã sản phẩm, biến thể và góc chụp: x200-black-front.webp, x200-black-side.webp. Quy tắc nhất quán giúp DAM, CDN và đội nội dung tránh trùng file.

Nếu website đa ngôn ngữ dùng ảnh có chữ hoặc nội dung riêng từng thị trường, có thể bản địa hóa filename. Nếu cùng một ảnh không chứa nội dung ngôn ngữ được dùng ở nhiều locale, giữ một URL ổn định giúp cache tốt hơn; alt và caption vẫn được dịch theo trang.

Chọn định dạng và mức nén

Không có định dạng thắng mọi trường hợp:

• JPEG: phù hợp ảnh chụp, hỗ trợ rộng, không có alpha tốt.
• PNG: phù hợp ảnh cần trong suốt hoặc chi tiết nét, thường nặng với ảnh chụp.
• WebP: nén tốt cho nhiều loại ảnh, hỗ trợ rộng trên trình duyệt hiện đại.
• AVIF: thường cho file nhỏ ở chất lượng tương đương, nhưng thời gian encode và quy trình fallback cần cân nhắc.
• SVG: phù hợp logo, icon và đồ họa vector; phải xử lý an toàn nếu nhận file từ người dùng.

Xuất theo kích thước hiển thị thực. Không cần gửi ảnh 5000 px cho vùng rộng 600 px. Tuy nhiên, nên có biến thể mật độ cao cho màn hình sắc nét. Dùng pipeline tạo nhiều kích thước thay vì để trình duyệt tải ảnh gốc rồi thu nhỏ.

Nén không nên làm chữ, đường viền sản phẩm hoặc chi tiết quan trọng bị bệt. Kiểm tra bằng mắt trên vài loại màn hình, không chỉ nhìn phần trăm tiết kiệm.

Responsive images không chỉ để giảm dung lượng

srcset cho phép trình duyệt chọn tệp theo kích thước viewport và mật độ điểm ảnh:

<img
  src="/images/audit-dashboard-800.webp"
  srcset="/images/audit-dashboard-480.webp 480w,
          /images/audit-dashboard-800.webp 800w,
          /images/audit-dashboard-1280.webp 1280w"
  sizes="(max-width: 720px) 100vw, 720px"
  alt="Dashboard hiển thị lỗi SEO theo mức độ ưu tiên"
  width="1280"
  height="800"
>

sizes sai có thể khiến trình duyệt chọn file lớn không cần thiết. Hãy đo Network trên mobile và desktop, xem resource thực sự được tải thay vì chỉ kiểm tra HTML có srcset.

Giữ cùng một URL cho cùng một biến thể nội dung. Việc thêm query version thay đổi liên tục có thể làm cache kém và tạo nhiều địa chỉ ảnh trong log.

Width, height và CLS

Thuộc tính width và height giúp trình duyệt tính tỷ lệ trước khi ảnh tải. CSS vẫn có thể làm ảnh responsive:

img {
  max-width: 100%;
  height: auto;
}

Khi không dành sẵn không gian, nội dung phía dưới bị đẩy xuống lúc ảnh xuất hiện, góp phần làm tăng Cumulative Layout Shift. Với container crop, dùng aspect-ratio rõ ràng và object-fit phù hợp.

Bài tối ưu Core Web Vitals giải thích cách ảnh hero tác động LCP và kích thước không ổn định tác động CLS.

Lazy loading đúng chỗ

Lazy loading giúp trì hoãn ảnh ngoài viewport:

<img src="/images/step-8.webp" alt="..." loading="lazy">

Nhưng ảnh hero hoặc ảnh LCP ở màn hình đầu không nên bị trì hoãn tùy tiện. Với tài nguyên quan trọng, cần để trình duyệt khám phá sớm, có thể dùng fetchpriority="high" theo trường hợp và không giấu URL sau JavaScript.

Nguyên tắc:

• Eager load ảnh chính có khả năng là LCP.
• Lazy load gallery và ảnh sâu bên dưới.
• Không lazy load mọi thứ bằng một script nặng.
• Giữ placeholder đúng tỷ lệ.
• Kiểm tra trên mạng chậm và thiết bị thật.

Dùng Page Speed Checker để đo lại LCP, CLS và dung lượng sau khi thay pipeline ảnh.

Caption và nội dung xung quanh

Caption không bắt buộc cho mọi ảnh. Nó hữu ích khi cần giải thích nguồn, kết quả, thời điểm, nhân vật hoặc điều người đọc nên chú ý. Với biểu đồ, caption có thể ghi phạm vi dữ liệu; với ảnh before/after, ghi điều kiện so sánh.

Đặt ảnh gần đoạn liên quan. Một infographic “quy trình 6 bước” nằm cách heading tương ứng ba màn hình sẽ có ngữ cảnh kém và làm người đọc khó theo dõi.

Nếu ảnh chứa dữ liệu quan trọng, nội dung HTML nên tóm tắt kết luận. Accessibility và SEO đều không nên phụ thuộc hoàn toàn vào pixel.

Ảnh đại diện, Open Graph và structured data

Ảnh thumbnail trong kết quả tìm kiếm hoặc khi chia sẻ được chọn tự động từ nhiều tín hiệu. Website có thể nêu ảnh ưu tiên qua:

• og:image.
• Thuộc tính image trong Article, Product hoặc loại schema phù hợp.
• primaryImageOfPage.
• Ảnh nổi bật trong nội dung.

Chọn ảnh đại diện đúng chủ đề, độ phân giải tốt, tỷ lệ không quá cực đoan và crawl được. Tránh lấy logo chung cho mọi bài hoặc ảnh có quá nhiều chữ nhỏ. Dùng Social Preview Checker để kiểm tra cách link hiển thị khi chia sẻ.

Mọi URL ảnh trong structured data phải truy cập được. Nếu CDN chặn bot, yêu cầu cookie hoặc dùng URL hết hạn, markup đúng cú pháp vẫn không giúp hệ thống tải ảnh.

Image sitemap dùng lúc nào?

Image sitemap hữu ích khi ảnh khó được phát hiện qua HTML thông thường, được tải bằng ứng dụng phức tạp hoặc website có kho hình ảnh quan trọng. Có thể thêm thẻ image vào sitemap trang hiện có thay vì tạo hệ thống hoàn toàn tách rời.

Image sitemap không chữa được:

• Ảnh bị chặn.
• URL trả lỗi.
• Ảnh không liên quan trang.
• Tệp quá nhỏ hoặc chất lượng kém.
• Trang chứa ảnh noindex.

Nếu ảnh nằm trên CDN khác domain, xác minh domain đó trong Search Console để nhận thông tin crawl phù hợp. Dùng URL tuyệt đối, ổn định và đúng giao thức.

CDN, cache và quyền truy cập

CDN giảm độ trễ nhưng có thể tạo lỗi SEO khi:

• Hotlink protection chặn Googlebot hoặc referer rỗng.
• URL ký số hết hạn sau vài phút.
• Mỗi lần resize sinh URL không ổn định.
• Header trả sai MIME type.
• Cache trả 404 sau khi origin đã có file.
• robots.txt của CDN chặn thư mục ảnh.

Kiểm tra bằng request không cookie, từ nhiều user agent và vùng nếu có thể. Xem log CDN để biết bot có nhận 200, kích thước và content type đúng hay không.

Không đổi đường dẫn toàn bộ kho ảnh chỉ để chuyển từ JPEG sang WebP nếu không cần thiết. Có thể dùng content negotiation hoặc cập nhật có redirect và sitemap rõ ràng, nhưng hãy tính chi phí cache, backlink ảnh và crawl.

Audit ảnh theo template

Lấy mẫu từ homepage, bài blog, danh mục, sản phẩm, landing page và trang đa ngôn ngữ. Với mỗi template, kiểm tra:

1. Ảnh nội dung dùng img src hay background CSS?
2. Alt có tồn tại, đúng mục đích và khác nhau không?
3. Filename có mô tả, URL ổn định không?
4. Width và height có giữ chỗ không?
5. Ảnh nào là LCP, có bị lazy load không?
6. File tải thực tế lớn bao nhiêu trên mobile?
7. Caption và nội dung gần ảnh có đủ ngữ cảnh không?
8. URL ảnh có trả 200 và đúng MIME type không?
9. Ảnh đại diện có trong OG và schema không?
10. Sitemap có liệt kê ảnh chiến lược không?

Sau đó ưu tiên lỗi theo quy mô. Một component card thiếu alt trên 20.000 sản phẩm cần sửa ở template. Mười ảnh blog tên xấu có thể biên tập thủ công.

SEO Checker giúp rà các thuộc tính cơ bản của trang, còn SEO audit miễn phí hỗ trợ phát hiện lỗi lặp trước khi sửa component dùng chung.

Quy trình giao ảnh giữa các đội

SEO hình ảnh bền vững cần trách nhiệm rõ:

• Nhiếp ảnh/thiết kế: xuất file gốc sạch, đúng crop và quyền sử dụng.
• Nội dung: chọn ảnh, viết alt và caption theo ngữ cảnh.
• Frontend: triển khai img, responsive sources, kích thước và lazy loading.
• Backend/DAM: đặt tên, sinh biến thể, lưu metadata và URL ổn định.
• DevOps/CDN: cache, MIME type, quyền crawl và giám sát lỗi.
• SEO: định nghĩa trang chiến lược, sitemap, kiểm thử và đo hiệu suất.

Nếu alt text chỉ được thêm ở cuối bởi một người không biết ảnh dùng ở đâu, chất lượng khó đồng đều. CMS nên cho nhập alt theo từng lần sử dụng, vì cùng một ảnh có thể cần mô tả khác khi nằm trong những ngữ cảnh khác.

Đo kết quả

Theo dõi trước và sau theo nhóm trang:

• Click và impression trong Search Console, loại tìm kiếm Image.
• Lượt vào landing page từ Google Images.
• LCP, CLS và tổng byte ảnh.
• Tỷ lệ ảnh thiếu alt hoặc URL lỗi.
• Số ảnh chiến lược được crawl.
• Chuyển đổi của phiên bắt đầu từ hình ảnh.

Không kỳ vọng đổi alt hôm nay sẽ tăng traffic ngày mai. Hình ảnh cần được crawl và xử lý lại. Kết quả cũng phụ thuộc nhu cầu trực quan của truy vấn; một bài pháp lý có thể ít traffic ảnh hơn công thức nấu ăn dù triển khai hoàn hảo.

Kết luận

SEO hình ảnh tốt bắt đầu bằng một ảnh có ích, được đặt trong trang đúng ngữ cảnh và phân phối bằng HTML crawlable. Alt text mô tả vai trò của ảnh; filename, caption, schema và sitemap bổ sung tín hiệu; kích thước responsive, nén và loading giữ trải nghiệm nhanh, ổn định.

Đừng biến alt thành nơi chứa từ khóa, đừng gửi ảnh gốc khổng lồ cho màn hình nhỏ và đừng để ảnh chính chỉ tồn tại như CSS background. Khi nội dung, frontend và CDN cùng dùng một quy trình, hình ảnh có cơ hội được tìm thấy mà không đánh đổi accessibility hay Core Web Vitals.

Nguồn tham khảo: Google Search Central về SEO hình ảnh, hình ảnh responsive trên web.dev và W3C về alt text.