Thẻ ALT (Văn bản thay thế) mô tả một hình ảnh trên trang web. Nó sống trong mã HTML và thường không hiển thị trên chính trang đó.

Những gì cần lưu ý về ALT ảnh? Và làm thế nào bạn có thể sử dụng ALT ảnh để cải thiện SEO và trải nghiệm người dùng?

Bạn sẽ tìm hiểu những nội dung sau đây:

• Tại sao ALT lại quan trọng
• Cách thêm ALT vào hình ảnh
• Tại sao bạn không nên thêm ALT cho tất cả các hình ảnh
• Cách viết ALT tốt
• Ví dụ về alt tốt và xấu
• Cách tìm và khắc phục sự cố với thuộc tính alt

ALT ảnh (Văn bản thay thế) là gì?

ALT hoặc văn bản thay thế là một thuộc tính được thêm vào thẻ hình ảnh trong HTML. ALT được hiển thị sau khi đăng khi hình ảnh của bạn bị lỗi, không thể hiển thị trên trang web. Nó giúp các công cụ tìm kiếm hiểu được hình ảnh nói về cái gì. Văn bản thay thế cũng rất hữu ích trong trường hợp không thể tìm thấy hình ảnh trên một trang

Tại sao thẻ ALT ảnh quan trọng?

Thẻ Alt quan trọng vì bốn lý do chính. Thẻ Alt giúp bạn cải thiện khả năng truy cập, cải thiện mức độ liên quan giữa ảnh và nội dung, tăng khả năng xếp hạng cao trong Google Imagine, Thẻ ALT đóng vai trò là Anchortext cho liên kết hình ảnh.

1. Thẻ Alt cải thiện khả năng truy cập

Hàng triệu người bị khiếm thị và nhiều người sử dụng trình đọc màn hình để sử dụng nội dung online. Chúng hoạt động bằng cách chuyển đổi nội dung trên màn hình, bao gồm hình ảnh, thành âm thanh.

Hình ảnh không có thẻ ALT gây ra sự cố cho trình đọc màn hình vì ở đó không có cách nào để truyền đạt nội dung của hình ảnh đến người dùng. Thông thường, họ bỏ qua những hình ảnh này, hoặc tệ hơn, đọc ra tên tệp hình ảnh dài và không có ích.

Google nói về tầm quan trọng của thẻ ALT đối với người dùng có trình đọc màn hình trong hướng dẫn khởi động SEO.

2. Thẻ ALT có thể cải thiện mức độ liên quan

Google nhìn vào các từ trên một trang để hiểu những gì nó nói về.

Ví dụ: nếu trang đề cập đến chó lông xù, chó tha mồi và chó săn, thì Google biết điều đó về các giống chó.

Làm thế nào điều này liên quan đến hình ảnh?

Bởi vì đôi khi, bối cảnh bị khóa lại trong các hình ảnh mà Google không thể đọc được.

Sử dụng thẻ ALT giúp Google hiểu những hình ảnh này, điều này dẫn đến sự hiểu biết tốt hơn về trang của bạn và nội dung của nó.

3. ALT ảnh có thể giúp bạn xếp hạng trong Google Images

Google Images là công cụ tìm kiếm lớn thứ hai thế giới. Nó có trách nhiệm với 20,45% tất cả các tìm kiếm trực tuyến, vượt lên trên YouTube, Bing và các công cụ tìm kiếm khác cộng lại.

Điều này có nghĩa là có một cơ hội để tăng lưu lượng truy cập từ Google Images.

Chỉ cần nhìn vào số lần nhấp mà chúng tôi đã đăng lên Blog Ahrefs từ Google Images trong ba tháng qua:

Google Mu John Mueller nói rằng thẻ ALT là một phần quan trọng để tối ưu hóa cho Google Images:

Alt text is extremely helpful for Google Images — if you want your images to rank there. Even if you use lazy-loading, you know which image will be loaded, so get that information in there as early as possible & test what it renders as.

4. Thẻ ALT đóng vai trò là Anchortext cho liên kết hình ảnh

Anchor text đề cập đến các từ có thể nhấp để liên kết một trang web với một trang web khác. Google sử dụng nó để hiểu thêm về trang web và nội dung của nó.

Nhưng không phải tất cả các liên kết là văn bản; một số là hình ảnh.

Google tuyên bố:

Nếu bạn quyết định sử dụng một hình ảnh làm liên kết, điền vào văn bản thay thế của nó sẽ giúp Google hiểu thêm về trang mà bạn liên kết đến. Hãy tưởng tượng rằng bạn viết văn bản neo cho một liên kết văn bản.

Cách thêm thẻ ALT vào hình ảnh

Chỉ cần thêm thuộc tính alt vào thẻ <img> trong mã HTML.

Hình ảnh với thẻ alt:

<img src=“banh.jpg” alt=“banh cupcake”>

Nếu bạn sử dụng một CMS hiện đại, có thể thêm thẻ ALT mà không cần phải đào sâu vào mã HTML.

