Hotline: 0846 599 665
Alt Text đóng vai trò quan trọng trong việc cải thiện khả năng tiếp cận của trang web. Một Alt text phù hợp không chỉ cung cấp thông tin chi tiết về nội dung hình ảnh mà còn giúp nâng cao thứ hạng tìm kiếm của website. Vậy Alt text là gì? Cách viết và tạo một Alt text chuẩn giúp tối ưu SEO hình ảnh hiệu quả như thế nào? Hãy cùng HEROSEO tìm hiểu chi tiết ở bài viết bên dưới nhé.
Alt Text là gì?
Alt Text, viết tắt của “Alternative Text” hay còn gọi là văn bản thay thế, là một thuộc tính HTML được áp dụng cho thẻ hình ảnh để mô tả nội dung của hình ảnh đó. Khi hình ảnh không thể hiển thị trên website, Alt Text sẽ được hiển thị thay thế. Điều này giúp người dùng hiểu được nội dung của hình ảnh ngay cả khi nó không thể được tải lên.
Mặc dù Alt Text là phần mã của HTML, nhưng nó chỉ mô tả nội dung của hình ảnh mà không bao gồm toàn bộ thuộc tính của thẻ Alt.
Alt Text giúp công cụ tìm kiếm hiểu được nội dung mô tả của hình ảnh và có tác động tích cực đến thứ hạng của website trên công cụ tìm kiếm.
Tìm hiểu về Alt text là gì
Thẻ Alt là gì?
Thẻ Alt, còn được gọi là “thuộc tính Alt” hoặc “mô tả Alt”, là một thuộc tính HTML được áp dụng cho thẻ hình ảnh (<img>) để mô tả ngắn gọn nội dung của hình ảnh đó.
Ngoài ra, thẻ Alt còn giúp công cụ tìm kiếm hiểu được nội dung của hình ảnh, từ đó hiển thị kết quả phù hợp với truy vấn của người dùng.
Cấu trúc chung của thẻ Alt trong HTML như sau:
<img src="URL của ảnh" alt="Văn bản thay thế">
Ví dụ, nếu bạn có một hình ảnh của một con mèo đang ngủ, thẻ Alt có thể trông như sau:
<img src="meo-dang-ngu.jpg" alt="Con mèo đang ngủ trên ghế">
Khái niệm thẻ alt là gì
Tại sao Alt Text quan trọng đối với SEO?
Tăng khả năng tiếp cận
Alt Text giúp mô tả hình ảnh cho những người dùng không thể nhìn thấy hình ảnh vì lý do kỹ thuật hoặc do họ có vấn đề về thị giác. Đối với người dùng khiếm thị, Alt Text có thể được đọc to bởi các phần mềm đọc màn hình, giúp họ hiểu được nội dung của hình ảnh.
Ngoài ra, khi kết nối mạng yếu hoặc trình duyệt không tải được hình ảnh, Alt Text sẽ hiển thị thay thế để người dùng vẫn có thể nắm bắt được thông tin quan trọng.
Tối ưu hóa SEO hình ảnh
Alt Text không chỉ cải thiện trải nghiệm người dùng mà còn có vai trò quan trọng trong việc tối ưu hóa công cụ tìm kiếm (SEO). Công cụ tìm kiếm sử dụng Alt Text để hiểu nội dung của hình ảnh, từ đó xác định tính liên quan và xếp hạng trang web của bạn. Việc thêm từ khóa mục tiêu vào Alt Text có thể giúp cải thiện thứ hạng của trang web trên kết quả tìm kiếm.
Vì sao alt text lại quan trọng trong SEO hình ảnh
Phân biệt Alt text và Title image
Cả Alt Text và Title Image đều đóng vai trò quan trọng trong việc cung cấp thông tin về hình ảnh trên website, tuy nhiên, nhiều người thường nhầm lẫn giữa hai thuộc tính này và nghĩ rằng chúng là một. Trên thực tế, chúng là hai thuộc tính hoàn toàn khác nhau, với mục đích và chức năng riêng biệt.
| Alt text | Title image |
| Alt Text, hay còn gọi là “thuộc tính Alt” (Alt attribute), là văn bản thay thế được sử dụng trong mã HTML để mô tả nội dung của hình ảnh. Mục đích chính của Alt Text là giúp người dùng gặp khó khăn trong việc nhận biết hình ảnh và các công cụ tìm kiếm có thể hiểu được nội dung của hình ảnh đó. Ngoài ra, Alt Text giúp tối ưu hóa hình ảnh trên kết quả tìm kiếm Google Image. Bằng cách thêm từ khóa mục tiêu vào Alt Text, bạn có thể cải thiện thứ hạng của hình ảnh và trang web trên kết quả tìm kiếm. Ví dụ, nếu bạn có một hình ảnh về một chiếc xe ô tô màu đỏ, bạn có thể viết Alt Text như sau:
| Title Image, hay còn gọi là “thuộc tính Title” (Title attribute), là văn bản cung cấp thông tin bổ sung về ngữ cảnh của hình ảnh và chỉ hiển thị khi người dùng di chuột vào hình ảnh. Title Image không ảnh hưởng đến xếp hạng của website trên các công cụ tìm kiếm, nhưng nó có thể cải thiện trải nghiệm người dùng bằng cách cung cấp thêm thông tin. Title Image thường được sử dụng để thêm mô tả chi tiết hơn về hình ảnh hoặc cung cấp thông tin bổ sung mà không cần thiết phải hiển thị liên tục trên trang. Ví dụ, với cùng hình ảnh chiếc xe ô tô màu đỏ, bạn có thể viết Title Image như sau:
|
Cách phân biệt thẻ Title Image và thẻ Alt
Cách viết và tạo một Alt Text chuẩn giúp tối ưu SEO hiệu quả
Alt Text không chỉ đơn thuần là mô tả hình ảnh, mà còn là cơ hội để tích hợp từ khóa trọng tâm có liên quan, làm cho nội dung phong phú hơn và mang lại trải nghiệm tốt cho người dùng. Dưới đây là các nguyên tắc và hướng dẫn chi tiết để viết và tạo một Alt Text chuẩn:
1. Mô tả hình ảnh một cách khách quan
Alt Text sẽ hiển thị khi hình ảnh không tải lên hoặc tải lên không thành công, do đó, điều quan trọng là mô tả hình ảnh một cách chính xác và khách quan để người dùng vẫn có thể hiểu được nội dung hình ảnh khi không thấy ảnh.
Ví dụ:
<img src="hoa-anh-dao.jpg" alt="Hoa anh đào nở rộ vào mùa xuân tại công viên Ueno, Nhật Bản">
2. Cung cấp ngữ cảnh cho hình ảnh
Alt Text nên cung cấp thông tin ngữ cảnh phù hợp để công cụ tìm kiếm có thể thu thập và lập chỉ mục chính xác. Điều này giúp hình ảnh của bạn dễ dàng được tìm thấy hơn khi người dùng tìm kiếm những từ khóa liên quan.
3. Ngắn gọn, súc tích
Đảm bảo Alt Text ngắn gọn, thường là dưới 125 ký tự, vì nhiều màn hình và trình đọc màn hình chỉ có thể hiển thị khoảng đó ký tự. Tránh các mô tả dài dòng và không cần thiết.
Ví dụ: <img src="banh-mi.jpg" alt="Bánh mì Việt Nam với thịt nướng và rau sống">
4. Sử dụng từ khóa hợp lý
Sử dụng từ khóa mục tiêu trong Alt Text là một cách hiệu quả để tối ưu hóa hình ảnh cho SEO. Tuy nhiên, chỉ nên thêm từ khóa khi thấy hợp lý và phù hợp với mô tả hình ảnh, tránh nhồi nhét từ khóa không cần thiết.
Ví dụ: <img src="du-lich-da-nang.jpg" alt="Bãi biển Mỹ Khê ở Đà Nẵng, một điểm đến du lịch nổi tiếng">
5. Tránh nhồi nhét từ khóa
Google sẽ phạt nếu bạn nhồi nhét từ khóa mà không cung cấp ngữ cảnh cho hình ảnh. Alt Text cần được viết một cách tự nhiên, không nên thêm quá nhiều từ khóa chỉ để tối ưu hóa.
6. Tránh dùng văn bản trong hình ảnh
Công cụ tìm kiếm không thể đọc văn bản trong hình ảnh, vì vậy tránh sử dụng văn bản trong hình ảnh. Thay vào đó, hãy thêm mô tả cho hình ảnh trong Alt Text.
7. Không dùng các cụm từ thừa
Tránh sử dụng các cụm từ như “hình ảnh của”, “bức ảnh của” trong Alt Text vì chúng không cần thiết và làm dài dòng.
8. Sử dụng thẻ longdesc
Trong trường hợp bạn có các hình ảnh phức tạp, cần mô tả dài hơn, bạn có thể sử dụng thẻ longdesc để cung cấp thêm chi tiết.
Ví dụ: <img src="ban-do.jpg" alt="Bản đồ khu vực quận 1, TP. Hồ Chí Minh" longdesc="chi-tiet-ban-do.html">
9. Dùng Alt Text cho các nút Form
Nếu bạn sử dụng hình ảnh làm nút “gửi” hay một nút lệnh nào đó, hãy cung cấp thuộc tính Alt mô tả chức năng của nút đó.
Ví dụ:
<img src="dang-ky.jpg" alt="Đăng ký ngay">
<img src="tim-kiem.jpg" alt="Tìm kiếm">
Hướng dẫn cách viết và tạo alt text chuẩn, hiệu quả trong SEO hình ảnh
Liệu có nên thêm Alt Text vào tất cả các hình ảnh trong bài viết hay không?
Việc thêm Alt Text vào tất cả các hình ảnh là một suy nghĩ sai lầm phổ biến. Không phải tất cả các hình ảnh đều cần Alt Text, và trong một số trường hợp, việc thêm Alt Text có thể không cần thiết hoặc thậm chí gây phiền toái cho người dùng. Dưới đây là 4 trường hợp không cần thêm Alt text:
Hình ảnh trang trí
Nếu hình ảnh tồn tại 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. Các hình ảnh này không cung cấp giá trị thông tin cho nội dung của trang web và chỉ đóng vai trò làm đẹp giao diện.
Ví dụ, một số trang web sử dụng các biểu tượng để tách biệt nội dung hoặc làm nền, và những hình ảnh này không cần Alt Text. Thêm Alt Text cho những hình ảnh này có thể làm phiền người dùng sử dụng trình đọc màn hình, khi mà thông tin không có giá trị thực sự đối với họ.
Ví dụ: <img src="icon-decorative.jpg" alt="">
Hình ảnh không cần thiết cho ngữ cảnh
Hình ảnh không mang ý nghĩa quan trọng hoặc không cần thiết cho ngữ cảnh nội dung cũng không cần Alt Text. Ví dụ, trên một trang web của thợ sửa ống nước, hình ảnh một bồn tắm và nến không cung cấp thông tin hữu ích cho người dùng khiếm thị và không cần thiết phải mô tả bằng Alt Text.
Liệu có nên thêm alt text vào tất cả các hình ảnh trong SEO không?
Thuộc tính Alt 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 (alt=””). Điều này giúp tránh việc trình đọc màn hình đọc tên tệp hình ảnh, điều này có thể gây khó chịu và không cung cấp giá trị thông tin. Hầu hết các trình đọc màn hình sẽ bỏ qua những hình ảnh có thuộc tính Alt trống, tạo ra trải nghiệm tốt hơn cho người dùng.
Ví dụ: <img src="spacer.gif" alt="">
Hình ảnh cần Alt Text
Ngược lại, đối với những hình ảnh mang thông tin quan trọng hoặc có ý nghĩa trong ngữ cảnh của trang web, việc thêm Alt Text là cần thiết. Những hình ảnh này bao gồm hình ảnh minh họa cho nội dung, hình ảnh chứa thông tin quan trọng hoặc hình ảnh liên quan đến các chức năng của trang web như nút bấm, biểu đồ, hoặc ảnh sản phẩm. Alt Text cho những hình ảnh này giúp người dùng khiếm thị hiểu được nội dung và ngữ cảnh của hình ảnh, đồng thời cải thiện khả năng SEO của trang web.
Ví dụ: <img src="product.jpg" alt="Máy xay sinh tố hiệu XYZ màu đỏ">
Phương pháp hay nhất về Alt Text cho SEO Image
Các phương pháp tốt nhất để tạo alt text thân thiện với SEO
Tối ưu hóa Alt Text là một phần quan trọng của SEO hình ảnh, giúp cải thiện khả năng tìm thấy và xếp hạng của trang web trên các công cụ tìm kiếm. Dưới đây là các phương pháp hay nhất để đảm bảo rằng Alt Text của bạn thân thiện với SEO và mang lại trải nghiệm tốt nhất cho người dùng:
- Tránh sử dụng hình ảnh thay cho từ ngữ: Các công cụ tìm kiếm không thể “đọc” hình ảnh như con người, do đó việc sử dụng hình ảnh thay vì văn bản có thể gây nhầm lẫn cho các trình thu thập thông tin và ảnh hưởng đến thứ hạng của trang web. Thay vì sử dụng hình ảnh chứa văn bản, hãy sử dụng văn bản thuần túy để mô tả nội dung.
- Tối ưu hóa Alt Text cho các nút hình ảnh: Nếu bạn sử dụng hình ảnh làm nút trên trang web của mình, hãy cung cấp Alt Text mô tả chức năng của nút đó. Ví dụ, nếu bạn có nút “Đăng ký ngay bây giờ” hoặc “Đăng ký nhận bản tin” được thể hiện bằng hình ảnh, hãy chắc chắn rằng Alt Text mô tả chính xác hành động mà người dùng sẽ thực hiện khi nhấp vào nút đó.
Ví dụ về Alt Text: Từ tệ đến tốt nhất
Dưới đây là một số ví dụ về Alt text được sắp xếp theo thứ tự từ chưa tốt đến tốt hãy cùng HEROSEO xem qua nhé:
Tham khảo ví dụ cụ thể về Alt text từ tệ đến tốt nhất
Cách viết Alt Text cho các trang thương mại điện tử
Một lần nữa, văn bản thay thế hay Alt text cần được tối ưu hóa phù hợp với ngữ cảnh. Quan trọng là tránh những mô tả thay thế như: “giày converse giải phóng đôi chân của bạn, mua ngay lập tức.” Điều này có thể gây cảnh báo spam.
Một thuộc tính alt tốt khi tối ưu hóa ảnh cho các trang thương mại điện tử có thể là:
<img src="converse_shoes.png" alt="giày converse thể thao màu đen cho nam giới">
Một số vấn đề thường gặp với Alt Text hình ảnh
Việc tạo Alt text khi tối ưu SEO image đôi khi sẽ xảy ra một số vấn đề, vì vậy khi audit website, bạn cần kiểm tra kĩ xem hình ảnh có gặp vấn gì hay không.
Hình ảnh bị hỏng
Hình ảnh bị lỗi Hình ảnh hỏng, mờ, chất lượng kém sẽ tạo ấn tượng xấu cho trang web, dẫn đến việc bị đánh giá thấp dù nội dung hay sản phẩm của bạn có tốt đến đâu. Công cụ tìm kiếm cũng nhận diện và xếp hạng thấp website của bạn.
Công cụ kiểm tra website sẽ xác định các nguyên nhân khiến hình ảnh bị lỗi, từ đó bạn có thể sửa chữa:
- URL sai hoặc không hợp lệ: Sửa lỗi chính tả trong URL hoặc cập nhật URL để trỏ đến đúng vị trí nếu tệp hình ảnh đã di chuyển.
- Hình ảnh không tồn tại: Nếu tệp hình ảnh bị xóa hoặc di chuyển, hãy xóa nó khỏi HTML của trang nếu không cần thiết. Cần phân biệt rõ hình ảnh bị lỗi bên trong hay bên ngoài. Nếu hình ảnh không thể truy cập, hãy thay thế chúng.
Hãy xác định đúng giữa hình ảnh bị hỏng từ bên trong hay bên ngoài. Nếu hình ảnh không ổn hãy xoá bỏ và thay bằng ảnh khác.
Hình ảnh không thuộc tính Alt
Hình ảnh không có thuộc tính Alt Hình ảnh thiếu thuộc tính Alt Text giống như bỏ lỡ cơ hội xếp hạng hình ảnh tốt hơn và không mang lại trải nghiệm tốt cho người dùng, đặc biệt là những người khiếm thị.
Hãy sử dụng các công audit website để kiểm tra lại các hình ảnh không có thuộc tính Alt, điều này giúp bạn phát hiện và điền vào thuộc tính các văn bản phù hợp.
Ví dụ:
- Hình ảnh có thuộc tính trống:
<img src="magename.png" alt=" "> - Thay đổi thành:
<img src="imagename.png" alt="văn bản thay thế được viết tốt với từ khóa">
Các vấn đề thường gặp với Alt text khi tối ưu hóa SEO hình ảnh
Câu hỏi thường gặp về Alt Text
Làm cách nào để tôi tìm thẻ Alt trên Trang?
Di chuyển chuột đến vị trí bất kỳ trên trang, nhấp chuột phải và chọn “Inspect” từ menu. Mã nguồn của trang sẽ hiển thị ở 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 thẻ alt và nhấp vào đó. Mã HTML của phần tử này sẽ được làm nổi bật cùng với tất cả các thuộc tính của hình ảnh.
Làm cách nào để tôi đọc mô tả Alt trong mã HTML?
Sau khi chọn “Inspect”, tìm thẻ HTML tương ứng trong bảng điều khiển mã nguồn. Văn bản thay thế được hiển thị sau thẻ “alt=”, và những gì tiếp theo là mô tả của nó.
Làm sao để biết một hình ảnh đã có thuộc tính Alt?
Khi kiểm tra mã nguồn của trang, nếu thẻ alt sau “alt=” chỉ chứa hai dấu ngoặc kép mà không có nội dung, thì thuộc tính alt đang trống, nghĩa là không có văn bản thay thế.
Tổng kết
Việc sử dụng Alt text một cách chính xác không chỉ nâng cao trải nghiệm người dùng mà còn tối ưu hóa SEO cho hình ảnh của bạn. HEROSEO hy vọng rằng với những thông tin mà chúng tôi đã chia sẻ từ khái niệm đến vai trò và cách tạo alt text chuẩn sẽ giúp ích bạn trong quá trình tối ưu hóa website và và đạt được hiệu quả SEO hình ảnh cao hơn nhé!
No comments yet