Cách thêm the alt cho hình ảnh

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

Nội dung

• ALT ảnh (Văn bản thay thế) là gì?
• Tại sao thẻ ALT ảnh quan trọng?
  • 1. Thẻ Alt cải thiện khả năng truy cập
  • 2. Thẻ ALT có thể cải thiện mức độ liên quan
  • 3. ALT ảnh có thể giúp bạn xếp hạng trong Google Images
  • 4. Thẻ ALT đóng vai trò là Anchortext cho liên kết hình ảnh
• Cách thêm thẻ ALT vào hình ảnh
• Bạn có nên thẻ ALT cho tất cả các hình ảnh?
• Cách viết thẻ ALT tốt
• 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=“banhkem.png” alt=“ảnh chiếc bánh kem”>0
Good: <img src=“banhkem.png” alt=“ảnh chiếc bánh kem”>1
Best: <img src=“banhkem.png” alt=“ảnh chiếc bánh kem”>2

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.

5/5 - (1 bình chọn)

Phong Nguyen - SEO Expert

Trong SEO, chiến lược bài bản, giá trị hữu ích mang lại cho người dùng sẽ giúp bạn chiến thắng cả trên thứ hạng tìm kiếm và kết quả chuyển đổi.

Khách Hàng Nói Gì Về HapoDigital

Chúng tôi đánh giá Hapodigital là 1 dịch vụ tốt và có tâm. Nhiều dự án rất khó lên và tuyệt vọng thì tôi thường tìm đến Hapo như 1 giải pháp cứu cánh của mình. Và chưa bao giờ để tôi thất vọng.

Bảo ĐiềnCEO của IM Thiên Phúc

Ngách mình thuộc vào dạng khó, có nhiều đối thủ cạnh tranh trên Google, mình đã tìm hiểu về SEO trước đó và có sử dụng dịch vụ SEO của đơn vị trước đó nhưng không hiệu quả. Nhưng nhờ HapoDigital mà giờ toàn bộ từ khóa đang Top 1 và top 2.

Nguyễn NhungKhách Hàng

Dịch vụ Backlink báo của HaPoDigital có ưu điểm đúng deadline và tiến hành đúng kế hoạch Anchor Text mà mình đặt ra. Vì vậy Viết Bài Xuyên Việt đã hợp tác với HaPoDigital cho hơn 50 website và đạt tỷ lệ thành công lên đến 97% giúp website tăng trưởng traffic mạnh mẽ và an toàn.

Trần ThắngCEO của Viết Bài Xuyên Việt

Previous

Next

Sau một thời gian hợp tác lâu dài với HaPoDigital thì mình rất tin tưởng con người ở đây. Các bạn rất nhiệt tình, có trách nhiệm và đặc biệt là luôn hoàn thành tốt không việc. Thiết kế website chuẩn seo, dịch vụ SEO lên top - Tính tiền theo hiệu quả rồi mới lấy tiền khiến mình rất yên tầm.

Phạm Ngọc SơnFounder của WP.mentor

Mình đang sử dụng dịch vụ backlink của HapoDgital. Các bạn tư vấn rất nhiệt tình và đặc biệt kĩ thuật SEO bền vững và an toàn. Các dự án SEO khó được HapoDigital triển khai rất bài bản và lên TOP tốt. Hy vọng hợp tác lâu dài!

Tân RùaKhách Hàng

Mình làm về sức khỏe. Sau khi hợp tác đẩy SEO cho website thì chỉ sau 8 tháng website mình đã tăng traffic gấp 10 lần trước. Bây giờ traffic 1 ngày cũng lên tới 3000/ngày, khách hàng rất nhiều. Cám ơn HapoDigital.

Thu MâyKhách Hàng Thu Mây

Previous

Next

Bài viết liên quan:

Chia sẻ cách xây dựng Backlink bất động sản chất lượng nhất

Xây dựng Backlink bất động sản chất lượng là một trong những hình thức làm SEO rất quan trọng bạn cần thực hiện nếu như

Xem thêm

Thiết kế website bán hàng online giao diện bắt mắt giá rẻ

Thiết kế website bán hàng online chuyên nghiệp là xu thế được được rất nhiều doanh nghiệp và khách hàng cá nhân ưa chuộng hiện

Xem thêm

Dịch vụ thiết kế website theo yêu cầu trọn gói, độc quyền

Thiết kế website theo yêu cầu là dịch vụ thiết kế web chuyên nghiệp được sử dụng rộng rãi hiện nay nhờ nhiều ưu điểm

Xem thêm

Thiết kế website bán hoa online xinh xắn ấn tượng nhất

Ý tưởng kinh doanh cửa hàng hoa có thể là một ý tưởng tuyệt vời nếu bạn có thể kết hợp hiệu quả giữa cửa

Xem thêm

Thiết kế website ô tô đẳng cấp, chuyên nghiệp hút khách hàng

Một trong những chiến lược để kinh doanh xe hơi của các công ty, showroom chính là thiết kế website ô tô. Bằng cách này

Xem thêm

Dịch vụ thiết kế website trường mầm non, trường mẫu giáo đẹp

Thiết kế web hiện nay dần trở bên phổ biến trong nhiều lĩnh vực bởi ưu điểm, lợi ích vượt trội mà website mang lại,