Alt text là gì? Tối ưu thẻ alt trong SEO hình ảnh | On Digitals

Alt Text là gì?

Alt Text (Alternative text) được biết đến là văn bản thay thế, giải thích nội dung hình ảnh và mô tả ngữ cảnh hình ảnh truyền tải nội dung trên tài liệu hoặc website. Alt Text và alt tag thường bị lầm tưởng giống nhau bởi cùng là một phần của mã HTML. Điểm khác biệt là Alt Text biểu thị cho mô tả hình ảnh có trong alt tag chứ không biểu thị cho toàn bộ thuộc tính.

Vì sao Alt text quan trọng?

Tăng khả năng tiếp cận

Alt text là một nguyên lý của thiết kế web có thể dễ dàng truy cập. Mục đích ban đầu của Alt text là mô tả hình ảnh cho những người truy cập không thể nhìn thấy chúng.

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 hình ảnh bằng mắt thường. Đối với alt text, đảm bảo chất lượng hình ảnh của bạn đến tất cả người dùng, bất kể thị lực, có thể đánh giá cao nội dung trên trang web của bạn.

SEO hình ảnh

Alt text cho hình ảnh cải thiện trải nghiệm người dùng và khả năng truy cập, nhưng nó cũng có thể giúp bạn đạt được lợi ích SEO rõ ràng và tiềm ẩn. Đảm bảo hình ảnh được tối ưu hóa tìm kiếm, việc này sẽ giúp hình ảnh xếp hạng tốt hơn trong tìm kiếm hình ảnh và gói hình ảnh.

Khi tối ưu hóa cho tìm kiếm hình ảnh, cần ưu tiên hiển thị hình ảnh khi người dùng nhập các truy vấn dựa trên văn bản. Để thực hiện, hãy làm theo các phương pháp SEO hình ảnh như sau:

• Định dạng file hiện đại
• alt text
• Tên tệp có liên quan
• Đánh dấu lược đồ

Tất cả yếu tố trên giúp Google hiểu rõ hơn về hình ảnh trên trang web của bạn và trả về kết quả tìm kiếm hình ảnh có liên quan.

Hướng dẫn tạo alt text trên các nền tảng website phổ biến

Đối với từng website khác nhau sẽ có phương thức tạo alt text phù hợp.

Thêm Alt Text vào hình ảnh trên WordPress

Khi đăng tải nội dung website thông qua WordPress, thì việc sử dụng văn bản thay thế cho hình ảnh rất đơn giản. Chỉ việc nhấp vào một trong số nhiều hình ảnh chuẩn bị đăng tải, sẽ xuất hiện section có thể cập nhật Alt text cho hình ảnh.

Một phương thức khác để thêm alt text vào hình ảnh, nhấp Media (phương tiện), chọn Library (thư viện) và click vào Edit image (chỉnh sửa hình ảnh).

Chỉnh sửa Alt text trong WordPress

Thêm Alt Text vào hình ảnh trên Shopify

Alt text diễn tả phương tiện truyền thông và đó là một phần quan trọng trong mô tả sản phẩm. Để thực hiện việc chèn văn bản thay thế trong Shopify hãy làm theo các bước sau:

• Từ giao diện chính của Shopify, chọn Products (sản phẩm).
• Chọn tên của sản phẩm mà bạn muốn chỉnh sửa.
• Từ product details page (Trang sản phẩm chi tiết), chọn product media item (mục truyền thông sản phẩm) để thấy được Preview media (trang xem trước phương tiện).
• Chọn Add ALT text (thêm văn bản thay thế).
• Nhập văn bản thay thế mong muốn, sau đó nhấp Save ALT text (lưu văn bản thay thế)
• Trỏ X để thoát preview page.

Giao diện chính của Shopify

Thêm Alt text vào hình ảnh chủ đề, nhấn Online Store và nhấp để chỉnh chủ đề mong muốn cho cửa hàng.

Menu phần cuối bên trái của trang sẽ hiện ra, tại đây có thể chọn ra danh mục hình ảnh, và chọn ra hình ảnh chủ đề. Nhấp vào ảnh chủ đề để có thể thêm văn bản thay thế.