Ví dụ: trong WordPress, có một trường cho thẻ ALT khi thêm hình ảnh vào trang hoặc bài đăng:

Bạn có nên thẻ ALT cho tất cả các hình ảnh?

Không, đây là một quan niệm sai lầm phổ biến.

Nếu hình ảnh tồn tại cho mục đích trang trí và không mang thông tin quan trọng, thì đó không cần thêm văn bản thay thế.

Ví dụ: một số trang web có biểu tượng để tách nội dung:

Chúng chỉ có ở đó để trông đẹp, vì vậy bạn không nên thẻ ALR. Làm như vậy sẽ chỉ khiến khách truy cập khó chịu với trình đọc màn hình và giành được thêm bất kỳ giá trị SEO nào vào trang.

Điều tương tự cũng xảy ra đối với hình ảnh chung chung.

Nếu một hình ảnh không có yêu cầu thẻ ALT, cách tốt nhất là thêm một thuộc tính alt trống. Điều này là do một số trình đọc màn hình đọc tên tệp trong trường hợp không có thuộc tính alt, trong khi hầu hết sẽ bỏ qua các tệp có tên trống.

Đây là những gì trông giống như:

<img src = “seo” alt = “”>

Cách viết thẻ ALT tốt

• Ngắn gọn. Văn bản alt dài gây khó chịu cho những người sử dụng trình đọc màn hình. Sử dụng càng ít từ càng tốt. (Sử dụng thuộc tính longdesc nếu cần mô tả dài.)
• Chính xác. Tập trung vào mô tả hình ảnh.
• Tránh nhồi nhét từ khóa. Đây không phải là một nơi để từ khóa.
• Tránh nói rằng đó là một hình ảnh. Ở đó, bạn không cần phải bao gồm hình ảnh về hình ảnh của trò chơi của bạn. Cả Google và trình đọc màn hình đều có thể tự làm việc đó.
• Tránh dư thừa. Don Tiết lặp lại thông tin đã tồn tại trong bối cảnh của hình ảnh. Ví dụ: nếu bạn có một bức ảnh của Steve Jobs và văn bản ngay bên dưới hình ảnh thì đọc Steve Steve Jobs, thì ở đó, không cần thêm mô tả này vào thẻ alt. Google nên hiểu rằng chú thích có hiệu quả là văn bản thay thế.

Bạn cũng nên nhớ thêm văn bản thay thế vào nút. Nếu không, trình đọc màn hình có thể vượt qua chúng và một số khách truy cập đã thắng có thể tương tác với trang web của bạn.

Bad: <img src=“banhkem.png” alt=“ảnh chiếc bánh kem”>
Okay: <img src=“banhkem.png” alt=“bánh kem”>
Good: <img src=“banhkem.png” alt=“bánh kem ngô”>
Best: <img src=“banhkem.png” alt=“bánh kem ngô với dừa khô”>

Bad: <img src=“steve-jobs.png” alt=“steve jobs apple iphone ipad mac”>
Okay: <img src=“steve-jobs.png” alt=“steve jobs”>
Good: <img src=“steve-jobs.png” alt=“apple founder, steve jobs”>
Best: <img src=“steve-jobs.png” alt=“apple founder, steve jobs, holding the iphone 4”>

Bad: <img src=“amp.png” alt=“image4">
Okay: <img src=“amp.png” alt=“bộ khuếch đại màu cam”>
Good: <img src=“amp.png” alt=“bộ khuếch đại màu cam - 30 watts”>
Best: <img src=“amp.png” alt=“orange AD30HTC - 30 watt bộ khuếch đại”>

Lưu ý bao gồm số mô hình trong ví dụ cuối cùng đó. Đây là cách thực hành tốt, đặc biệt đối với hình ảnh trên các trang sản phẩm thương mại điện tử.

Cách tìm và khắc phục sự cố với thuộc tính alt

Cách đơn giản nhất là bạn cài đặt và sử dụng web developer,

Bạn chọn 1 trang trên website cần kiển tra thẻ Alt ảnh

Bạn click vào biểu tượng web develop sau đó chọn hình ảnh rồi click vào Display Alt Atributes.

Lặp đi lặp lại với các trang khác bạn sẽ kiểm tra được thẻ alt.

Ngoài ra bạn có thể dùng Screaming Frog hoặc Ahref có trả phí để tạo dự án.

Nhưng phương án này khá phức tạp nên mình đề nghị bạn ktra bằng tool trên mình giới thiệu vì nó miễn phí và đơn giản.

Bạn chỉ cần bỏ thời gian check từng trang hoặc trong thư viện ảnh.

Kết Luận

Tối ưu hóa thẻ ALT là rất quan trọng, nhưng nó không phải là kết thúc của SEO hình ảnh. Bạn cũng nên tối ưu hóa tên tệp, phục vụ hình ảnh phản hồi, xem xét tải lười biếng, và nhiều hơn nữa.