Tự động thêm thuộc tính Title và Alt cho hình ảnh trên Blogspot

Chia sẻ code tự động thêm thuộc tính Alt, Title cho hình ảnh trong bài viết Blogspot giúp các blogger tiết kiệm được thời gian trong quá trình viết bài và là thủ thuật rất có ích cho những blog chuyên về hình ảnh.

Nhắc đến thẻ Alt,Title là các Seoer nghĩ ngay đến việc SEO hình ảnh vì google thông qua các thuộc tính Alt và title đó để có thể biết hình ảnh đó nói về cái gì, và nếu hình ảnh không hiển thị thì nó sẽ hiển thị là text, google rất ưu tiên những hình ảnh có thẻ Alt, thẻ này có thể chèn thủ công bằng cách chỉnh sửa tại khung soạn thảo khi chuyển qua tab HTML.

Việc thêm các thuộc tính Alt, Title này đôi khi sẽ làm chúng ta mất rất nhiều thời gian cho việc thêm vào phần mô tả này nếu ta viết 1 bài viết có rất nhiều ảnh và mỗi ảnh lại cần có Alt - Title khác nhau. Một thủ thuật nhỏ sử dụng 1 đoạn mã javascript bên dưới  sẽ giảm bớt phần nào trong quá trình phát triển web. Đoạn script dưới đơn giản là lấy luôn tên của ảnh làm phần gợi ý để thêm vào thuộc tính của thẻ "Alt" & "Title" của bất kỳ bức ảnh nào.

Các bạn làm như sau:

B1: Bạn đăng nhập blog => Vào phần mẫu => Chỉnh Sửa HTML => Tìm thẻ </body> (tìm bằng cách Ctrl + F tìm với từ </body>)

B2: Paste đoạn code này vào trên thẻ </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'>
//<=!=[=C=D=A=T=A=[
$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
  });
});
//]=]=> </script>
<script type='text/javascript'>
//<=!=[=C=D=A=T=A=[
$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
  });
});
//]=]=> </script>

Save Template lại và xem kết quả. (Nhưng nếu bạn quan tâm đến SEO hình ảnh thì bạn nên tự làm bằng tay thì vẫn tốt hơn ;)

Chú ý: Đoạn script trên lấy luôn tên của ảnh để để thêm vào thuộc tính của thẻ "Alt" & "Title"  vì vậy bạn cần chú ý đặt tên ảnh cho phù hợp.

 Like hoặc Share nếu thấy bài viết có ích!