Alt Text
Thuộc tính HTML (alt) mô tả nội dung hình ảnh, hỗ trợ SEO hình ảnh và khả năng tiếp cận (accessibility).
Alt Text là gì?
Alt Text (tên đầy đủ: alternative text) là thuộc tính HTML alt được thêm vào thẻ <img> để mô tả ngắn gọn nội dung hoặc chức năng của hình ảnh. Đây không phải là chú thích hiển thị trên giao diện người dùng, mà là văn bản thay thế — xuất hiện khi hình ảnh không tải được, hoặc được đọc bởi phần mềm đọc màn hình dành cho người khiếm thị.
Ví dụ: <img src="ban-do-ha-noi.jpg" alt="Bản đồ đường phố Hà Nội với các quận trung tâm được đánh dấu">.
Tại sao quan trọng trong SEO?
Alt Text đóng vai trò kép: hỗ trợ khả năng tiếp cận (accessibility) và tối ưu hóa công cụ tìm kiếm. Google và các công cụ tìm kiếm khác không "nhìn thấy" hình ảnh như con người — chúng dựa vào văn bản xung quanh và đặc biệt là alt để hiểu chủ đề, ngữ cảnh và mức độ liên quan của ảnh đến từ khóa mục tiêu.
Theo tài liệu chính thức của Google (cập nhật tháng 3/2024), Alt Text là một trong những tín hiệu xếp hạng hình ảnh mạnh nhất trong Tìm kiếm Hình ảnh. Ngoài ra, ảnh có alt rõ ràng có tỷ lệ xuất hiện cao hơn trong kết quả tìm kiếm hình ảnh — điều này gián tiếp tăng lưu lượng truy cập không trực tiếp (organic traffic) cho website.
Đối với người dùng, alt text cải thiện trải nghiệm khi mạng chậm, trình duyệt tắt hình, hoặc khi dùng thiết bị hỗ trợ — góp phần nâng cao chỉ số UX (trải nghiệm người dùng), một yếu tố gián tiếp ảnh hưởng đến SEO tổng thể.
Cách hoạt động
Khi công cụ tìm kiếm thu thập dữ liệu (crawling), bot sẽ phân tích thẻ <img> và trích xuất giá trị của thuộc tính alt. Giá trị này được so sánh với từ khóa tìm kiếm, nội dung trang, tiêu đề, và các yếu tố ngữ nghĩa khác để xác định mức độ phù hợp.
Phần mềm đọc màn hình (ví dụ: NVDA, VoiceOver, JAWS) cũng đọc nội dung alt theo thứ tự DOM — vì vậy thứ tự đặt ảnh trong mã nguồn và chất lượng alt đều ảnh hưởng đến cách người khuyết tật tiếp nhận thông tin.
Lưu ý: Thuộc tính alt KHÔNG được dùng để nhồi nhét từ khóa. Google xử phạt nội dung giả mạo hoặc không liên quan — ví dụ: alt="giày nam giá rẻ mua ngay khuyến mãi hot nhất 2024" cho ảnh logo công ty.
Hướng dẫn thực hiện
- Xác định mục đích ảnh: Hỏi: Ảnh này có truyền tải thông tin? Hay chỉ mang tính trang trí? Nếu là trang trí (ví dụ: đường viền, icon thuần biểu tượng không mang nghĩa), để
alt=""(rỗng — không bỏ trống thuộc tính). - Mô tả ngắn gọn, đúng trọng tâm: Dùng dưới 125 ký tự (giới hạn an toàn cho phần mềm đọc màn hình). Tập trung vào đối tượng, hành động, bối cảnh — không cần mở đầu bằng "hình ảnh về…" hay "ảnh chụp…".
- Thêm từ khóa một cách tự nhiên: Chỉ chèn từ khóa nếu nó phản ánh đúng nội dung ảnh. Ví dụ: ảnh sản phẩm giày chạy bộ →
alt="giày chạy bộ nam nhẹ chống sốc Asics Gel-Nimbus 26". - Không dùng dấu câu thừa: Tránh dấu chấm cuối câu (phần mềm đọc màn hình thường ngắt nghỉ tự động). Không dùng dấu phẩy dài, ngoặc đơn hoặc ký tự đặc biệt trừ khi bắt buộc.
- Kiểm tra sau khi triển khai: Dùng công cụ kiểm tra khả năng tiếp cận như WAVE (wave.webaim.org) hoặc Lighthouse trong Chrome DevTools để xác minh alt đã tồn tại và không bị trùng lặp/trống sai cách.
Lỗi thường gặp
- Để trống thuộc tính alt nhưng không ghi
alt="": Khiến phần mềm đọc màn hình đọc tên file ảnh (ví dụ:IMG_20240512_1430.jpg) — gây khó hiểu. Cách khắc phục: Luôn điềnalt=""cho ảnh trang trí. - Dùng alt giống nhau cho nhiều ảnh khác nhau: Ví dụ tất cả ảnh sản phẩm đều có
alt="sản phẩm chất lượng cao". Cách khắc phục: Viết riêng cho từng ảnh, nêu rõ tên, màu, kích thước, đặc điểm nổi bật. - Nhồi nhét từ khóa: Như
alt="seo website, dịch vụ seo, học seo online, công ty seo uy tín"cho ảnh banner. Cách khắc phục: Viết lại theo nguyên tắc: mô tả + từ khóa chính (nếu phù hợp), tối đa 1–2 lần. - Bỏ qua ảnh trong bài viết: Nhiều CMS tự động không sinh alt khi upload — dẫn đến hàng loạt ảnh thiếu alt. Cách khắc phục: Thiết lập quy trình kiểm tra trước khi đăng bài; dùng plugin kiểm tra hàng loạt (ví dụ: Yoast SEO hoặc Rank Math với tính năng audit ảnh).
Ví dụ thực tế
| Loại ảnh | Alt Text tốt | Alt Text sai | Lý do |
|---|---|---|---|
| Ảnh sản phẩm giày thể thao | giày chạy bộ nam Asics Gel-Cumulus 25 màu xanh dương |
sản phẩm bán chạy |
Thiếu thông tin cụ thể, không giúp người dùng hoặc máy hiểu ảnh |
| Ảnh minh họa biểu đồ tăng trưởng doanh thu | biểu đồ cột thể hiện doanh thu quý 1–4/2023 tăng 22% so với 2022 |
biểu đồ đẹp |
Không cung cấp dữ liệu, không hỗ trợ người khiếm thị nắm bắt xu hướng |
| Icon Facebook (dùng làm nút chia sẻ) | chia sẻ lên Facebook |
facebook logo |
Người dùng cần biết chức năng, không cần biết tên thương hiệu |
| Ảnh nền trang chủ (không chứa thông tin) | "" (rỗng) |
bức ảnh nền đẹp mắt |
Ảnh trang trí không cần mô tả — để rỗng giúp phần mềm đọc màn hình bỏ qua |
Câu hỏi thường gặp
Alt Text có ảnh hưởng đến xếp hạng trang web tổng thể không?
Không trực tiếp, nhưng có ảnh hưởng gián tiếp. Ảnh có alt tốt giúp tăng lượt click từ Tìm kiếm Hình ảnh, kéo dài thời gian ở trang (dwell time), giảm tỷ lệ thoát — những tín hiệu UX mà Google sử dụng trong thuật toán xếp hạng tổng thể. Tuy nhiên, việc thiếu alt trên vài ảnh không khiến trang bị phạt.
Có nên dùng dấu gạch ngang (-) hoặc dấu gạch dưới (_) trong alt?
Nên dùng dấu gạch ngang (-) để phân cách từ nếu cần (ví dụ: may-tinh-xach-tay-dell). Dấu gạch dưới (_) thường bị đọc thành "underscore", gây nhiễu. Tốt nhất là dùng khoảng trắng — nhưng lưu ý: một số hệ thống quản lý nội dung tự chuyển khoảng trắng thành dấu gạch ngang khi xuất URL, nên kiểm tra thực tế.
Alt Text có cần dịch sang tiếng Anh nếu website đa ngôn ngữ?
Có. Alt Text phải khớp với ngôn ngữ của trang hiện tại. Nếu trang tiếng Việt, alt phải tiếng Việt; trang tiếng Anh, alt phải tiếng Anh. Việc dùng alt tiếng Anh trên trang tiếng Việt có thể làm giảm độ liên quan và gây nhầm lẫn cho người dùng và công cụ tìm kiếm — tùy trường hợp, một số trang quốc tế có thể giữ tên sản phẩm gốc (ví dụ: iPhone 15 Pro), nhưng phần mô tả vẫn nên bằng ngôn ngữ trang.