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

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.