Mỗi ảnh trên website đều có thể mang theo một đoạn văn ngắn ẩn bên trong mà người xem thường không thấy, nhưng Google và phần mềm hỗ trợ người khiếm thị đọc rất kỹ để hiểu ảnh nói về điều gì. Đó là alt text. Khi thiếu nó, ảnh của bạn trở nên vô nghĩa với cả công cụ tìm kiếm lẫn người dùng khiếm thị, dù ảnh có đẹp đến đâu.
Alt text là gì
Alt text (alternative text, hay “văn bản thay thế”) là đoạn mô tả ngắn gắn vào thuộc tính alt của thẻ <img> trong HTML. Về mặt kỹ thuật, nó trông như thế này:
<img src="banh-mi-viet-nam.jpg" alt="Ổ bánh mì Việt Nam giòn tan, nhân thịt nguội và dưa chuột trên nền gỗ" width="800" height="533">Đoạn text trong dấu ngoặc kép sau alt= chính là alt text. Người xem trang bình thường không nhìn thấy nó vì trình duyệt đã hiển thị ảnh thay thế. Nhưng khi ảnh không tải được, trình duyệt hiển thị đoạn text đó thay vào vị trí ảnh.
Alt text không phải là mới. Chuẩn HTML đã yêu cầu thuộc tính này từ những ngày đầu của web, với mục đích ban đầu là hỗ trợ người dùng có kết nối chậm thời kỳ dial-up. Ngày nay nó đảm nhận thêm hai vai trò quan trọng: hỗ trợ người khiếm thị và giúp Google hiểu ảnh.
Vì sao Google cần alt text
Thuật toán của Google cực kỳ giỏi đọc và hiểu văn bản. Nhưng với hình ảnh, câu chuyện khác hẳn. Dù Google đã phát triển khả năng nhận dạng ảnh (Google Lens là ví dụ điển hình), đối với hàng tỷ trang web cần lập chỉ mục mỗi ngày, họ vẫn phụ thuộc rất nhiều vào văn bản đi kèm ảnh để hiểu ngữ cảnh.
Cụ thể, tài liệu của Google Search Central giải thích rằng Google dùng alt text kết hợp với thuật toán thị giác máy tính và nội dung trang xung quanh để hiểu chủ đề của ảnh. Alt text là tín hiệu văn bản quan trọng nhất trong ba nguồn đó.
Ngoài Google, còn hai nhóm người dùng khác phụ thuộc vào alt text:
- Người khiếm thị: Phần mềm đọc màn hình (screen reader) đọc to alt text để mô tả ảnh cho người nghe. Một alt text tốt là sự khác biệt giữa “hiểu nội dung” và “nghe một ký tự trống”.
- Người kết nối chậm: Khi ảnh chưa tải xong hoặc người dùng tắt tải ảnh để tiết kiệm data, alt text hiện ra thay thế để trang vẫn truyền đạt được thông tin.
Alt text là gì trong bối cảnh SEO
Về mặt SEO, alt text ảnh hưởng theo hai hướng. Hướng thứ nhất là Google Images: ảnh có alt text đúng và mô tả trung thực có khả năng xuất hiện cao hơn khi người dùng tìm kiếm hình ảnh. Với nhiều ngành như bán lẻ, nội thất, thời trang, ẩm thực, lượng truy cập từ Google Images không nhỏ.
Hướng thứ hai là xếp hạng trang: alt text giúp Google hiểu nội dung trang toàn diện hơn, gộp cả văn bản lẫn hình ảnh. Đây không phải yếu tố xếp hạng chủ đạo, nhưng khi nội dung văn bản và hình ảnh cùng nhất quán chỉ về một chủ đề, tín hiệu E-E-A-T (chuyên môn, kinh nghiệm, thẩm quyền, tin cậy) của trang sẽ mạnh hơn.
Điều cần tránh là nhồi từ khóa vào alt text. Viết alt="thiết kế website thiết kế web web đẹp thiết kế chuyên nghiệp" không những không giúp ích gì mà còn là tín hiệu spam với Google.
Cách viết alt text đúng, kèm ví dụ so sánh
Quy tắc cơ bản là: mô tả trung thực những gì trong ảnh, đặt trong ngữ cảnh bài viết, không nhồi từ khóa. Dưới đây là các ví dụ đối chiếu:
| Ảnh | Alt text kém | Alt text tốt | Vì sao tốt hơn |
|---|---|---|---|
| Ảnh giày sneaker trắng | giày | Giày sneaker nam màu trắng đế dày, phong cách streetwear | Mô tả đủ màu sắc, kiểu dáng, đối tượng |
| Logo công ty | logo.png | Logo Web22, công ty thiết kế website tại Việt Nam | Gọi tên đúng thương hiệu, có ngữ cảnh |
| Đồ thị doanh thu tăng | biểu đồ | Biểu đồ doanh thu quý 1 tăng 40% so với cùng kỳ năm ngoái | Nêu kết luận chính, không liệt kê từng số |
| Ảnh trang trí nền | banner đẹp | alt=”” (để trống) | Ảnh trang trí không thêm thông tin, để trống là đúng |
| Nút Facebook dẫn sang trang | Trang Facebook của Web22 | Khi ảnh là link, mô tả đích đến, không mô tả ảnh |
Chú ý ảnh trang trí: không phải bỏ hẳn thuộc tính alt mà là viết alt="" (giá trị trống). Nếu bỏ hẳn thuộc tính, một số trình đọc màn hình sẽ đọc tên file thay thế, ví dụ như “F-o-x-t-e-r-r-i-e-r-1-9-0-0-0-4-1-9-d-o-t-j-p-g”, rất khó chịu với người khiếm thị.
Bốn loại ảnh và quy tắc alt text khác nhau
Không phải mọi ảnh đều viết alt text theo cùng một cách. Có bốn tình huống chính:
Ảnh mang thông tin (sản phẩm, con người, địa điểm, quy trình): mô tả trung thực nội dung, kèm ngữ cảnh quan trọng. Đây là trường hợp phổ biến nhất và cần chú ý nhất.
Ảnh làm link (nút bấm dạng ảnh, icon mạng xã hội, banner dẫn sang trang khác): alt text phải mô tả đích đến, không mô tả ảnh. Khi ảnh là link, Google dùng alt text như anchor text của link đó. Viết “Đến trang dịch vụ SEO của Web22” tốt hơn nhiều so với mô tả ảnh là “mũi tên xanh chỉ sang phải”.
Ảnh chứa chữ (banner có text, infographic, slide trình chiếu): phải viết lại toàn bộ chữ trong ảnh vào alt text. Google không đọc được chữ nhúng trong file ảnh, nên nếu không có alt text, nội dung đó bị mất hoàn toàn với cả Google lẫn người khiếm thị.
Ảnh trang trí (đường kẻ trang trí, hình nền mang tính thẩm mỹ, icon chỉ là điểm nhấn màu sắc): dùng alt="" (trống). Không cần mô tả những ảnh không thêm thông tin gì vào nội dung.
Công cụ kiểm tra alt text trên website
Có vài cách để kiểm tra alt text trên trang của bạn mà không cần chỉnh sửa code:
Chrome DevTools: Nhấn F12 (hoặc chuột phải, chọn Kiểm tra), vào tab Elements, tìm thẻ <img> và xem thuộc tính alt. Cách này phù hợp để kiểm tra từng ảnh cụ thể.
Screaming Frog SEO Spider (miễn phí giới hạn 500 URL): có cột riêng báo ảnh thiếu alt text hoặc alt text quá ngắn hay quá dài. Phù hợp để kiểm tra hàng loạt khi website có nhiều trang.
Rank Math hoặc Yoast SEO trong WordPress: cảnh báo ngay trong giao diện soạn thảo khi ảnh nổi bật (featured image) của bài viết chưa có alt text. Đây là tín hiệu nhắc nhở tốt trong quy trình xuất bản.
Người không rành kỹ thuật cần làm gì với alt text
Nếu bạn dùng WordPress, không cần đụng vào code HTML. Mỗi khi upload ảnh vào thư viện, WordPress có ô “Văn bản thay thế” (Alternative Text). Điền vào ô đó là xong. Với ảnh đã upload từ trước mà chưa có alt text, vào Thư viện Media, bấm vào ảnh và điền vào ô đó.
Nguyên tắc thực tế để không phải suy nghĩ nhiều: mỗi khi nhìn vào một ảnh cần điền alt text, hãy tự hỏi “Nếu ảnh này không hiện ra, tôi cần giải thích gì cho người đọc để họ vẫn hiểu trang muốn nói gì?” Câu trả lời đó chính là alt text bạn cần.
Nếu muốn tìm hiểu thêm về các chỉ dẫn khác giúp Google hiểu và lập chỉ mục trang web của bạn đúng cách, bài noindex là gì giải thích một công cụ bổ sung, lần này không phải để Google hiểu ảnh, mà để báo cho Google biết khi nào không cần lập chỉ mục một trang cụ thể.
Câu hỏi thường gặp về alt text
Alt text và title ảnh có giống nhau không?
Không. Alt text (thuộc tính alt) là văn bản thay thế hiện khi ảnh không tải được và được đọc bởi screen reader. Title ảnh (thuộc tính title) là tooltip hiện khi di chuột vào ảnh, có ít giá trị SEO hơn và không liên quan đến trợ năng. Nên ưu tiên viết alt text đúng trước, title ảnh là tùy chọn.
Ảnh không có alt text có bị phạt không?
Google không phạt trực tiếp, nhưng ảnh đó sẽ khó xuất hiện trong Google Images, và trang mất đi một tín hiệu giúp Google hiểu nội dung. Với người dùng khiếm thị thì thiếu alt text là rào cản tiếp cận thực sự, không chỉ là vấn đề SEO.
Nên viết alt text bằng tiếng Việt hay tiếng Anh?
Viết theo ngôn ngữ của trang. Nếu trang tiếng Việt phục vụ người dùng Việt, alt text tiếng Việt giúp cả screen reader đọc đúng lẫn Google hiểu đúng ngữ cảnh. Không cần viết hai ngôn ngữ trong cùng một alt text.
Ảnh nền CSS có cần alt text không?
Không. Ảnh đặt qua CSS background-image không có thuộc tính alt và cũng không được đọc bởi screen reader. Đó là lý do ảnh trang trí nên đặt qua CSS thay vì thẻ <img>. Nếu ảnh nền mang nội dung quan trọng, nên dùng thẻ <img> với alt text thay vì CSS background.
Khi website của bạn đã có alt text đúng cho từng ảnh, bước tiếp theo là đảm bảo Google lập chỉ mục đúng các trang bạn muốn. Web22 cung cấp dịch vụ SEO bao gồm kiểm tra toàn diện các yếu tố kỹ thuật như alt text, cấu trúc heading, tốc độ tải trang và nhiều hơn nữa, với báo cáo cụ thể từng hạng mục cần xử lý.