Alt text là gì?
Alt Text (alternative text) hoặc “alt attributes”, “alt descriptions” được gọi là văn bản thay thế. Alt text chủ yếu dùng để mô nội dung của hình ảnh và mô tả ngữ cảnh của nó.
Ý nghĩa của alt text bắt nguồn từ văn bản thay thế cho những hình ảnh trên một trang không tải đúng cách. Alt text là bản sao bằng văn bản được hiển thị thay cho những hình ảnh đó.
Thêm alt text vào hình ảnh là một trong những phương pháp hay nhất được các chuyên gia SEO sử dụng để tối ưu hóa hình ảnh cho web. Đây là ví dụ về cách hiển thị thẻ alt hình ảnh HTML:
Ví dụ về alt text
Định dạng tốt nhất cho văn bản thay thế là đủ mô tả nhưng không chứa bất kỳ nỗ lực spam nào nhằm nhồi nhét từ khóa. Nếu bạn có thể nhắm mắt, nhờ ai đó đọc văn bản thay thế cho bạn và tưởng tượng một phiên bản hình ảnh chính xác hợp lý, bạn đang đi đúng hướng.
Hãy xem một vài ví dụ về văn bản thay thế cho hình ảnh của một cái bánh pancake việt quất. Có 3 ví dụ sử dụng thẻ altt text trong trường hợp này
Alt text đạt yêu cầu: <img src="pancakes.png" alt="pancakes">
Văn bản thay thế này chỉ là “ổn” vì nó không mang tính mô tả. Tuy chỉ là một chiếc banh pancake việt quất nhưng bạn vẫn có thể mô tả tốt hơn
Alt text tốt: <img src="pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">
Văn bản thay thế này là một lựa chọn thay thế tốt hơn vì nó mô tả nhiều hơn những gì trong hình ảnh. Đây không chỉ là một chồng “bánh kếp” (như ví dụ văn bản thay thế đầu tiên đã trình bày). Đó là một chồng bánh kếp việt quất phủ một lớp đường bột!
Altt text không đạt yêu cầu: <img src="pancakes.png" alt="">
hoặc
<img src="pancakes.png" alt="pancake pancakes pan cake hotcakes hotcake breakfast food best breakfast top breakfasts breakfast recipes pancake recipe">
Cả hai ví dụ này đều không được khuyến khích. Dòng mã đầu tiên thực sự không chứa bất kỳ văn bản thay thế nào (lưu ý rằng các dấu ngoặc kép trống), trong khi ví dụ thứ hai cho thấy việc nhồi nhét từ khóa trong văn bản thay thế.
Tầm quan trọng của alt text
Văn bản thay thế cho hình ảnh ngày càng trở nên quan trọng hơn khi các công cụ tìm kiếm cải thiện khả năng đọc hình ảnh trên trang và trải nghiệm người dùng trở nên phong phú hơn với nội dung trực quan.
Google đã thảo luận về tầm quan trọng của thẻ alt ngay từ năm 2007 và chúng là một phần không thể thiếu trong nguyên tắc của Google Hình ảnh. Ý định của công cụ tìm kiếm là hướng tới tìm kiếm trực quan toàn diện hơn và điều này được xác nhận với mọi bản cập nhật.
Khả năng tiếp cận
Văn bản thay thế là một nguyên lý của thiết kế web có thể truy cập. Mục đích ban đầu (và vẫn là chính) của nó là mô tả hình ảnh cho những khách truy cập không thể nhìn thấy chúng.
Điều này bao gồm trình đọc màn hình và trình duyệt chặn hình ảnh, nhưng nó cũng bao gồm những người dùng bị khiếm thị hoặc không thể nhận dạng hình ảnh một cách trực quan. Bao gồm văn bản thay thế với hình ảnh của bạn đảm bảo tất cả người dùng, bất kể khả năng thị giác, có thể đánh giá cao nội dung trên trang web của bạn.
Alt text rất có lợi cho SEO hình ảnh
Sử dụng văn bản thay thế trên hình ảnh của bạn có thể mang lại trải nghiệm người dùng tốt hơn, nhưng nó cũng có thể giúp bạn kiếm được cả lợi ích tối ưu SEO on page nói riêng và SEO tổng thể website nói chung.
Cùng với việc triển khai các phương pháp hay nhất về tiêu đề hình ảnh và đặt tên tệp, bao gồm cả văn bản thay thế cũng có thể góp phần vào SEO hình ảnh.
Trong khi công nghệ nhận dạng hình ảnh của Google hay Bing… đã được cải thiện rất nhiều trong những năm qua, các trình thu thập thông tin tìm kiếm vẫn không thể “nhìn thấy” hình ảnh trên một trang web như chúng ta có thể.
Vì vậy rõ ràng phần mô tả cho hình ảnh bằng cách sử dụng alt text đóng vai trò rất quan trọng. Nếu các công cụ này không hiểu hoặc hiểu sai, bạn có thể sẽ bị đánh giá và làm giảm thứ hạng từ khoá
Làm cách nào để viết alt text tối ưu
- Mô tả hình ảnh càng cụ thể càng tốt: Văn bản thay thế, trước hết và quan trọng nhất, được thiết kế để cung cấp giải thích văn bản về hình ảnh cho những người dùng không thể nhìn thấy chúng. nếu một hình ảnh thực sự không truyền tải bất kỳ ý nghĩa / giá trị nào và chỉ ở đó cho mục đích thiết kế, thì nó sẽ nằm trong CSS chứ không phải HTML.
- Giữ nó (tương đối) ngắn gọn: Các trình đọc màn hình phổ biến nhất loại bỏ văn bản thay thế ở khoảng 125 ký tự, vì vậy bạn nên giữ nó ở số ký tự đó hoặc ít hơn.
- Sử dụng từ khóa: Văn bản thay thế cung cấp cho bạn một cơ hội khác để bao gồm từ khóa mục tiêu của bạn trên một trang và do đó, một cơ hội khác để báo hiệu cho các công cụ tìm kiếm rằng trang của bạn có liên quan nhiều đến một truy vấn tìm kiếm cụ thể. Mặc dù ưu tiên đầu tiên của bạn phải là mô tả và cung cấp ngữ cảnh cho hình ảnh, nhưng nếu làm như vậy là hợp lý, hãy đưa từ khóa của bạn vào văn bản thay thế của ít nhất một hình ảnh trên trang.
- Tránh nhồi nhét từ khóa: Google sẽ không cho bạn điểm đối với văn bản thay thế được viết kém, nhưng bạn sẽ gặp rắc rối nếu sử dụng văn bản thay thế của mình như một cơ hội để nhồi vào đó càng nhiều từ khóa có liên quan càng tốt. Tập trung vào việc viết văn bản thay thế mô tả cung cấp ngữ cảnh cho hình ảnh và nếu có thể, hãy bao gồm từ khóa mục tiêu của bạn và giữ nguyên từ khóa đó.
- Không sử dụng hình ảnh làm văn bản: Đây không phải là phương pháp hay nhất dành riêng cho văn bản thay thế mà còn là nguyên lý phát triển web thân thiện với SEO chung. Bởi vì công cụ tìm kiếm không thể đọc văn bản trong hình ảnh của bạn, bạn nên tránh sử dụng hình ảnh thay cho từ. Nếu bạn phải làm như vậy, hãy giải thích ảnh của bạn nói gì trong văn bản thay thế của bạn.
- Không nên chứa từ khoá “hình ảnh”: hư “hình ảnh A”, “hình ảnh B”, v.v. trong văn bản thay thế của bạn. Nó đã được giả định rằng văn bản thay thế của bạn đang tham chiếu đến một hình ảnh, vì vậy không cần phải chỉ định đó là hình ảnh.
- Đừng quên longdesc = “”. Khám phá bằng cách sử dụng thẻ longdesc = “” cho những hình ảnh phức tạp hơn yêu cầu mô tả dài hơn.
- Đừng bỏ qua các nút biểu mẫu. Nếu một biểu mẫu trên trang web của bạn sử dụng hình ảnh làm nút “gửi”, hãy cung cấp cho nó một thuộc tính alt. Các nút hình ảnh phải có thuộc tính alt mô tả chức năng của nút như, “tìm kiếm”, “đăng ký ngay bây giờ”, “đăng ký”, v.v
Một số vấn đề thường gặp với Alt Text Hình ảnh
Dưới đây là một số vấn đề khiến alt text hoạt động không hiệu quả:
Hình ảnh bị hỏng
Hình ảnh bị hỏng cung cấp trải nghiệm người dùng kém vì chúng không thể được hiển thị đúng cách, gây ấn tượng tổng thể rằng trang của bạn có chất lượng thấp. Một khi các công cụ tìm kiếm nhận ra điều này, hình ảnh bị hỏng có thể ảnh hưởng đến thứ hạng trang web.
Một số nguyên nhân và cách sửa lỗi:
- URL sai chính tả hoặc đường dẫn tệp không hợp lệ: sửa lỗi đánh máy trong URL; nếu tệp hình ảnh đã được di chuyển, hãy sửa lại URL để trỏ tới vị trí hiện tại.
- Hình ảnh không còn tồn tại: nếu một tệp hình ảnh bị xóa hoặc bị hỏng, hãy thay đổi nó thành một tệp mới; hoặc nếu hình ảnh không còn cần thiết nữa, hãy xóa hình ảnh đó khỏi mã HTML của trang.
Hình ảnh không có thuộc tính thay thế
Không gán thuộc tính alt cho hình ảnh sẽ làm bỏ lỡ cơ hội để có thứ hạng tìm kiếm hình ảnh tốt hơn. Hơn nữa, nó không mang lại trải nghiệm người dùng tốt cho người dùng khiếm thị.
Ví dụ:
Lưu ý thuộc tính alt trống ở đây:
<img src = “magename.png” alt = “”>
Cần thay đổi thành:
<img src = “imagename.png” alt = “văn bản thay thế có từ khóa”>
Câu hỏi thường gặp về alt tex
Làm cách nào để tìm alt tag trên trang?
Dùng chuột trỏ vào đâu đó trên trang, nhấp chuột phải và chọn “Kiểm tra” hoặc sử dụng phím tắt Ctrl+Shift+I. Mã nguồn của trang sẽ xuất hiện ở bên phải màn hình.
Nhấp vào biểu tượng đầu tiên ở bên trái của bảng mã HTML, sau đó tìm hình ảnh trên trang mà bạn muốn xem và nhấp vào đó. Mã HTML cho phần tử đó sẽ được đánh dấu với tất cả các thuộc tính cho hình ảnh.
Cách đọc alt text với HTML?
Khi nhấp vào “Kiểm tra” (inspect) bạn cần tìm thẻ HTML có liên quan trong bảng hiển thị mã nguồn của trang. Alt text nằm sau một thẻ có nội dung “alt =” và phần sau là chính mô tả alt text.
Kiểm tra một hình ảnh có Alt Text?
Khi kiểm tra hình ảnh trong mã nguồn của trang, nếu thẻ alt sau “alt =” chỉ hiển thị hai dấu ngoặc kép không có nội dung ở giữa, thì thuộc tính alt trống, tức là không có văn bản thay thế.
Cách thêm alt text vào hình ảnh
Trong Microsoft Word, bạn có thể nhấp chuột phải vào hình ảnh và chọn “Edit alt text” từ menu. Điền mô tả của hình ảnh vào hộp nhập liệu và nhấp vào “close”. Hãy nhớ kiểm tra kỹ văn bản về chính tả và ngữ pháp, vì các hộp nhập liệu không có tính năng kiểm tra chính tả.
Sử dụng các kí tự đặc biệt trong alt text
Có. Việc thêm các dấu câu thích hợp trong alt text cho phép trình đọc màn hình mang lại trải nghiệm người dùng tốt hơn.
Hơn nữa, alt text được hiển thị khi hình ảnh không tải đúng cách. Vì vậy, văn bản chất lượng cao đảm bảo trải nghiệm người dùng tốt hơn.
Alt text nên có độ dài bao nhiêu?
Độ dài alt text tối đa được khuyến nghị là 125 ký tự.