Thêm ALT text cho ảnh chủ đề trên Shopify

Thêm Văn bản Thay thế vào ảnh trên Magento

Các thao tác thực hiện thêm Alt text vào hình ảnh trên Magento rất đơn giản bằng cách làm theo các bước dưới đây:

• Đăng nhập vào tài khoản cửa hàng trên Magento
• Chọn Category > nhấp Products > chọn sản phẩm muốn thêm alt text và kéo đến hình ảnh, nhấp vào nếu mong muốn thêm để sửa.

Lựa chọn thêm Alt text tại Magento

Thêm Alt tags vào hình ảnh trên Wix

Việc liên tục cập nhật nằm nâng cao trải nghiệm người dùng không còn xa lạ đối với các nền tảng website. Nếu như trước đây không thể thêm alt text vào hình ảnh tại trình duyệt Wix, thì nay nền tảng đã phát triển tài nguyên của mình nhằm khắc phục trải nghiệm người dùng tệ trước đó khi sử dụng Wix để SEO website.

Thêm Alt text đối với Wix chưa bao giờ dễ dàng hơn, khi chỉ cần chọn vào hình ảnh muốn thêm văn bản thay thế là có thể chỉnh sửa ngay. Nhấp vào biểu tượng cài đặt, từ đây sẽ hiện ra tùy chọn ‘what’s in the image?’, chọn vào khung để thêm alt text cho hình ảnh.

Giao diện khi chỉnh sửa alt text trên Wix

Có phải tất cả hình ảnh đều cần alt text?

Việc thêm alt text vào tất cả hình ảnh một cách vô tổ chức là quan niệm sai lầm. Tuỳ vào mục đích sử dụng hình ảnh, nếu chỉ sử dụng cho việc trang trí và không chứa thông tin cần
thiết thì không cần thêm văn bản thay thế.

Thực tiễn tốt nhất sử dụng Alt Text cho SEO Image

Lạm dụng hình ảnh vào quá trình truyền tải nội dung thay cho từ ngữ là việc không nên thực hiện. Bởi phương thức đọc và hiểu của các công cụ tìm kiếm khác với con người. Vậy, sử dụng hình ảnh thay thế cho văn bản có thể khiến cho trình thu thập dữ liệu hiểu sai và gây ảnh hưởng trực tiếp đến thứ hạng website trên công cụ tìm kiếm.

Nguyên tắc chung khi sử dụng alt text là hãy đảm bảo các thuộc tính alt được thêm vào tất cả các hình ảnh hiện trên một trang. Biểu thị cho alt được đánh giá như thế nào.

Mức độ thể hiện alt text đối với hình ảnh

Tệ: <img src="park.png" alt="Cầu hoa cây không gian anh công viên"

Tạm được: <img src="park.png" alt="Công viên trung tâm"

Được: <img src="park.png" alt="Cây cầu ở Công viên trung tâm"

Đánh giá cao: <img src="park.png" alt="Cây cầu ở Công viên trung tâm được bao trùm bởi cây xanh"

Ví dụ ‘tệ’ được thể hiện bởi từ hơn là ngữ cảnh. Ví dụ ‘đánh giá cao’ bao gồm thông tin cụ thể cũng như ngữ cảnh được thể hiện qua hình ảnh.

Cách Viết Alt Text cho các site thương mại điện tử

Tính mô tả của Alt text cần được chú trọng, đặc biệt là đối với các website thương mại điện tử. Ví dụ cho một alt text tag tốt dùng để tối ưu hóa hình ảnh giày Converse trên trang thương mại điện tử.

<img ="converse_shoes.png" alt="Giày thể thao Converse all star dành cho nam màu navy"

Giày thể thao Converse all star dành cho nam màu navy

Các sự cố thường gặp với thẻ alt text

Có 2 sự cố thường gặp khiến cho việc sử dụng alt text tag không hiệu quả:

Hình ảnh bị lỗi

Trải nghiệm của người dùng có thể giảm đi khi website xuất hiện hình ảnh bị lỗi khiến chất lượng tổng thể website giảm. Thứ hạng website có thể thay đổi, khi công cụ tìm kiếm nhìn nhận được hình ảnh bị lỗi.

