Alt text cần truyền đạt phần thông tin mà người đọc sẽ bỏ lỡ nếu không nhìn thấy ảnh. Vì vậy, cách viết alt text cho ảnh không bắt đầu bằng việc chèn từ khóa, mà bắt đầu bằng ba câu hỏi: ảnh có vai trò gì, ngữ cảnh xung quanh đã giải thích điều gì và người không nhìn thấy ảnh cần biết gì để hiểu hoặc thao tác trên trang.
Một mô tả tốt thường ngắn gọn, cụ thể và phù hợp với chức năng của ảnh. Ảnh cung cấp thông tin cần được mô tả nội dung; ảnh dùng làm liên kết cần thể hiện đích đến hoặc hành động; ảnh chỉ để trang trí nên dùng thuộc tính alt rỗng.
Alt text là gì và dùng để làm gì?
Alt text, hay văn bản thay thế, là nội dung của thuộc tính alt trong phần tử HTML img. Cách viết cơ bản:
<img src="may-pha-ca-phe.jpg" alt="Máy pha cà phê màu đen với bình nước tháo rời">
Nhiều người gọi đây là “thẻ alt hình ảnh”, nhưng về kỹ thuật, alt là một thuộc tính của thẻ img. Thuộc tính này nằm trong nhóm các thành phần HTML quan trọng khi xây dựng nội dung; bạn có thể tìm hiểu thêm về các thẻ HTML SEO thiết yếu để hiểu vai trò của chúng trong cấu trúc trang.
Alt text có ba công dụng chính:
- Giúp người dùng trình đọc màn hình tiếp nhận thông tin hoặc chức năng của ảnh.
- Cung cấp nội dung thay thế khi hình ảnh không tải được.
- Giúp công cụ tìm kiếm hiểu rõ hơn mối liên hệ giữa ảnh và nội dung trang.
Alt text có hỗ trợ SEO hình ảnh, nhưng không thay thế tên tệp, định dạng ảnh, dung lượng, kích thước hiển thị, chú thích và nội dung xung quanh. Một quy trình tối ưu hình ảnh cho SEO cần xử lý đồng thời các yếu tố này thay vì chỉ tập trung vào thuộc tính alt.
Cách viết alt text cho ảnh theo từng bước
Bước 1: Xác định người đọc sẽ mất thông tin gì nếu không thấy ảnh
Hãy tạm bỏ ảnh khỏi trang và đọc phần nội dung còn lại. Nếu người đọc vẫn hiểu đầy đủ và không mất khả năng thao tác, ảnh có thể chỉ mang tính trang trí. Nếu họ bỏ lỡ một sản phẩm, kết quả, hướng dẫn hoặc nút bấm, ảnh cần văn bản thay thế.
Ví dụ, một ảnh chụp màn hình có thể phục vụ nhiều mục đích:
- Trong bài hướng dẫn: alt text cần nêu thao tác hoặc vị trí cần chú ý.
- Trong bài giới thiệu giao diện: alt text có thể mô tả bố cục chính.
- Khi chỉ dùng để tạo điểm nghỉ thị giác: ảnh có thể là ảnh trang trí.
Bước 2: Xác định chức năng của ảnh
Có thể phân loại ảnh thành các nhóm chính:
- Ảnh cung cấp thông tin: truyền đạt đối tượng, trạng thái, dữ liệu hoặc hướng dẫn.
- Ảnh chức năng: là liên kết, nút bấm hoặc thành phần điều khiển.
- Ảnh trang trí: không bổ sung thông tin cần thiết.
- Ảnh phức tạp: biểu đồ, sơ đồ hoặc đồ họa chứa nhiều dữ liệu.
Việc phân loại quyết định alt text nên mô tả nội dung, mô tả hành động, để rỗng hay kết hợp với phần giải thích dài trong nội dung.
Bước 3: Đọc câu trước và câu sau ảnh
Không nên viết alt text tách rời ngữ cảnh. Nếu đoạn văn đã nêu tên sản phẩm và màu sắc, alt text có thể tập trung vào chi tiết chưa được đề cập. Ngược lại, nếu ảnh là nguồn duy nhất thể hiện trạng thái hoặc đặc điểm, mô tả cần chứa thông tin đó.
Cùng một hình ảnh nhưng có thể cần alt text khác nhau:
- Bài bán hàng:
Áo khoác chống gió màu xanh, khóa kéo phía trước. - Bài hướng dẫn sử dụng:
Kéo khóa áo lên đến sát cổ trước khi đội mũ trùm. - Trang trí đầu bài:
alt=""nếu ảnh không bổ sung thông tin.
Bước 4: Viết một mô tả tự nhiên, ưu tiên thông tin quan trọng
Đặt chi tiết quan trọng ở đầu câu. Dùng từ ngữ mà người đọc có thể hiểu ngay, tránh liệt kê máy móc mọi vật thể xuất hiện trong khung hình.
Không có một giới hạn ký tự cố định phù hợp cho mọi ảnh. Nguyên tắc thực tế là viết đủ để truyền tải mục đích nhưng không dài hơn mức cần thiết. Nếu phải giải thích nhiều dữ liệu, hãy đưa phần giải thích vào nội dung hiển thị thay vì dồn toàn bộ vào thuộc tính alt.
Bước 5: Kiểm tra xem từ khóa có thật sự cần thiết không
Từ khóa chỉ nên xuất hiện khi nó gọi đúng tên đối tượng hoặc chủ đề của ảnh. Nếu ảnh thực sự là “giày chạy bộ màu trắng”, cụm từ đó có thể được dùng tự nhiên. Không nên lặp thêm các biến thể như “giày chạy bộ tốt, giày chạy bộ giá rẻ, giày chạy bộ chính hãng”.
Alt text trước hết là mô tả ảnh cho người dùng. Khả năng hỗ trợ tìm kiếm đến từ sự chính xác và phù hợp ngữ cảnh, không đến từ mật độ từ khóa.
Viết alt text theo mục đích của hình ảnh
Ảnh cung cấp thông tin
Mô tả nội dung quan trọng mà ảnh truyền đạt. Không cần mở đầu bằng “hình ảnh của” hoặc “bức ảnh chụp” vì trình đọc màn hình thường đã nhận biết đây là hình ảnh. Chỉ nêu loại hình khi điều đó có ý nghĩa, chẳng hạn ảnh chụp màn hình, bản đồ, tranh minh họa hoặc sơ đồ.
Chưa tốt:
alt="Hình ảnh biểu đồ"
Tốt hơn:
alt="Biểu đồ cho thấy lượng truy cập tăng dần từ tháng đầu đến tháng cuối kỳ"
Nếu biểu đồ chứa nhiều giá trị cần tra cứu, alt text chỉ nên tóm tắt kết luận chính. Các giá trị chi tiết cần được trình bày trong bảng hoặc phần văn bản ngay gần biểu đồ để mọi người đều có thể tiếp cận.
Ảnh hướng dẫn thao tác
Mô tả bước cần thực hiện và dấu hiệu nhận biết, thay vì kể toàn bộ giao diện.
Chưa tốt:
alt="Ảnh chụp màn hình trang cài đặt có nhiều mục"
Tốt hơn:
alt="Chọn mục Hình ảnh trong menu Cài đặt ở cột bên trái"
Nếu hướng dẫn đã ghi đầy đủ thao tác ngay trước ảnh, không cần lặp nguyên câu trong alt text. Có thể mô tả phần giao diện giúp người dùng xác nhận mình đang ở đúng vị trí.
Ảnh là liên kết hoặc nút bấm
Với ảnh có thể nhấp, alt text cần thể hiện chức năng hoặc đích đến. Người dùng cần biết điều gì xảy ra khi kích hoạt liên kết, không nhất thiết phải biết ảnh trông như thế nào.
<img src="icon-gio-hang.svg" alt="Xem giỏ hàng">
Nếu logo dẫn về trang chủ, alt text có thể là tên website kèm chức năng, chẳng hạn Trang chủ Hà Sơn Tech. Nếu ảnh và dòng chữ bên cạnh cùng nằm trong một liên kết và cùng thể hiện một chức năng, ảnh thường có thể dùng alt rỗng để tránh trình đọc màn hình đọc lặp.
Ảnh trang trí
Ảnh trang trí không đóng góp thông tin hoặc chức năng. Trường hợp này nên giữ thuộc tính alt nhưng để giá trị rỗng:
<img src="hoa-van-ngan-cach.svg" alt="">
Không nên xóa hẳn thuộc tính alt. Khi không có thuộc tính này, một số công nghệ hỗ trợ có thể đọc tên tệp hoặc thông tin không hữu ích khác. Các họa tiết thuần trang trí cũng có thể được triển khai bằng CSS nếu phù hợp với cấu trúc trang.
Biểu tượng trạng thái
Alt text phải nêu ý nghĩa của biểu tượng trong ngữ cảnh, không chỉ mô tả hình dạng.
- Biểu tượng dấu tích cho đơn hàng:
Đã xác nhận. - Biểu tượng tam giác cảnh báo:
Cảnh báo: chưa lưu thay đổi. - Biểu tượng kính lúp trên nút:
Tìm kiếm.
Mô tả như dấu tích màu xanh chỉ phù hợp nếu màu sắc và hình dạng chính là thông tin cần truyền tải. Trong giao diện, trạng thái hoặc hành động thường quan trọng hơn hình thức.
Ảnh chứa chữ
Nếu chữ trong ảnh là thông tin thiết yếu, alt text cần truyền đạt nội dung đó. Tuy nhiên, không nên dùng ảnh thay cho văn bản khi có thể hiển thị chữ bằng HTML. Văn bản HTML dễ đọc, sao chép, thay đổi kích thước và cập nhật hơn.
Đối với áp phích hoặc banner có nhiều nội dung, hãy đưa thông tin quan trọng vào phần văn bản hiển thị trên trang. Alt text chỉ tóm tắt mục đích và thông điệp chính, tránh biến thuộc tính alt thành một đoạn quảng cáo dài.
Cách viết alt ảnh sản phẩm
Alt ảnh sản phẩm cần giúp người không nhìn thấy ảnh phân biệt đúng mặt hàng và biến thể đang được trình bày. Tùy ngữ cảnh, mô tả có thể gồm:
- Tên hoặc loại sản phẩm.
- Màu sắc, kiểu dáng hoặc chất liệu có thể quan sát được.
- Góc chụp nếu góc đó cung cấp thông tin hữu ích.
- Chi tiết phân biệt biến thể.
- Trạng thái sử dụng hoặc bộ phận đang được minh họa.
Ví dụ:
alt="Balo laptop màu xám, ngăn chính mở để lộ ngăn đệm máy tính"
Với ảnh tiếp theo trên cùng trang sản phẩm:
alt="Mặt sau balo với hai quai đeo có đệm"
Một số cách viết chưa hữu ích:
alt="sản phẩm"
alt="ảnh 1"
alt="balo balo laptop balo đẹp balo giá tốt"
Không đưa vào alt text các tuyên bố không thể quan sát từ ảnh như “tốt nhất”, “bền nhất” hoặc “chất lượng cao”. Cũng không cần lặp tên sản phẩm giống hệt nhau cho mọi ảnh trong thư viện. Mỗi ảnh nên mô tả góc nhìn hoặc chi tiết riêng mà nó cung cấp.
Nếu màu sắc, kích thước hoặc biến thể đã được thể hiện bằng văn bản ngay cạnh ảnh, hãy cân nhắc mức độ cần lặp lại. Mục tiêu là giúp người dùng chọn đúng sản phẩm chứ không phải tạo thêm chỗ để chèn từ khóa.
Những lỗi viết thẻ alt hình ảnh cần tránh
Nhồi từ khóa
Việc lặp từ khóa và các biến thể làm mô tả khó nghe, không giúp người dùng hiểu ảnh rõ hơn và có thể khiến nội dung bị đánh giá là thiếu tự nhiên.
Nên tránh: dịch vụ SEO, SEO website, SEO hình ảnh, SEO giá rẻ.
Nên viết: Bảng kiểm tra các hạng mục tối ưu hình ảnh trên trang sản phẩm.
Dùng cùng một alt text cho nhiều ảnh khác nhau
Một thư viện sản phẩm có ảnh mặt trước, mặt sau và chi tiết khóa kéo không nên dùng chung một mô tả. Alt text trùng lặp khiến người dùng không biết mỗi ảnh bổ sung thông tin gì.
Mô tả mọi chi tiết trong ảnh
Không phải vật thể nào trong nền cũng cần được nêu. Hãy tập trung vào chi tiết liên quan đến nội dung hoặc hành động của người đọc. Màu tường, đồ vật ở xa hay cách bố trí ánh sáng có thể bỏ qua nếu không ảnh hưởng đến ý nghĩa.
Viết alt text không đúng với ảnh
Không thêm địa điểm, danh tính, chất liệu, thông số hoặc đặc tính khi không thể xác định từ ảnh và nội dung đã được kiểm chứng. Nếu ảnh không đủ căn cứ để nhận diện chính xác, hãy dùng mô tả khái quát hơn.
Dùng tên tệp làm văn bản thay thế
Các chuỗi như IMG_2048.jpg hoặc san-pham-01-final.webp không phải mô tả ảnh cho người dùng. Tên tệp có thể hỗ trợ quản lý và SEO hình ảnh, nhưng không thay thế alt text.
Để trống alt cho ảnh có chức năng
Một biểu tượng giỏ hàng, nút tìm kiếm hoặc ảnh sản phẩm không phải ảnh trang trí. Để alt="" trong các trường hợp này có thể khiến người dùng trình đọc màn hình bỏ lỡ thông tin hoặc không biết cách thao tác.
Có alt text nhưng ảnh không tải được
Văn bản thay thế không sửa được URL ảnh, tệp đã bị xóa hoặc lỗi máy chủ. Nếu trang xuất hiện hình ảnh bị lỗi, cần kiểm tra cả đường dẫn, tệp nguồn và phản hồi của máy chủ thay vì chỉ bổ sung thuộc tính alt.
Kiểm tra alt text trước khi xuất bản
Có thể dùng danh sách sau khi biên tập bài hoặc cập nhật trang sản phẩm:
- Ảnh có truyền đạt thông tin hoặc thực hiện chức năng không?
- Alt text có nói đúng điều người dùng cần biết từ ảnh không?
- Mô tả có phù hợp với câu trước và câu sau ảnh không?
- Có chi tiết nào được thêm vào nhưng không thể xác minh không?
- Từ khóa có xuất hiện tự nhiên hay đang bị lặp để phục vụ SEO?
- Ảnh liên kết có mô tả đích đến hoặc hành động không?
- Ảnh trang trí đã dùng
alt=""chưa? - Biểu đồ hoặc sơ đồ phức tạp đã có phần giải thích bằng văn bản chưa?
- Các ảnh sản phẩm khác nhau có mô tả được đặc điểm riêng không?
- Trang có ảnh thiếu thuộc tính alt hoặc dùng tên tệp thay cho mô tả không?
Khi quản trị website có nhiều ảnh, nên rà soát theo nhóm trang và ưu tiên ảnh sản phẩm, ảnh liên kết, nút biểu tượng, biểu đồ cùng ảnh nằm trên các trang có giá trị cao. Quy trình tìm và sửa lỗi alt hình ảnh giúp phân biệt ảnh thật sự thiếu mô tả với ảnh trang trí cần alt rỗng, tránh sửa hàng loạt theo một mẫu duy nhất.
Sau khi chỉnh sửa, hãy thử đọc trang khi tắt hình ảnh hoặc dùng trình đọc màn hình nếu có điều kiện. Nếu nội dung và thao tác vẫn dễ hiểu mà không bị đọc lặp, alt text đã đáp ứng tốt vai trò cơ bản.
Câu hỏi thường gặp về alt text
Có nên đưa từ khóa SEO vào mọi alt ảnh không?
Không. Chỉ dùng từ khóa khi nó mô tả chính xác đối tượng hoặc ý nghĩa của ảnh. Việc chèn cùng một từ khóa vào mọi ảnh làm giảm tính hữu ích và tạo ra mô tả thiếu tự nhiên.
Alt text nên dài bao nhiêu?
Không có độ dài cố định phù hợp cho tất cả trường hợp. Alt text nên ngắn gọn nhưng đủ ý. Ảnh đơn giản có thể chỉ cần một cụm từ; ảnh phức tạp nên có mô tả ngắn trong thuộc tính alt và phần giải thích chi tiết bằng văn bản hiển thị.
Ảnh trang trí có cần thuộc tính alt không?
Có. Ảnh trang trí nên có thuộc tính alt rỗng dưới dạng alt="", thay vì bỏ hẳn thuộc tính. Cách này cho công nghệ hỗ trợ biết rằng ảnh không mang nội dung cần đọc.
Chú thích ảnh có thay thế alt text không?
Không hoàn toàn. Chú thích hiển thị cho mọi người và thường cung cấp bối cảnh, nguồn hoặc lời giải thích. Alt text đại diện cho thông tin hay chức năng của ảnh khi người dùng không thể nhìn thấy nó. Hai phần có thể bổ trợ nhau, nhưng không nên lặp lại máy móc.
Có cần viết “hình ảnh của” trong alt text không?
Thông thường không cần. Trình đọc màn hình có thể thông báo đây là hình ảnh. Chỉ nêu loại hình khi thông tin đó có ý nghĩa, chẳng hạn “ảnh chụp màn hình”, “bản đồ” hoặc “sơ đồ quy trình”.
AI có thể tự viết alt text cho toàn bộ website không?
AI có thể hỗ trợ tạo bản nháp dựa trên nội dung nhìn thấy, nhưng không phải lúc nào cũng biết mục đích của ảnh trong trang. Mô tả tự động vẫn cần được kiểm tra về ngữ cảnh, chức năng liên kết, thông tin sản phẩm và các chi tiết không thể xác minh. Đặc biệt, không nên tự động áp cùng một công thức hoặc danh sách từ khóa cho mọi ảnh.
