Viết văn bản thay thế tuyệt vời cho hình ảnh trang web

Cải thiện khả năng truy cập và nội dung trang bằng văn bản thay thế

Nhìn vào khá nhiều trang web bất kỳ trên Web ngày hôm nay và bạn sẽ thấy rằng một trong những điều mà họ có điểm chung là hình ảnh. Hình ảnh có thể được sử dụng trên các trang web để thêm sự tinh tế trực quan, giúp minh họa ý tưởng và để thêm vào nội dung tổng thể của trang. Ngoài việc chọn hình ảnh phù hợpchuẩn bị chúng cho việc phân phối web , hãy đảm bảo rằng tất cả hình ảnh của trang web của bạn sử dụng đúng văn bản ALT là một phần rất quan trọng trong việc sử dụng đúng các hình ảnh này cho Web.

Văn bản thay thế là gì

Văn bản thay thế là văn bản thay thế được sử dụng bởi trình duyệt văn bản và các tác nhân người dùng web khác không thể xem hình ảnh. Nó cũng là một trong những thuộc tính duy nhất được yêu cầu bởi thẻ hình ảnh. Bằng cách viết văn bản thay thế hiệu quả, bạn đảm bảo rằng các trang web của bạn có thể truy cập được với những người có thể đang sử dụng trình đọc màn hình hoặc thiết bị được hỗ trợ khác để truy cập trang web của bạn. Bạn cũng đảm bảo rằng một cái gì đó sẽ được hiển thị ở vị trí của một hình ảnh nên nó không tải vì lý do gì (đường dẫn sai, thất bại truyền, vv). Đây là mục đích thực sự của văn bản thay thế, nhưng nội dung này cũng có thể cung cấp cho bạn nhiều địa điểm hơn để thêm văn bản thân thiện với SEO mà các công cụ tìm kiếm sẽ không phạt bạn (nhiều hơn về điều đó ngay).

Văn bản thay thế phải lặp lại văn bản trong hình ảnh

Bất kỳ hình ảnh nào có văn bản trong đó phải có văn bản đó dưới dạng văn bản thay thế. Bạn có thể đặt các từ khác trong văn bản thay thế, nhưng ở mức tối thiểu, nó cũng giống như hình ảnh. Ví dụ: nếu bạn có biểu tượng cho hình ảnh của mình, văn bản thay thế phải lặp lại tên công ty được viết bằng biểu tượng đồ họa của bạn.

Cũng nên nhớ rằng, những hình ảnh như logo cũng có thể ngụ ý văn bản - ví dụ, khi bạn nhìn thấy biểu tượng quả bóng màu đỏ trên trang web About.com, chúng có nghĩa là "About.com". Vì vậy, văn bản thay thế cho biểu tượng đó có thể nói "About.com" chứ không chỉ là "biểu tượng công ty".

Giữ văn bản ngắn

Văn bản thay thế của bạn càng dài thì các trình duyệt văn bản sẽ càng khó đọc hơn. Nó có thể hấp dẫn để viết các câu dài của văn bản thay thế (thông thường điều này được thực hiện bởi vì ai đó đang cố gắng gắn thẻ với từ khóa), nhưng giữ các thẻ Alt của bạn ngắn giữ cho các trang của bạn nhỏ hơn và các trang nhỏ hơn tải xuống nhanh hơn.

Một nguyên tắc chung cho văn bản thay thế là giữ nguyên từ 5 đến 15 từ.

Sử dụng từ khóa SEO của bạn trong thẻ Alt

Mọi người thường nhầm lẫn nghĩ rằng mục đích của văn bản thay thế là đặt từ khóa công cụ tìm kiếm. Vâng, đó là lợi ích bạn có thể sử dụng, nhưng chỉ khi văn bản bạn thêm có ý nghĩa với mục đích thực sự của thẻ alt - để hiển thị văn bản thông minh giải thích hình ảnh nên ai đó không thể xem được!

Bây giờ, điều đó đang được nói, Alt văn bản không có nghĩa là một công cụ SEO không có nghĩa là bạn không thể sử dụng các từ khóa của bạn trong văn bản này. Vì văn bản thay thế là quan trọng và được yêu cầu trên hình ảnh, nên các công cụ tìm kiếm không thể phạt bạn vì đã đặt từ khóa ở đó nếu nội dung bạn thêm có ý nghĩa. Chỉ cần nhớ rằng ưu tiên hàng đầu của bạn là dành cho độc giả của bạn. Việc spam từ khóa trong văn bản thay thế có thể được phát hiện và các công cụ tìm kiếm thay đổi quy tắc của họ mọi lúc để ngăn những người gửi spam.

Nguyên tắc chung là sử dụng từ khóa công cụ tìm kiếm của bạn nơi chúng phù hợp với mô tả hình ảnh và không sử dụng nhiều từ khóa trong văn bản thay thế của bạn.

Giữ cho văn bản của bạn có ý nghĩa

Hãy nhớ rằng điểm của văn bản thay thế là xác định hình ảnh cho người đọc của bạn. Nhiều nhà phát triển web sử dụng văn bản thay thế cho chính họ, bao gồm những thứ như kích thước hình ảnh, tên tệp hình ảnh, v.v. Mặc dù điều này có thể hữu ích cho bạn nhưng nó không có gì cho độc giả của bạn và do đó nên bỏ qua những thẻ này.

Chỉ sử dụng văn bản thay thế trống cho biểu tượng và dấu đầu dòng

Định kỳ bạn sẽ sử dụng hình ảnh không có bất kỳ văn bản mô tả hữu ích nào, chẳng hạn như dấu đầu dòng hoặc biểu tượng đơn giản. Cách tốt nhất để sử dụng những hình ảnh này là trong CSS nơi bạn không cần văn bản thay thế. Nhưng nếu bạn hoàn toàn phải có chúng trong HTML của bạn, sử dụng một thuộc tính alt trống thay vì để nó hoàn toàn.

Nó có thể là hấp dẫn để đặt một nhân vật như một dấu hoa thị (*) để đại diện cho một viên đạn, nhưng điều này có thể gây nhầm lẫn hơn mà chỉ đơn giản là để trống. Và đặt văn bản "dấu đầu dòng" sẽ hiển thị thậm chí còn lạ hơn trong trình duyệt văn bản.

Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào 3/3/17