Tự động chèn thẻ Alt và Title cho ảnh trong Blogspot

Bạn đang cần tìm code tự động thêm thuộc tính Alt - Title cho ảnh trên Blogspot. Trong bài viết này itechrum.com xin chia sẻ code tự động thêm thuộc tính Alt - Title cho thẻ img trong Blogspot, làm sao để bài viết chuẩn SEO hơn, đây là một thủ thuật rất hữu ích mà các bạn cần nên biết và áp dụng cho trang blog của mình.

Thẻ alt và title là gì?

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.

Thẻ ALT: Với thuộc tính này, chúng sẽ xác định thông tin thay thế cho hình ảnh mà bạn chọn đăng. Điều này rất quan trọng khi chẳng may hình ảnh bị lỗi không thể mở lên được, và chúng sẽ được thay thế bằng văn bản.

Thẻ TITLE: Với thuộc tính này sẽ giúp các bạn xác định tiêu đề của hình ảnh mà bạn đang đăng, đó là một mô tả ngắn và sẽ hiện lên khi người xem di chuột vào hình ảnh đó.

Làm cách nào để thêm thẻ alt và title cho hình ảnh trên Blogger?

Trên Blogger 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 code dưới đây mình chia sẻ 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ó trên Blog.

Cách thêm code Tự động thêm thuộc tính Alt - Title cho thẻ IMG Blogspot như sau:

Bước 1: Bạn đăng nhập Blog ➔ Chủ đề ➔ Chỉnh Sửa HTML ➔ Tìm thẻ </body> (ở cuối)

Bước 2: Bạn copy đoạn code bên dưới và dán bên trên thẻ </body>.

Bạn lựa chọn đoạn code phù hợp với template đang sử dụng nhé

Code 1:

</script>
    <script type='text/javascript'>
//<![CDATA[
  $('.blog-posts img').each(function(){
    var $img = $(this);
    var postTitle = $('.entry-title').first().text(); 
    $img.attr('title', postTitle); 
    $img.attr('alt', postTitle); 
});
//]]>  
</script>
Copy

Code 2:

  <script type='text/javascript'>
//<![CDATA[
  $('.blogPts img').each(function(){
    var $img = $(this);
    var postTitle = $('.pTtl').first().text(); 
    $img.attr('title', postTitle); 
    $img.attr('alt', postTitle); 
});
//]]>  
</script>

Copy

Code 3:

type='text/javascript'/>
<script type='text/javascript'>
$(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'>
$(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> 

Copy

Lưu ý: Thay đổi thẻ class cho phù hợp với template.

Bước 3: Cuối cùng Lưu mẫu lại và kiểm tra.

Chúc các bạn thành công!