Văn bản thay thế - Alt Text

Văn bản thay thế là gì? Văn bản thay thế (văn bản thay thế), còn được gọi là "thuộc tính alt", mô tả alt alt "hoặc về mặt k...

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

Văn bản thay thế (văn bản thay thế), còn được gọi là "thuộc tính alt", mô tả alt alt "hoặc về mặt kỹ thuật không chính xác là" thẻ alt, Khăn được sử dụng trong mã HTML để mô tả giao diện và chức năng của hình ảnh trên trang.

Văn bản thay thế sử dụng:

1. Thêm văn bản thay thế vào ảnh trước hết là nguyên tắc tiếp cận web. Người dùng khiếm thị sử dụng trình đọc màn hình sẽ được đọc thuộc tính alt để hiểu rõ hơn về hình ảnh trên trang.

2. Thẻ Alt sẽ được hiển thị thay cho hình ảnh nếu không thể tải tệp hình ảnh.

3. Thẻ Alt cung cấp ngữ cảnh / mô tả hình ảnh tốt hơn cho trình thu thập thông tin của công cụ tìm kiếm, giúp chúng lập chỉ mục một hình ảnh chính xác.

 

Ví dụ văn bản thay thế

<img src = "Pupdanceparty.gif" alt = "Chó con nhảy múa">

Định dạng văn bản thay thế tối ưu

Đị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 trong việc nhồi nhét từ khóa. Nếu bạn có thể nhắm mắt lại, nhờ ai đó đọc văn bản thay thế cho bạn và tưởng tượng một phiên bản chính xác của hình ảnh, bạn đang đi đúng hướng.

Chúng ta hãy xem một vài ví dụ về văn bản thay thế cho hình ảnh này của một chồng bánh kếp việt quất trông rất ngon
 




Được rồi: <img src = "pancakes.png" alt = "pancakes">

Văn bản thay thế này chỉ "ổn" vì nó không được mô tả nhiều. Vâng, đây là hình ảnh của một chồng bánh kếp. Nhưng, có nhiều điều để nói về hình ảnh này.

Tốt

<img src = "pancakes.png" alt = "Chồng bánh  được trộn với đường bột">

Văn bản thay thế này là một thay thế tốt hơn bởi vì nó mô tả nhiều hơn về 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 được thể hiện); đó là một chồng bánh trộn với một ít đường bột!

Không được khuyến khích:

<img src = "pancakes.png" alt = "">

hoặc là

<img src = "pancakes.png" alt = "bữa ăn sáng tốt nhất bữa sáng hàng đầu"

Cả hai ví dụ này đều được khuyến nghị. Dòng mã đầu tiên thực sự không chứa bất kỳ văn bản thay thế nào cả (chú ý các trích dẫn trống), trong khi ví dụ thứ hai thể hiện nhồi nhét từ khóa trong văn bản thay thế.

Tại sao Alt Text lại quan trọng?
1. 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 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 người dùng bị khiếm thị hoặc không thể nhận dạng trực quan hình ảnh. 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 trực quan, có thể đánh giá cao nội dung trên trang web của bạn.
2. 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 tốt hơn cho người dùng, nhưng nó cũng có thể giúp bạn kiếm được cả lợi ích SEO rõ ràng và tiềm ẩn. Cùng với việc thực hiện tiêu đề hình ảnh và thực hành đặt tên tệp tốt nhất, bao gồm cả văn bản thay thế cũng có thể đóng góp cho SEO hình ảnh.

Mặc dù công nghệ nhận dạng hình ảnh của công cụ tìm kiếm đã được cải thiện rất nhiều trong những năm qua, nhưng 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 trang web như chúng ta có thể, vì vậy không nên để việc giải thích chỉ trong tay họ. Nếu họ không hiểu hoặc hiểu sai, có thể bạn có thể xếp hạng cho các từ khóa ngoài ý muốn hoặc bỏ lỡ xếp hạng hoàn toàn.

Đây là một ví dụ: Google có thể thấy hình ảnh sau đây và có thể giải mã rằng đó là một người đàn ông đeo cà vạt và đeo kính, ngồi ở bàn làm việc.


Jim Halpert từ The Office (phiên bản Mỹ)

Tuy nhiên, nếu bạn đang cố gắng xếp hạng cho "mạo danh Dwight Schrute của Jim Halpert", bạn sẽ cần phải giúp công cụ tìm kiếm giúp một tay giúp đỡ.

Theo nghĩ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. Với việc sử dụng từ khóa trên trang vẫn tăng trọng lượng như một yếu tố xếp hạng của công cụ tìm kiếm, bạn nên tạo văn bản thay thế vừa mô tả hình ảnh, vừa có thể, bao gồm một từ khóa hoặc cụm từ khóa bạn đang nhắm mục tiêu. 

Làm thế nào để tôi viết văn bản alt tốt?

1. Describe the image as specifically as possible. Alt text is, first and foremost, designed to provide text explanations of images for users who are unable to see them. if an image truly doesn't convey any meaning/value and is just there for design purposes, it should live within the CSS, not HTML.
2. Keep it (relatively) short. The most popular screen readers cut off alt text at around 125 characters, so it's advisable to keep it to that character count or less.
3. Use your keywords Alt text provides you another opportunity to include your target keyword on a page, and thus another opportunity to signal to search engines that your page is highly relevant to a particular search query. While your first priority should be describing and providing context to the image, if it makes sense to do so, include your keyword in the alt text of at least one image on the page.
4. Avoid keyword stuffing. Google won't dock you points for poorly written alt text, but you'll be in trouble if you use your alt text as an opportunity to stuff as many relevant keywords as you can think of into it. Focus on writing descriptive alt text that provides context to the image and if possible, includes your target keyword, and leave it at that.
5. Don't use images as text. This is less of an alt text-specific best practice and more of a general SEO-friendly web development tenet. Because search engines can't read text within your images, you should avoid using images in place of words. If you must do so, explain what your photo says within your alt text.
6. Don't include "image of," "picture of," etc. in your alt text. It's already assumed your alt text is referring to an image, so there's no need to specify it.
7. Don’t forget longdesc="". Explore using the longdesc="" tag for more complex images that require a longer description.
8. Don’t neglect form buttons. If a form on your website uses an image as it’s “submit” button, give it an alt attribute. Image buttons should have an alt attribute that describes the function of the button like, "search", "apply now", “sign up,” etc.
   
   
   
   

 

Văn bản alt tốt trông như thế nào?

Chúng ta hãy xem một vài ví dụ về văn bản thay thế đang hoạt động:


Văn bản thay thế được: <img src = "bird.png" alt = "gà trống">

Văn bản thay thế tốt hơn: <img src = "bird.png" alt = "gà tróng gáy">

Văn bản thay thế tốt nhất: <img src = "bird.png" alt = "con gà trống mà đỏ đang gáy">

Văn bản thay thế được: <img src = "Climbator.jpg" alt = "người đàn ông trên thang cuốn">

Văn bản thay thế tốt hơn: <img src = "Climbator.jpg" alt = "người đàn ông đi trên thang cuốn">

Văn bản thay thế tốt nhất: <img src = "Climbator.jpg" alt = "người đàn ông đeo ba lô đi xuống thang cuốn">

Văn bản thay thế được: <img src = "kwe.png" alt = "Keyword Explorer">

Văn bản thay thế tốt hơn: <img src = "kwe.png" alt = "nghiên cứu từ khóa trong Keyword Explorer">

Văn bản thay thế tốt nhất: <img src = "kwe.png" alt = "Công cụ Moz Keyword Explorer cho nghiên cứu từ khóa SEO">