Alt text là một tính năng quan trọng của website, yếu tố cốt lõi giúp cải thiện khả năng truy cập cho người dùng. Tuy nhiên, alt text thường bị các đội ngũ thiết kế và phát triển web bỏ qua hoặc chỉ xem là phần phụ, không được đầu tư đúng mức như nội dung hiển thị trên màn hình. Trong bài viết này, Lilytech sẽ giải thích rõ giúp bạn alt text là gì, vai trò quan trọng của nó cùng hướng dẫn cách viết alt text hiệu quả, chuẩn xác, dễ áp dụng.
Alt text là gì? Phân biệt alt text, image title và image caption
Bên cạnh khái niệm về alt text, hãy cùng phân biệt alt text, image title và image caption để hiểu đúng vai trò của từng thành phần hình ảnh trên website.
Alt text là gì?
Alt text (hay alternative text) là đoạn mô tả ngắn được thêm vào hình ảnh trên trang web. Alt text giúp cải thiện khả năng truy cập cho người dùng và đồng thời hỗ trợ tối ưu hóa công cụ tìm kiếm. Nội dung này không hiển thị trực tiếp trên màn hình, trừ khi hình ảnh không tải được. Mục đích chính của alt text là hỗ trợ trình đọc màn hình, giúp người khiếm thị hiểu được nội dung của hình ảnh trên trang web.
Alt text đôi khi được gọi là alt tag, tuy nhiên cách gọi này không chính xác. Về mặt kỹ thuật, đây không phải là một thẻ HTML, mà là văn bản bổ trợ nhằm cung cấp ngữ cảnh cho hình ảnh trên trang.
Alt text, image title và image caption
Alt text, image title và image caption rất dễ bị nhầm lẫn với nhau, nhưng mỗi thành phần lại có vai trò hoàn toàn khác nhau:
- Alt text: Không hiển thị với đa số người dùng, trừ khi hình ảnh không tải được. Alt text chủ yếu phục vụ trình đọc màn hình và SEO, đồng thời là yêu cầu bắt buộc để đảm bảo khả năng truy cập.
- Image title: Là đoạn chú thích dạng tooltip xuất hiện khi người dùng rê chuột lên hình ảnh (chỉ hỗ trợ ở một số trình duyệt). Image title không thể thay thế alt text và có tác động rất hạn chế đến SEO cũng như truy cập.
- Image caption: Là phần chú thích hiển thị trực tiếp trên trang, thường nằm bên dưới hình ảnh. Caption cung cấp ngữ cảnh cho tất cả người dùng và là một phần của bố cục, trải nghiệm hình ảnh trên website.
Alt text ảnh hưởng đến SEO như thế nào?
Việc thiết lập alt text cho hình ảnh rất quan trọng đối với SEO và là một trong những yếu tố góp phần vào thứ hạng tìm kiếm. Alt text cung cấp ngữ cảnh về nội dung hình ảnh, giúp các bot của công cụ tìm kiếm hiểu và lập chỉ mục hình ảnh một cách chính xác. Không chỉ hỗ trợ công cụ tìm kiếm, việc thiếu alt text còn có thể ảnh hưởng tiêu cực đến thứ hạng của trang web.
Alt text cũng đóng vai trò quan trọng trong trường hợp trình duyệt không thể hiển thị hình ảnh. Khi đó, thay vì hình ảnh, website sẽ hiển thị nội dung alt text để mô tả hình ảnh lẽ ra phải xuất hiện. Nếu không có alt text, người dùng sẽ không biết hình ảnh đó là gì, dẫn đến trải nghiệm người dùng kém hơn đáng kể.
Về bản chất, mục đích chính của alt text là cải thiện khả năng truy cập bằng cách mô tả nội dung hình ảnh cho những người không thể nhìn thấy chúng. Tuy nhiên, alt text đồng thời cũng giúp công cụ tìm kiếm hiểu nội dung trang tốt hơn, từ đó cải thiện hiệu quả SEO. Việc không thiết lập alt text khiến website trở nên khó tiếp cận đối với trình đọc màn hình và trình duyệt, làm giảm trải nghiệm của người dùng khiếm thị.
Để đảm bảo mọi người dùng cũng như công cụ tìm kiếm đều có thể tiếp cận nội dung của bạn, hãy chắc chắn rằng tất cả hình ảnh trên website đều được gắn alt text rõ ràng, mang tính mô tả.
Hướng dẫn từng bước cách viết alt text hiệu quả
Sau khi đã hiểu alt text là gì, tiếp theo hãy cùng tìm hiểu cách viết alt text dễ tiếp cận và thân thiện với người dùng.
- Bước 1. Mô tả hình ảnh chính xác nhất có thể: Alt text là yếu tố quan trọng của khả năng truy cập website, vì vậy cần mô tả đúng nội dung hình ảnh và cung cấp ngữ cảnh phù hợp. Ví dụ, nếu bạn sử dụng hình ảnh Superman, alt text nên nêu rõ đó là Superman và anh ấy đang làm gì. Bên cạnh mô tả trực quan bạn cũng nên bổ sung ngữ cảnh văn hóa liên quan khi cần thiết.
- Bước 2. Không dùng các cụm như không cần thiết: Vì đây là alt text nên người dùng trình đọc màn hình đã biết nội dung đang nói đến một hình ảnh, không cần lặp lại thông tin này.
- Bước 3. Viết ngắn gọn, súc tích: Alt text càng rõ ràng và đi thẳng vào trọng tâm thì trải nghiệm người dùng càng tốt.
- Bước 4. Đừng quên các nút dạng hình ảnh: Một số nút trên website được hiển thị dưới dạng tệp hình ảnh. Nếu nút sử dụng thẻ <img> thì cần có thuộc tính alt. Trường hợp khác, lập trình viên có thể dùng thuộc tính <button aria-label> để thay thế.
- Bước 5. Kiểm tra lỗi chính tả: Lỗi chính tả có thể khiến trình đọc màn hình hiểu sai nội dung, gây trải nghiệm không tốt cho người dùng. Hãy kiểm tra alt text kỹ lưỡng giống như cách bạn rà soát nội dung hiển thị trên trang.
Cách thêm alt text trên các nền tảng phổ biến bạn nên biết
Mỗi nền tảng, từ website đến mạng xã hội, đều có cách thêm alt text khác nhau. Dưới đây là những điều bạn cần biết.
Thêm alt text trong WordPress
Việc thêm alt text trong WordPress khá đơn giản và có thể thực hiện khi tải ảnh lên hoặc khi chỉnh sửa hình ảnh.
Cách 1: Trong Media Library
- Vào WordPress Dashboard
- Chọn Media, nhấp Library
- Nhấp vào hình ảnh cần chỉnh
- Ở cột bên phải, nhập nội dung vào trường Alt Text
- Nhấn Update để lưu.
Cách 2: Trong Block Editor (Gutenberg)
- Chọn khối hình ảnh trong bài viết hoặc trang
- Ở thanh bên phải, trong Block Settings, tìm trường Alt Text (Alternative Text)
- Nhập alt text trực tiếp vào ô này.
Thêm alt text trên các nền tảng thương mại điện tử
Với website bán hàng, alt text giúp sản phẩm dễ tiếp cận hơn và hỗ trợ SEO hình ảnh hiệu quả.
Shopify: Shopify cho phép thêm alt text trực tiếp vào từng hình ảnh sản phẩm.
- Vào Shopify Admin
- Chọn Content, nhấp Files hoặc Products, rồi tiếp tục bấm vào All Products
- Chọn sản phẩm cần chỉnh sửa
- Di chuột lên hình ảnh, nhấp biểu tượng Edit (bút chì)
- Nhập nội dung vào trường Image alt text
- Nhấn Done, sau đó Save.
BigCommerce/ WooCommerce: Cả hai nền tảng đều hỗ trợ thêm alt text khi tải ảnh sản phẩm hoặc trong phần cài đặt hình ảnh. Với WooCommerce, bạn sẽ sử dụng Media Library của WordPress để gán alt text cho hình ảnh.
Thêm alt text trên các website builder khác
Các nền tảng dựng website kéo-thả thường tích hợp sẵn vị trí thêm alt text cho hình ảnh.
Squarespace: Alt text trong Squarespace thường nằm trong phần chỉnh sửa hình ảnh.
- Chọn khối hình ảnh trên trang
- Nhấp Design rồi chọn Image Editor
- Cuộn xuống Filename hoặc Alt Text (tùy phiên bản)
- Nhập mô tả alt text và lưu.
Wix: Wix cho phép thêm alt text trực tiếp trong phần cài đặt hình ảnh.
- Nhấp vào hình ảnh
- Chọn Settings hoặc Edit
- Tìm trường Alt Text trong Image Settings
- Nhập alt text và lưu.
Thêm alt text trên mạng xã hội
Alt text không chỉ quan trọng với website mà còn ngày càng được các nền tảng mạng xã hội chú trọng để cải thiện khả năng truy cập.
Instagram: Instagram cho phép thêm alt text thủ công khi đăng bài.
- Tạo bài đăng mới
- Vào Advanced Settings trước khi đăng
- Chọn Write Alt Text trong mục Accessibility
- Nhập mô tả và đăng bài.
Twitter (X): Twitter hỗ trợ alt text với độ dài khá lớn, phù hợp mô tả chi tiết.
- Tải ảnh lên khi soạn tweet
- Nhấp +ALT trên hình ảnh
- Nhập mô tả (tối đa 1000 ký tự)
- Nhấn Done.
LinkedIn: LinkedIn cho phép thêm alt text ngay khi tải ảnh.
- Tải hình ảnh lên
- Nhấp biểu tượng Edit (bút chì)
- Chọn Add Alt Text
- Nhập mô tả và Save.
Facebook: Facebook hỗ trợ cả alt text tự động và alt text tùy chỉnh.
- Tải hình ảnh lên
- Chọn Edit Photo
- Trong menu bên trái, chọn Alternative Text
- Nhập mô tả tùy chỉnh hoặc chỉnh sửa nội dung Facebook tạo sẵn.
Nguyên tắc cốt lõi để viết alt text thành công
Khi thêm alt text cho hình ảnh, bạn nên lưu ý một số nguyên tắc quan trọng được liệt kê dưới đây.
Mô tả hình ảnh một cách chính xác
Alt text cần mô tả đúng nội dung hình ảnh để người dùng sử dụng trình đọc màn hình có thể hiểu được hình ảnh đó. Ví dụ với một ảnh chụp màn hình kết quả tìm kiếm Google, alt text phù hợp sẽ là Ảnh chụp màn hình kết quả tìm kiếm Google, thay vì chỉ viết chung chung là Screenshot.
Mô tả mục đích của hình ảnh mang tính chức năng
Trong một số trường hợp, điều quan trọng không phải là hình ảnh trông như thế nào, mà là ý nghĩa hoặc chức năng của nó trong ngữ cảnh sử dụng. Khi đó, alt text nên mô tả mục đích, thay vì mô tả hình thức. Ví dụ, biểu tượng kính lúp dùng để tìm kiếm nên có alt text là Tìm kiếm, thay vì Biểu tượng kính lúp.
Giữ alt text ngắn gọn, dễ hiểu
Phần lớn người dùng trình đọc màn hình sẽ có trải nghiệm tốt hơn với các mô tả ngắn, rõ ràng và dễ tiếp nhận, thay vì các đoạn văn dài. Trong trường hợp hình ảnh cần được giải thích chi tiết, bạn nên bổ sung phần mô tả dài bằng nội dung văn bản riêng ngay sau hình ảnh, thay vì nhồi vào alt text.
Tránh nhồi nhét từ khóa
Việc tận dụng từ khóa SEO trong alt text có thể mang lại lợi ích nếu phù hợp với ngữ cảnh hình ảnh. Tuy nhiên, không nên thêm từ khóa khi chúng không liên quan hoặc không cần thiết để hiểu nội dung hình ảnh. Alt text là cách duy nhất để một số người dùng tiếp cận nội dung hình ảnh, vì vậy nó cần truyền tải ý nghĩa rõ ràng, chính xác và súc tích, thay vì phục vụ mục đích SEO một cách máy móc.
FAQ
Câu 1: Alt text có quan trọng với SEO không?
Alt text có thể hỗ trợ SEO khi được viết đúng và phù hợp. Công cụ tìm kiếm sử dụng alt text để hiểu nội dung hình ảnh, từ đó cải thiện khả năng hiển thị trong kết quả tìm kiếm hình ảnh. Tuy nhiên, alt text nên ưu tiên người dùng trước, việc nhồi nhét từ khóa hoặc dùng từ không liên quan có thể gây hại cho cả khả năng truy cập lẫn hiệu quả SEO.
Câu 2: Làm sao để kiểm tra hình ảnh đã có alt text hay chưa?
Bạn có thể kiểm tra alt text bằng cách xem mã HTML của hình ảnh và tìm thuộc tính alt. Nhiều hệ quản trị nội dung hiển thị sẵn trường alt text trong phần cài đặt hình ảnh. Ngoài ra, bạn cũng có thể dùng công cụ kiểm tra tự động để phát hiện các hình ảnh thiếu hoặc có alt text chưa phù hợp.
Câu 3: Icon và logo có cần alt text không?
Icon và logo thường cần alt text, tùy vào vai trò của chúng. Icon mang tính chức năng nên mô tả hành động. Logo thường dùng tên tổ chức hoặc thương hiệu làm alt text. Những icon hoặc hình ảnh chỉ mang tính trang trí nên được ẩn khỏi công nghệ hỗ trợ.
Việc thuê một đơn vị chiến lược website tốt là cực kỳ cần thiết để xây dựng, tối ưu hóa và phát triển kinh doanh trực tuyến bền vững. Một đối tác chuyên nghiệp sẽ mang lại website chuẩn SEO, giao diện tối ưu, tăng tốc độ tải trang, nâng cao thương hiệu và tăng tỷ lệ chuyển đổi khách hàng. Tất cả những điều đó đều được cung cấp bởi Lilytech, vì vậy, hãy liên hệ ngay với chúng tôi qua:
- Công Ty TNHH Giải Pháp Công Nghệ Lily
- 108 Hoàng Ngọc Phách, Kênh Dương, Lê Chân, Thành Phố Hải Phòng
- (024) 71 089 999
- [email protected]