Nguyên nhân và cách khắc phục:

• URL sai chính tả hoặc link dẫn tệp không phù hợp: Sửa lỗi xuất hiện trong URL, khi tệp hình ảnh đã được cải thiện, hãy sửa lại URL để có thể chuyển tiếp đến vị trí hiện tại

• Hình ảnh không tồn tại: Nếu tệp hình ảnh bị xóa hoặc bị lỗi, hãy thay đổi tệp hình ảnh mới, hoặc xóa nếu tệp hình ảnh không sử dụng, xóa hình ảnh khỏi HTML của trang.

Hình ảnh không có thuộc tính Alt

Không sử dụng alt text sẽ làm giảm cơ hội để có được thứ hạng tìm kiếm cao. Hơn nữa, trải nghiệm của người dùng khi sử dụng trình đọc văn bản sẽ giảm bởi không thể “đọc” hình ảnh.

Ví dụ:

Lưu ý các alt text bị thiếu:

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

Thay đổi thành:

<img src="parkname.png" alt="Công viên trung tâm">

Câu hỏi thường gặp về Alt Text

Làm thế nào để tìm thấy thẻ Alt trên Trang?

Chỉ vào hình ảnh bằng chuột, nhấp chuột phải và chọn “Inspect” (Kiểm tra) từ menu nhanh (hoặc sử dụng Ctrl-Shift-I trên bàn phím). Một ngăn mới sẽ mở ra ở bên phải màn hình của bạn với mã HTML được đánh dấu cho phần tử đó. Sau đó, có thể xem văn bản thay thế và các thuộc tính khác cho hình ảnh.

Cách đọc mô tả Alt trong mã HTML?

Khi trỏ “Inspect”, tìm thẻ HTML có liên quan đến hiển thị mã nguồn của hình ảnh. Với ví dụ biểu thị của alt text phía trên <img src=”park.png” alt=”Công viên trung tâm”. Alt text nằm sau ký tự “alt=” và phần trong ngoặc kép phía sau là mô tả alt text.

Cách kiểm tra hình ảnh đã có thẻ Alt không?

Chỉ cần kiểm tra mã nguồn của hình ảnh, nếu sau alt text “alt=” không có nội dung hay chỉ hiển thị 2 dấu ngoặc kép như alt=”” thì không hiển thị văn bản thay thế cho hình ảnh.

Làm thế nào để tôi thêm thẻ Alt vào tệp JPG?

Đối với ứng dụng Microsoft Word, có thể trỏ chuột phải vào hình ảnh và chọn “Edit alt text” từ thanh menu. Viết alt text của hình vào chỗ trống và nhất “close” (đóng). Kiểm tra kỹ chính tả và văn phong, vì thao tác này không yêu cầu đúng chính tả.

Độ dài tối đa của Alt Tags

Giới hạn độ dài Alt Tags là 125 ký tự

Có thể sử dụng dấu phẩy và khoảng thời gian trong văn bản thay thế không?

Được phép sử dụng dấu phẩy khi dùng alt text cho hình ảnh, bởi việc thêm ký tự này giúp trải nghiệm người dùng tốt hơn khi dùng trình đọc văn bản.

Bên cạnh đó, alt text vẫn hiển thị dù hình ảnh có bị lỗi hay không tải được. Vì vậy, văn bản thay thế chất lượng bảo toàn được trải nghiệm người dùng.

Xem thêm: Text link là gì và lợi ích của yếu tố này trong tối ưu SEO offpage.

Lời kết

Bài viết đã khái quát được khái niệm alt text, phương thức sử dụng văn bản thay thế cho hình ảnh cũng như cách thêm alt tag cho các website phổ biến. Với mỗi nền tảng khác nhau sẽ có cách thêm alt text khác nhau, tuy chỉ là văn bản thay thế cho ảnh hiển thị nhưng nó nắm vai trò quan trọng đối với người dùng trình đọc văn bản.

Đừng quên truy cập vào website On Digitals để cập nhật các bài viết mới liên quan đến SEO website. Nếu các bạn có nhu cầu sử dụng dịch vụ SEO cho website doanh nghiệp, hãy liên hệ với chúng tôi để biết thêm thông tin chi tiết.