Thuộc tính ALT là một phần của tiêu chuẩn HTML. Chúng có thể được sử dụng để chỉ định văn bản thay thế cho hình ảnh được đưa vào các trang web. Chúng đóng một vai trò quan trọng trong việc tối ưu hóa công cụ tìm kiếm (SEO) và trong các trang web có khả năng truy cập không có rào cản.
Mục đích của văn bản thay thế
Hình ảnh và đồ họa là những yếu tố quan trọng trong thiết kế web. Chúng thường truyền tải các mối tương quan phức tạp tốt hơn so với mô tả bằng văn bản, tóm tắt những gì được viết một cách sinh động và làm cho trang trông hấp dẫn hơn. Hình ảnh nền, biểu trưng và biểu ngữ, cũng như khung và các đồ họa trang trí khác, không thể thiếu tính thẩm mỹ. Ngoài ra, nhiều hình ảnh là nội dung độc lập mà khách truy cập trang web quan tâm trực tiếp – ví dụ: ảnh trên Instagram hoặc trong thư viện trực tuyến.
Tuy nhiên, không phải tất cả người dùng internet đều có khả năng nhìn thấy hình ảnh, và các công cụ tìm kiếm cũng chỉ hiểu nội dung đồ họa ở một mức độ hạn chế. Các thuộc tính ALT giải quyết vấn đề này bằng cách cung cấp một văn bản thay thế cho một hình ảnh.
Các trình duyệt web và các chương trình khác sử dụng văn bản này nếu hình ảnh tương ứng không thể được hiển thị, nhìn thấy hoặc hiểu được. Ngay cả với hình ảnh bị lỗi hoặc không thể hiển thị, không có thông tin nào bị mất và khách truy cập vẫn biết hình ảnh đó nói về cái gì. Do đó, văn bản ALT cải thiện khả năng sử dụng của một trang và làm cho nó thân thiện hơn với người dùng.
Cụ thể, các thuộc tính ALT được sử dụng trong các trường hợp sau
- Các chương trình đọc trên màn hình dành cho người khiếm thị đọc to văn bản thay thế.
- Các công cụ tìm kiếm như Google phân tích văn bản ALT để tìm ra những gì hiển thị trên hình ảnh.
- Trong trường hợp liên kết hình ảnh bị hỏng hoặc định dạng tệp không được hỗ trợ, trình duyệt web sẽ hiển thị thuộc tính ALT.
- Một số người dùng internet tắt hiển thị hình ảnh trong trình duyệt của họ để tăng tốc độ tải trang hoặc tiết kiệm dung lượng dữ liệu. Trong những trường hợp này, trình duyệt web cũng hiển thị văn bản thay thế như có thể thấy trong ảnh chụp màn hình sau:
Ví dụ về việc hiển thị thuộc tính ALT trên một trang web
Các công cụ tìm kiếm rất coi trọng chất lượng của văn bản ALT, vì chúng giúp họ hiểu một hình ảnh và trang tổng thể. Điều này cho phép họ phân loại chính xác nội dung hình ảnh và trang. Ngoài ra,xếp hạng google các trang web không có rào cản và thường có thể truy cập cao hơn. Do đó, thuộc tính rất quan trọng theo quan điểm SEO.
Ngoài ra, các văn bản thay thế tốt sẽ cải thiện thứ hạng của hình ảnh trong tìm kiếm hình ảnh của Google. Đặc biệt là đồ họa có liên quan chặt chẽ đến nội dung trang sẽ tạo ra nhiều lưu lượng truy cập hơn vì chúng thu hút thêm người dùng từ tìm kiếm hình ảnh đến trang web thực tế.
Nếu hình ảnh có liên quan đặc biệt đến một cụm từ tìm kiếm nhất định , chúng thậm chí có thể được hiển thị trong kết quả tìm kiếm không phải trả tiền và do đó mang lại nhiều lưu lượng truy cập hơn cho trang web. Đối với kỹ thuật SEO, các thuộc tính ALT là không thể thiếu.
Đặc tả các thuộc tính ALT trong mã HTML
ALT là một thuộc tính bắt buộc trong HTML. Mặc dù hầu hết các trình duyệt đều bỏ qua các thuộc tính ALT bị thiếu, nhưng chúng là bắt buộc đối với tất cả các thẻ <img> và <areosystem của một trang web tuân thủ tiêu chuẩn. Do đó, mã HTML cho hình ảnh ít nhất phải giống như sau:
<img src = “imagefile.jpg” alt = “văn bản thay thế”>
Thuộc tính này cũng nên được sử dụng cho các hình ảnh trang trí thuần túy như đồ họa trang trí, hình nền, đường kẻ hoặc khung. Tuy nhiên, văn bản thay thế nên để trống trong trường hợp này, vì một hình ảnh như vậy không có ý nghĩa về mặt nội dung:
<img src = “background.jpg” alt = “”>
Hệ thống xuất giọng nói và phần mềm hỗ trợ người khuyết tật khác có thể bỏ qua các thẻ <img> như vậy bằng thuộc tính ALT trống.
Yêu cầu đối với thuộc tính ALT
Tiêu chuẩn HTML quy định rằng các văn bản thay thế phải là sự thay thế thích hợp và hoàn chỉnh cho nội dung đồ họa của hình ảnh. Do đó, lý tưởng nhất là các thuộc tính ALT không nên chứa nội dung bổ sung như giải thích thêm cũng như tiêu đề hoặc chú thích. Chúng chỉ nhằm mục đích cung cấp một mô tả bằng văn bản về nội dung hình ảnh để một trang có thể được hiểu ngay cả khi không có hình ảnh và vẫn có cùng nội dung thông tin.
Các yêu cầu này không mâu thuẫn với các yêu cầu đối với thuộc tính ALT liên quan đến tối ưu hóa công cụ tìm kiếm (SEO). Theo một số cách, các công cụ tìm kiếm cũng mù quáng đối với nội dung đồ họa, vì vậy chúng được hưởng lợi từ các văn bản ALT tương tự như những người khiếm thị. Do đó, một văn bản thay thế tốt cũng hữu ích không kém cho người mù, công cụ tìm kiếm và người dùng đã tắt hiển thị hình ảnh.
Tuy nhiên, ngay cả một thuộc tính ALT được tối ưu hóa hoàn hảo cũng không thể ẩn nội dung bị thiếu trên một trang web. Do đó, việc sử dụng sai văn bản thay thế không giúp ích gì cho SEO và có thể – trong trường hợp nhồi nhét từ khóa – thậm chí có thể phản tác dụng, vì Google và các công cụ tìm kiếm khác trừng phạt các phương pháp SEO như vậy.
Văn bản thay thế phù hợp cho các loại hình ảnh khác nhau
Nội dung tối ưu của văn bản ALT chất lượng cao phụ thuộc phần lớn vào mục đích và nội dung của hình ảnh. Một điểm khởi đầu tốt là câu hỏi văn bản nào sẽ thay thế hình ảnh nếu nó không tồn tại ngay từ đầu. Ngoài ra, việc phân biệt thành các loại hình ảnh sau có thể giúp hình thành thuộc tính ALT phù hợp cho SEO
Hình ảnh độc lập
Nội dung đồ họa viết tắt của chính nó. Ví dụ: ảnh trong phòng trưng bày và album, ảnh chụp màn hình minh họa của các ứng dụng, “ảnh vui nhộn”, ảnh để tải xuống hoặc mua và những thứ tương tự. Văn bản thay thế cung cấp một mô tả ngắn gọn nhưng có ý nghĩa về hình ảnh bao gồm từ khóa quan trọng nhất đối với SEO tìm kiếm hình ảnh.
Hình ảnh nội tuyến
Những đồ họa này thay thế một hoặc một vài từ vì lý do thẩm mỹ hoặc tiết kiệm không gian. Điều này bao gồm các biểu tượng mặt cười và biểu tượng cảm xúc, biểu tượng và biểu tượng cũng như các chữ tượng hình đơn giản. Thuộc tính ALT tương ứng chứa văn bản mà hình ảnh thay thế – ví dụ: “biểu tượng cảm xúc cười toe toét” hoặc đơn giản là “cười toe toét”.
Hình ảnh giải thích
Đồ thị, số liệu thống kê, ảnh chụp màn hình giải thích. Nếu đồ họa chỉ tóm tắt văn bản xung quanh mà không cung cấp thông tin mới, văn bản ALT vẫn trống. Nếu không, nó chứa một phiên bản ngắn của nội dung hình ảnh. Đối với các giải thích dài hơn, văn bản liên tục bình thường phù hợp hơn vì nó hữu ích cho tất cả khách truy cập.
Đồ họa trang trí không có giá trị thông tin
Hình nền, khung, đường kẻ và những thứ tương tự. Vì những hình ảnh này được sử dụng riêng cho thẩm mỹ trực quan, chúng được cung cấp các thuộc tính ALT trống.
Sự khác biệt đối với thuộc tính TITLE
Mặc dù ALT chỉ có thể được áp dụng cho các thẻ <img>, TITLE là một thuộc tính chung được hầu hết các phần tử HTML hỗ trợ. Mục đích của nó là thêm nhận xét, giải thích ngắn hoặc thông tin bổ sung. Các trình duyệt web hiển thị TITLE dưới dạng chú giải công cụ khi con trỏ chuột ở trên đó.
Do tầm quan trọng của chúng đối với khả năng tiếp cận và khả năng sử dụng, các văn bản thay thế quan trọng hơn đối với viết bài chuẩn SEO hơn là tiêu đề hình ảnh. Do đó ALT là một đặc điểm kỹ thuật bắt buộc, trong khi TITLE chỉ được sử dụng một cách tiết kiệm và thận trọng.