Bạn có thể đã nghe nói về Alt Text cho hình ảnh về khả năng truy cập web. Alt text (còn được gọi là thuộc tính alt hoặc mô tả alt) là văn bản đi kèm với hình ảnh được đọc bởi trình đọc màn hình, giúp người dùng khiếm thị điều hướng web.
Nhưng alt text có thể làm nhiều hơn cho SEO hình ảnh hơn những gì bạn nghĩ, giống như để lại một thuộc tính alt trống có thể gây hại cho thứ hạng của bạn. Trong hướng dẫn này, chúng ta cùng tìm hiểu chi tiết về thẻ mô tả alt và cách tối ưu chúng hiệu quả cho SEO.
Alt Text cho hình ảnh là gì?
Alt Text hay Văn bản thay thế có tác dụng không chỉ mô tả nội dung của hình ảnh, mà còn cả ngữ cảnh của nó. Thường bị nhầm lẫn với thẻ alt, văn bản thay thế thực sự là một phần của mã HTML, nhưng nó chỉ là mô tả của hình ảnh có trong thẻ alt chứ không phải toàn bộ thuộc tính.
Ý nghĩa của alt text đến từ văn bản thay thế và bạn có thể đã bắt gặp nó trước đây nếu bạn từng có hình ảnh trên một trang không tải đúng. 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 thuộc tính alt vào hình ảnh là một trong những cách tốt nhất được sử dụng bởi các chuyên gia SEO để tối ưu hóa hình ảnh cho trang web. Đây là cách một thẻ thay thế hình ảnh HTML trông như này:
Như được hiển thị trong mã nguồn ở bên phải, văn bản thay thế cho ảnh chụp màn hình bảng điều khiển công cụ Audit website của Semrush là:
<img alt="VietMoz SEO Daily" />Đơn giản, phải không?
Tại sao Alt Text quan trọng đối với SEO hình ảnh?
Alt text quan trọng vì 4 lý do chính.
- Cải thiện khả năng truy cập
- Có thể cải thiện ‘sự liên quan tại chỗ’
- Có thể giúp bạn xếp hạng trong Google Images
- Phục vụ như văn bản neo cho liên kết hình ảnh
Văn bản thay thế cải thiện khả năng truy cập
Hàng triệu người khiếm thị và nhiều người sử dụng trình đọc màn hình để tiêu thụ nội dung trực tuyến. Chúng hoạt động bằng cách chuyển đổi nội dung trên màn hình, bao gồm cả hình ảnh, thành âm thanh.
Hình ảnh không có văn bản thay thế sẽ gây ra vấn đề 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 cho người dùng. Thông thường, trình đọc sẽ bỏ qua những hình ảnh này, hoặc tệ hơn nó sẽ đọc tên tệp hình ảnh dài và không hữu ích.
Google đã nói về tầm quan trọng của alt text với người dùng có trình đọc màn hình trong hướng dẫn khởi động SEO của họ .
Alt Text có thể cải thiện ‘sự liên quan tại chỗ’
Google xem xét các từ trên một trang để hiểu những gì trang đó nói về.
Ví dụ: nếu trang đề cập đến chó xù, labrador và retrievers, thì Google biết đó là về các giống chó.
Điều này liên quan đến hình ảnh như thế nào?
Bởi vì đôi khi, ngữ cảnh bị ‘khóa’ trong hình ảnh mà Google không thể đọc được.
Mặc dù Google gần như chắc chắn có thể nói rằng đây là những hình ảnh về những chú chó nhưng không có alt text, nhưng giống chó cụ thể có thể ít rõ ràng hơn và đó là nơi văn bản thay thế xuất hiện.
Văn bản thay thế 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ó chịu trách nhiệm cho 20,45% của tất cả các tìm kiếm trực tuyến, đặt nó trước 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 để thúc đẩy lưu lượng truy cập website từ Google Images.
Thử nhìn vào dữ liệu nhấp chuột mà Ahrefs đã có trên Blog Ahrefs từ Google Images được thu thập trong 3 tháng bạn sẽ hiểu cơ hội mình có thể nhận lớn nhường nào của :
John Mueller của Google nói rằng alt text là một phần quan trọng trong việc tối ưu hóa cho Google Images:
Alt Text đóng vai trò là anchor text cho liên kết hình ảnh
Anchor text đề cập đến các từ có thể nhấp được liên kết trang web này với trang web khác. Google sử dụng nó để hiểu thêm về trang web và những gì nó nói về.
Nhưng không phải tất cả các liên kết đều là văn bản, một số có thể là hình ảnh.
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 alt text của nó sẽ giúp Google hiểu thêm về trang bạn đang liên kết đến. Hãy tưởng tượng rằng bạn đang viết văn bản neo cho một liên kết văn bản.
Google tuyên bố.
Cách thêm alt text vào hình ảnh trên website
Alt text cung cấp cho chúng ta cơ hội tích hợp các từ khóa tập trung theo cách có liên quan và có ý nghĩa thực sự làm phong phú thêm nội dung và cung cấp trải nghiệm người dùng tốt hơn.
Từ khóa trong văn bản thay thế không phải là điều duy nhất cần lưu ý khi tối ưu hóa hình ảnh. Khi viết alt text, hãy nhớ:
- Mô tả hình ảnh một cách khách quan nhất có thể: cuối cùng thẻ alt được hiển thị khi hình ảnh không tải, vì vậy nó cần phải là một mô tả hình ảnh mạch lạc.
- Cung cấp ngữ cảnh cho hình ảnh: để trình thu thập dữ liệu có thể lập chỉ mục chính xác.
- Giữ nó ngắn gọn và đơn giản: đối với các mô tả dài hơn hãy sử dụng thuộc tính longdesc (lưu ý: tránh các cụm từ như “hình ảnh của” hoặc “hình ảnh của”, – nó tự giải thích như văn bản thay thế là cho mô tả của hình ảnh).
- Sử dụng từ khóa nhưng tránh nhồi nhét từ khóa: tất cả các quy tắc thông thường của nội dung chất lượng cao cũng áp dụng cho văn bản thay thế. Nhồi nhét từ khóa không hoạt động cho nội dung của bạn và sẽ không hoạt động cho văn bản thay thế.
Hướng dẫn thêm thuộc tính Alt cho hình ảnh
Rất đơn giản thôi, bạn chỉ cần thêm thuộc tính alt vào thẻ trong mã HTML.<img>
Hình ảnh có thẻ alt:
<img src=“pie.jpg” alt=“steak and ale pie”>Nếu bạn đang sử dụng CMS hiện đại, có thể thêm alt mà không cần phải đào sâu vào mã HTML.
Cách thêm Alt Tags trên các nền tảng website phổ biến
Một số nền tảng trang web đã thiết lập các tùy chọn văn bản thay thế; Bạn chỉ cần truy cập chúng.
Cách thêm Alt Text vào hình ảnh trên WordPress
Nếu bạn đang sử dụng WordPress, thật dễ dàng để thêm văn bản thay thế vào hình ảnh của mình.
Chỉ cần nhấp vào một hình ảnh trong cửa sổ trình chỉnh sửa và bạn sẽ thấy một trường xuất hiện cho điều này trên tab Thiết lập Hình ảnh.
Ngoài ra, nhấp vào một hình ảnh từ thư viện phương tiện và bạn cũng sẽ thấy các tùy chọn ở đây.
Cách thêm Alt Text vào hình ảnh trên Shopify
Nếu bạn đang sử dụng nền tảng Shopify, bạn có thể thêm văn bản thay thế vào cả hình ảnh chủ đề và hình ảnh sản phẩm.
Để tối ưu hóa alt tags trên hình ảnh sản phẩm, hãy chuyển đến Sản phẩm> Tất cả sản phẩm và nhấp vào danh sách sản phẩm bạn muốn chỉnh sửa.
Trên trang chi tiết sản phẩm, nhấp vào một mục phương tiện và tìm trang phương tiện xem trước. Bây giờ bạn có thể bấm để thêm văn bản thay thế.
Để thêm văn bản thay thế vào ảnh chủ đề, hãy truy cập > Chủ đề cửa hàng Trực tuyến và bấm để tùy chỉnh chủ đề cửa hàng của bạn.
Bạn sẽ thấy menu phần xuống phía bên trái của trang, nơi bạn có thể nhấp vào các khối hình ảnh và, từ đó, vào hình ảnh riêng lẻ.
Bạn sẽ thấy một hộp văn bản nơi bạn có thể thêm văn bản thay thế của mình.
Cách thêm Văn bản Thay thế vào ảnh trên Magento
Thật dễ dàng để thêm văn bản thay thế vào hình ảnh trên cửa hàng Magento.
Để làm như vậy, hãy bấm vào Danh mục > Sản phẩm, chọn sản phẩm bạn muốn thêm văn bản thay thế vào và cuộn đến phần Hình ảnh và Video.
Bấm vào hình ảnh và bạn có thể sửa văn bản thay thế.
Ảnh: 121 Thương mại điện tử
Cách đây không lâu, bạn không thể thêm văn bản thay thế vào hình ảnh trên cửa hàng Wix. Nhưng nền tảng này đã đầu tư tài nguyên vào việc khắc phục sự thất vọng SEO phổ biến trong những năm gần đây và chỉnh sửa văn bản thay thế hiện có thể.
Bạn có thể thêm văn bản thay thế vào hình ảnh trên cửa sổ chỉnh sửa bằng cách nhấp vào văn bản mà bạn muốn thêm văn bản thay thế vào và mở các tùy chọn cài đặt.
Từ đây, bạn sẽ thấy một tùy chọn cho ‘Có gì trong hình ảnh?’ và đó là nơi bạn có thể thêm văn bản thay thế của mình.
Có nên thêm Alt Text vào tất cả các hình ảnh không?
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 thuộc tính Alt.
Ví dụ: một số trang web có các biểu tượng để tách nội dung:
Chúng chỉ ở đó để trông đẹp, vì vậy bạn không nên thêm thuộc tính alt. Làm như vậy sẽ chỉ làm phiền khách truy cập với trình đọc màn hình và sẽ không 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 như thế này:
Có văn bản thay thế đọc “tắm và nến” không hữu ích cho người đọc khiếm thị vì đó là thông tin họ không cần biết. Sẽ tốt hơn nếu trình đọc màn hình bỏ qua nó hoàn toàn.
Nhưng, đây là một điểm quan trọng…
Nếu một hình ảnh không yêu cầu alt text, 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 thay thế, trong khi hầu hết sẽ bỏ qua những hình ảnh có thuộc tính trống.
Đây là ví dụ về một hình ảnh có thuộc tính alt trống:
<img src="spacer.gif" alt="">Tìm hiểu thêm trong hướng dẫn này từ WebAIM.
Thực tiễn tốt nhất sử dụng Alt Text cho SEO Image
Một số lời khuyên thân thiện với SEO là tránh sử dụng hình ảnh thay cho từ ngữ. Vì các công cụ tìm kiếm không thể “đọc” như cách của con người, vì vậy sử dụng một hình ảnh thay vì văn bản thực tế có thể gây nhầm lẫn cho trình thu thập dữ liệu và có thể làm ảnh hưởng đến thứ hạng hiển thị của website.
Theo nguyên tắc chung, hãy đảm bảo bạn thêm thuộc tính alt vào tất cả các hình ảnh trên một trang. Điều này bao gồm hình ảnh được sử dụng làm nút. Thuộc tính alt cho các nút có thể là mô tả như “áp dụng ngay bây giờ” hoặc “đăng ký nhận bản tin”, v.v.
Ví dụ về Alt Text: Từ xấu đến tốt nhất
Chúng ta hãy xem một số ví dụ về văn bản thay thế được xếp thứ tự từ xấu đến tốt nhất:
Cách Viết Alt Text cho Các site thương mại điện tử
Một lần nữa, thuộc tính alt cần phải được tối ưu tốt nhất với ngữ cảnh. Điều quan trọng là tránh các văn bản thay thế như: “giày converse giải phóng đôi chân của bạn mua ngay bây giờ.” Điều này có thể kích hoạt cảnh báo spam.
Một thẻ alt tốt khi tối ưu hóa hình ảnh cho các trang web thương mại điện tử có thể là:
<img ="converse_shoes.png" alt=" converse tất cả giày thể thao ngôi sao cho nam giới màu đen">Phát hiện sự cố với Alt Text hình ảnh
Ngay cả khi chúng ta cố gắng hết sức để viết mô tả Alt, nhưng đôi khi chúng ta vẫn sẽ bỏ lỡ một cái gì đó.
Lúc này công việc cần làm là thực hiện audit lại hình ảnh trên website. Đương nhiên bạn không thể cử thế mà check tay từng trang được, một vài công cụ tôi gợi ý sẽ giúp bạn kiểm toán lại hình ảnh trên trang web của mình.
Tại đây tôi sẽ sử dụng chức năng Audit website của công cụ semrush làm demo.
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, tạo ấn tượng chung 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 được điều này, hình ảnh bị hỏng có thể làm tổn thương thứ hạng trang web.
Công cụ audit website sẽ làm nổi bật các nguyên nhân khiến hình ảnh trên website bị hỏng. Sau đó, bạn có thể sẽ cần phải sửa chữa lại chúng:
- URL sai chính tả hoặc đường dẫn tệp không hợp lệ: sửa lỗi chính tả trong URL; nếu tệp hình ảnh đã được di chuyển, hãy sửa URL để trỏ về vị trí hiện tại.
- Hình ảnh không còn tồn tại: nếu tệp hình ảnh bị xóa hoặc bị hỏng, hãy thay đổi nó thành tệp mới; hoặc nếu hình ảnh không cần thiết nữa, hãy xóa nó khỏi mã HTML của trang.
Điều duy nhất cần lưu ý ở đây là sự khác biệt giữa hình ảnh bên trong bị hỏng và hình ảnh bên ngoài bị hỏng. Vì bạn không có quyền kiểm soát các hình ảnh bên ngoài, cách tiếp cận tốt nhất là thay thế chúng hoàn toàn.
Hình ảnh không có thuộc tính Alt
Như đã đề cập trước đây, một thuộc tính alt trống là một cơ hội bị bỏ lỡ cho 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ị.
Tiếp tục sử dụng công cụ audit website để xem lại tất cả các hình ảnh mà không có thuộc tính alt, giúp bạn dễ dàng bước vào và điền vào thuộc tính thay thế bằng văn bản thích hợp.
Lưu ý thuộc tính alt trống ở đây:
<img src="magename.png" alt=" ">Thay đổi điều này thành:
<img src="imagename.png" alt="văn bản thay thế được viết tốt với từ khóa">Câu hỏi thường gặp về Alt Text
Dưới đây là một vài câu hỏi chúng ta thường nghe khi làm việc với các thẻ Alt:
Làm thế nào để tôi tìm thấy thẻ Alt trên Trang?
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 có thẻ alt bạn muốn xem và nhấp vào đó. Mã HTML cho phần tử đó sẽ được tô sáng với tất cả các thuộc tính cho hình ảnh.
Làm thế nào để tôi đọc mô tả Alt trong mã HTML?
Làm thế nào để tôi biết nếu một hình ảnh đã có thuộc tính Alt?
Làm thế nào để tôi thêm thẻ Alt vào tệp JPG?
Tôi có thể sử dụng dấu phẩy và khoảng thời gian trong tăn bản thay thế không?
Hơn nữa, văn bản thay thế được hiển thị khi một hình ảnh không tải đúng cách. Văn bản chất lượng cao đảm bảo trải nghiệm người dùng tốt hơn.
Độ dài tối đa của Alt Tags
Tài liệu tham khảo được sử dụng:
Nguồn: vietmoz.edu.vn
Bản quyền thuộc về Đào tạo SEO VietMoz
Vui lòng không copy khi chưa được sự đồng ý của tác giả
