Alt Text là gì?
Alt text (alternative text) là một mô tả văn bản của một hình ảnh trực tuyến, cung cấp một thay thế khi hình ảnh không thể truy cập được cho người dùng.
Alt text cung cấp cho các trình đọc màn hình một cái gì đó để đọc cho người dùng có khuyết tật thị giác, giúp các bot công cụ tìm kiếm hiểu nội dung hình ảnh, và có thể xuất hiện trên một trang web khi hình ảnh không tải được.
(Điều này tương phản với mô tả hình ảnh. Mô tả hình ảnh luôn xuất hiện trên trang.)
Alt text thường được thêm vào thông qua thuộc tính alt trong mã HTML của hình ảnh.
Như sau:
<img src=“image-file-example.jpg” alt=“Văn bản alt ở đây”>
Đó là lý do tại sao nó đôi khi được gọi là “thuộc tính alt” hoặc “thẻ alt.”
Hầu hết các hệ thống quản lý nội dung (CMS) có một trường riêng cho alt text. Vì vậy, bạn không cần chỉnh sửa mã HTML trực tiếp.
Dưới đây là một ví dụ từ WordPress:
Bạn cũng có thể sử dụng văn bản alt cho hình ảnh trên các nền tảng mạng xã hội như Twitter.
Dưới đây là một ví dụ từ Dogs Trust:
Tại sao văn bản thay thế (alt text) quan trọng?
Văn bản thay thế (alt text) là một yếu tố quan trọng vì nó làm cho hình ảnh trở nên dễ tiếp cận hơn đối với người dùng và các công cụ tìm kiếm, ngay cả khi chúng không thể hiển thị.
Nếu bạn không cung cấp văn bản thay thế thích hợp, những người sử dụng trình đọc màn hình sẽ không thể nhận được thông tin từ hình ảnh. Điều này gây bất công cho người dùng có khuyết tật thị giác. Điều này có thể gây tổn hại đến uy tín thương hiệu, lưu lượng truy cập và tỷ lệ chuyển đổi của bạn.
Ngoài ra, tính khả dụng trang web tốt cho SEO (web accessibility is good for SEO).
Google và các công cụ tìm kiếm khác sử dụng văn bản thay thế để xác định hình ảnh miêu tả hoặc liên kết đến cái gì. Điều này có thể cải thiện hiểu biết của họ về nội dung của bạn và do đó dẫn đến xếp hạng cao hơn.
Văn bản thay thế đặc biệt hữu ích cho tối ưu hóa hình ảnh – tức là xếp hạng cao trên Google Images và kết quả hình ảnh khác.
Loại tiếp xúc này có thể tạo lưu lượng truy cập có giá trị đến trang web của bạn.
Ví dụ, trang kết quả tìm kiếm của công cụ tìm kiếm (SERP) cho từ khóa “corgi puppies” được thống trị bởi hình ảnh. Hình ảnh này liên kết đến trang web của chủ sở hữu.
Rất nhiều hình ảnh này sử dụng từ khóa “corgi puppy” hoặc “corgi puppies” trong văn bản thay thế của chúng.
Vì vậy, văn bản thay thế quan trọng trong việc tối ưu hóa trang (on-page optimization), đôi khi được gọi là “văn bản thay thế SEO” (“SEO alt text”).
Cách viết Alt Text (Thực hành tốt nhất)
Hãy tìm hiểu cách viết Alt Text để cải thiện khả năng tiếp cận và SEO của trang web của bạn.
Chúng tôi đã tổng hợp ba thực hành tốt nhất về Alt Text để giúp bạn viết Alt Text hoàn hảo:
1. Thêm Alt Text vào các loại hình ảnh phù hợp
Không viết Alt Text cho các hình ảnh chỉ mang tính chất trang trí (như hình bên dưới). Các mô tả này có thể gây sự phân tâm và nhầm lẫn cho người dùng có khuyết tật thị giác, thay vì cung cấp ngữ cảnh hữu ích.
Thay vào đó, hãy cung cấp một thuộc tính alt trống (rỗng). Như sau:
✅ <img src=”decorative-image-title.jpg” alt=””>
Điều này cho biết cho các công cụ đọc màn hình bỏ qua hình ảnh.
Nếu bạn bỏ qua thuộc tính alt hoàn toàn (như dưới đây), các công nghệ hỗ trợ có thể đọc tên tệp hình ảnh thay vào đó. Tạo ra trải nghiệm người dùng kém chất lượng.
❌ <img src=”decorative-image-title.jpg”>
Hãy viết Alt Text cho tất cả các hình ảnh khác – hình ảnh cung cấp ý nghĩa bổ sung cho người đọc.
Ví dụ:
- Hình ảnh văn bản hữu ích (ví dụ: ảnh chụp màn hình bài đăng trên mạng xã hội)
- Biểu tượng chỉ định chức năng (ví dụ: biểu tượng giỏ hàng)
- Hình ảnh cung cấp thông tin bổ sung (ví dụ: so sánh kích thước điện thoại thông minh)
- Biểu đồ minh họa dữ liệu không được đề cập đến
- Đồ họa minh họa quy trình (ví dụ: cách cầm đũa)
Mẹo: Nếu bạn soạn thảo nội dung trong SEO Writing Assistant của Semrush, công cụ sẽ nhắc bạn thêm Alt Text cho hình ảnh. Nó cũng cung cấp các gợi ý về độ dễ đọc, SEO, tính độc đáo và ngữ điệu.
2. Hãy Mô tả một cách rõ ràng nhưng ngắn gọn
Văn bản thay thế nên là “mô tả ngắn gọn nhất có thể về mục đích của hình ảnh,” theo Web Accessibility Initiative (WAI).
Điều quan trọng về một hình ảnh phụ thuộc vào ngữ cảnh. Vì vậy, hãy xem xét nội dung xung quanh và khán giả khi viết văn bản thay thế.
Hãy xem xét hình ảnh dưới đây. Văn bản thay thế “Người phụ nữ tập yoga” sẽ phù hợp trong nhiều ngữ cảnh khác nhau.
Nhưng trong một hướng dẫn tập luyện, một mô tả chi tiết về tư thế của người phụ nữ có thể cần thiết.
Khi viết văn bản thay thế, hãy nghĩ về cách bạn sẽ mô tả một hình ảnh cho ai đó trong cuộc trò chuyện điện thoại.
Đừng bao gồm các chi tiết sau trong văn bản thay thế của bạn:
- Thông tin về tác giả và bản quyền – hãy bao gồm trong chú thích hình ảnh thay vì văn bản thay thế
- Các cụm từ lặp đi lặp lại như “hình ảnh của” hoặc “ảnh của” (trừ khi định dạng đó đặc biệt liên quan)
- Thông tin mà tất cả độc giả của bạn cần – hãy thêm vào chú thích hoặc nội dung chính thay vì văn bản thay thế
- Thông tin đã được cung cấp qua chú thích hình ảnh hoặc nội dung chính
Mẹo: Một số người khuyên nên giới hạn văn bản thay thế của hình ảnh trong khoảng tối đa 125 ký tự. Điều này là vì nhiều công nghệ hỗ trợ ngừng đọc văn bản thay thế sau 125 ký tự. Tuy nhiên, điều này không phải là một giới hạn cứng nhắc. Nếu bạn cần viết nhiều hơn, hãy xem lời khuyên về hình ảnh phức tạp của WAI.
Output:
Output:
3. Bao gồm một Từ khóa
Thêm các từ khóa liên quan vào văn bản thay thế hình ảnh có thể giúp hình ảnh của bạn xếp hạng trong kết quả hình ảnh của Google.
Ví dụ, văn bản thay thế này cho biết với Google rằng hướng dẫn về marketing funnel của chúng tôi có chứa một minh họa marketing funnel hữu ích:
Điều này có nghĩa là nó sẽ là một kết quả hình ảnh Google liên quan đến các truy vấn liên quan đến marketing funnels.
Để hiểu được các từ khóa nào nên bao gồm trong văn bản thay thế hình ảnh, bạn cần thực hiện một số nghiên cứu từ khóa.
Hãy thử thực hiện nghiên cứu từ khóa bằng công cụ Keyword Magic Tool của Semrush.
Chỉ cần nhập một từ khóa liên quan đến hình ảnh của bạn sau đó nhấp vào “Tìm kiếm”.
Đi đến “Bộ lọc nâng cao” sau đó “Tính năng SERP.”
Sau đó chọn “Hình ảnh” và “Gói hình ảnh” trước khi nhấp vào “Áp dụng”.
Công cụ sẽ hiển thị các từ khóa chứa từ khóa ban đầu của bạn (hoặc biến thể) và tạo kết quả hình ảnh.
Các từ và cụm từ này là ứng cử viên tuyệt vời cho văn bản thay thế hình ảnh SEO của bạn. Miễn là hình ảnh sẽ đáp ứng nhu cầu của người tìm kiếm.
Output:
Ví dụ về Văn bản thay thế
Chúng ta hãy xem ba ví dụ về văn bản thay thế tuân thủ các quy tắc tốt nhất.
Ví dụ 1: NASA
Bài viết trên blog này nói về một bức ảnh được chụp bằng Kính viễn vọng không gian Hubble. NASA cung cấp văn bản thay thế mô tả chi tiết để đảm bảo người dùng có khuyết tật thị giác có thể hiểu được nội dung của bức ảnh.
Văn bản thay thế: Thiên hà xoắn với nhân sáng, các cánh xoắn và một ánh sáng nhẹ bao quanh nó. Dưới đó, các sợi được tạo thành từ các mảng màu xanh lam sáng kéo dài xuống như các chiếc xúc tu. Thiên hà chỉ bị chạm nhẹ bởi một thiên hà thứ hai nhạt ở bên trái.
Ví dụ 2: Cục Truy cập Internet
Trang chủ của Cục Truy cập Internet hiển thị logo của các thương hiệu mà nó đã làm việc.
Khi người dùng không có quyền truy cập vào những hình ảnh này, các thẻ alt cung cấp một sự thay thế.
Ví dụ 3: The Guardian
Trong bài đánh giá sản phẩm này, The Guardian sử dụng thuộc tính alt và chú thích hình ảnh để cung cấp thông tin cho người đọc và công cụ tìm kiếm.
- Văn bản thay thế: Phần sau của Pixel 7 Pro hiển thị thanh camera nhôm.
- Chú thích hình ảnh: Thiết kế thanh camera vẫn gây chia rẽ ý kiến nhưng không thể phủ nhận rằng nó nổi bật so với đám đông. Ảnh: Samuel Gibbs/The Guardian
Lưu ý rằng văn bản thay thế hoạt động như một thay thế cho hình ảnh. Trong khi chú thích cung cấp thông tin bổ sung, chẳng hạn như nguồn ảnh.
Cách tìm và sửa văn bản Alt bị thiếu
Để kiểm tra xem trên trang web của bạn có văn bản Alt nào bị thiếu cho hình ảnh không, hãy sử dụng công cụ Site Audit của Semrush.
Nhập tên miền của bạn và nhấp vào “Bắt đầu kiểm tra”.
Sau đó, làm theo hướng dẫn để cấu hình công cụ.
Khi kiểm tra đã sẵn sàng, nhấp vào tab “Vấn đề”.
Bạn sẽ thấy một danh sách các lỗi, cảnh báo và thông báo.
Tìm kiếm cho “alt attributes”. Sau đó xem xem bạn có cảnh báo “# hình ảnh không có thuộc tính alt” hay không.
Nếu có, hãy nhấp vào liên kết “# hình ảnh” để xem các URL bị ảnh hưởng.
Nhấp vào biểu tượng “mở liên kết” bên cạnh tiêu đề từng trang để xem bất kỳ trang hoặc hình ảnh nào.
Tìm thấy một hình ảnh không cần văn bản Alt? Nhấp vào biểu tượng mắt để ẩn cảnh báo.
Hoặc sử dụng bộ lọc, hộp kiểm và nút “Ẩn được chọn” để loại bỏ cảnh báo hàng loạt.
Sẵn sàng làm việc với văn bản thay thế? Sử dụng các hộp kiểm và nút “Gửi đến…” để tạo các nhiệm vụ trong Semrush CRM, Trello, hoặc Zapier. (Bạn có thể cần thiết lập tích hợp tương ứng trước.)
Sau đó, thêm văn bản thay thế bị thiếu qua CMS của bạn.
Đảm bảo chạy lại Site Audit của bạn sau đó. Chỉ cần nhấp vào nút bánh răng và nhấn “Chạy lại chiến dịch.” Và xem cảnh báo văn bản thay thế hình ảnh của bạn biến mất.
