Thêm thuộc tính “alt” cho tất cả hình ảnh với jQuery

Mã giảm giá AZDIGI

Bài viết này mình sẽ hướng dẫn cho các bạn cách thêm thuộc tính "alt" vào tất cả các hình ảnh trong website bằng jQuery nếu hình ảnh đó thiếu thuộc tính alt. Thuộc tính alt cho hình ảnh cũng là một tiêu chuẩn để các công cụ tìm kiếm tìm thấy hình ảnh của bạn và được xem là cần thiết trong SEO.

7 thủ thuật công nghệ có thể “cứu sống” bạn
Loại bỏ tham số phiên bản trong WordPress từ các tập tin JS và CSS
[Infographic] Lưu lượng truy cập Internet: Mobile vs Desktop

Như các bạn đã biết thì điều cần thiết cơ bản khi thiết kế một website là phải tối ưu tốt các phần tử trong trang, điều này sẽ làm cho các công cụ tìm kiếm (Search Engine Optimization – SEO) đánh giá cao website của bạn.

Bài viết này mình sẽ hướng dẫn cho các bạn cách thêm thuộc tính “alt” vào tất cả các hình ảnh trong website bằng jQuery nếu hình ảnh đó thiếu thuộc tính alt. Thuộc tính alt cho hình ảnh cũng là một tiêu chuẩn để các công cụ tìm kiếm tìm thấy hình ảnh của bạn và được xem là cần thiết trong SEO.

Code JavaScript:

$(document).ready(function(){
	$('img').each(function () {
		var $img = $(this);
		var alt = $img.attr("alt");
		if (typeof alt == typeof undefined || alt == false) {
			var title = $img.attr("title");
			if (typeof title != typeof undefined && title != false) {
				$img.attr("alt", title);
			}
		}
		else {
			var filename = $img.attr("src");
			$img.attr("alt", filename.substring(filename.lastIndexOf("/") + 1, filename.lastIndexOf('.')));
		}
	});
});

Hoạt động của vài dòng ở trên là quét tất cả hình ảnh trong website của bạn (dĩ nhiên là hình ảnh đó được sử dụng bằng thẻ img), kiểm tra thuộc tính alt của hình ảnh có tồn tại và có giá trị thì cho qua, còn nếu không có thuộc tính alt thuộc tính alt không có giá trị thì sẽ lấy tên của hình ảnh đặt làm giá trị của thuộc tính alt và thêm vào hình ảnh.

Đoạn code này bạn có thể đặt vào thẻ <script type=”text/javascript”>…</script> trước thẻ </body>. Hoặc tạo một file js nào đó và gọi chúng vào.

Gợi ý: Các bạn nên đặt tên hình ảnh đúng với ý nghĩa của hình ảnh để thẻ đoạn code này phát huy được tối đa công dụng.

Chia sẻ bài viết với:

COMMENTS

WORDPRESS: 2
  • comment-avatar

    sao mình thêm không được nhỉ :/ chẳng có tác dụng

    • comment-avatar

      Bạn đưa đoạn code ở trên vào trong hàm $( document ).ready() thử xem đã được chưa 🙂
      Mình vừa cập nhật lại code.

  • Sunwah PearlHồ Tràm CoastarCoastar Hồ TràmCoastar EstatesKhu dân cư Nguyễn BìnhKDC Nguyễn BìnhDự án Nguyễn BìnhNam Việt ÁNine SouthĐất Hòa XuânĐất nền Hòa XuânDat Hoa XuanDat nen Hoa Xuan