Hướng dẫn chèn thuộc tính title và alt tự động vào link ảnh bài viết

Khi viết bài lâu nay với những người không biết nhiều về SEO thì chúng ta vẫn không thường để ý thuộc tính titlte và thuộc tính alt cho link ảnh của bài viết mà hai thuộc tính này lại rất quan trọng bị trừ điểm SEO nhiều và không có thuộc tính này thì googlebot cũng không tìm thấy từ khóa cho link ảnh và lập chỉ mục được. Dễ thấy nhất là khi bạn chuột phải vào ảnh chọn tìm kiếm hình ảnh trên Google sẽ không thấy ảnh bài viết của mình. Như vậy thêm thuộc tính title và alt cho link ảnh là rất quan trọng và chúng ta nên thêm vào.

Ở đây chúng ta có hai cách thêm như sau:

Cách thêm	Ưu điểm	Nhược đểm
Thêm thủ công trực tiếp	Có thể thêm thuộc tính theo sở thích	Các bài viết cũ phải sửa lại mất thời gian
Thêm tự động	Dễ dàng thêm thuộc tính cho tất cả các bài viết	Thuộc tính cố định bằng tên ảnh cho tất cả bài viết

Bây giờ mình sẽ lấy ví dụ về một hình ảnh mình đặt tên cho ảnh này là them-alt-cho-link-anh, bây giờ nếu mình up hình vào bài viết sau đó mình chuyển qua HTML mình dễ dàng thêm thuộc tính title và alt cho hình ảnh này mình muốn lấy tên nào cũng được ví dụ mình sẽ lấy alt="thêm alt cho link ảnh" chẳng hạn. Trở ngại lớn nhất là blog đã có hàng nghìn bài viết chưa thêm thuộc tính không lẽ giờ bỏ thời gian ra sửa từng bài đến bao giời mới xong. Như vậy chúng ta cần tìm giải pháp thêm thuộc tính tự động. Mình sẽ sữ dụng một đoạn javascript chèn trong mẫu template áp cho hình ảnh này thuộc tính lấy tên mà mình đã đặt tên cho bức ảnh, lấy ví dụ khi mình up bức ảnh sau đây:

Như vậy bên khung soạn thảo HTML sẽ ra đoạn link tương tự như sau:

Copy


<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikDbz6FsU227DdJ0HGAN5_dddaaFsyfekxZphCDe-6N26mMXuiIFCkFrtjEPUIYvHTdGMmKE4lCZxFQmv2ZNde2cH8CnlZi-wafkUG7p0DsMmdGbM9kBwJzQJWfiQXjapFUKS_eE9eGagB/s1600/them-alt-cho-link-anh.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="543" data-original-width="1008" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikDbz6FsU227DdJ0HGAN5_dddaaFsyfekxZphCDe-6N26mMXuiIFCkFrtjEPUIYvHTdGMmKE4lCZxFQmv2ZNde2cH8CnlZi-wafkUG7p0DsMmdGbM9kBwJzQJWfiQXjapFUKS_eE9eGagB/s1600/them-alt-cho-link-anh.png" /></a></div>

Chúng ta sẽ sử dụng jascript thêm thuộc tính title="them-alt-cho-link-anh" trong link sau:

Copy


href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikDbz6FsU227DdJ0HGAN5_dddaaFsyfekxZphCDe-6N26mMXuiIFCkFrtjEPUIYvHTdGMmKE4lCZxFQmv2ZNde2cH8CnlZi-wafkUG7p0DsMmdGbM9kBwJzQJWfiQXjapFUKS_eE9eGagB/s1600/them-alt-cho-link-anh.png"

Thêm thuộc tính alt="them-alt-cho-link-anh" trong link sau:

Copy


src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikDbz6FsU227DdJ0HGAN5_dddaaFsyfekxZphCDe-6N26mMXuiIFCkFrtjEPUIYvHTdGMmKE4lCZxFQmv2ZNde2cH8CnlZi-wafkUG7p0DsMmdGbM9kBwJzQJWfiQXjapFUKS_eE9eGagB/s1600/them-alt-cho-link-anh.png"

Với separator là class mặc định của Blogger khi bạn up ảnh lên và sử dụng hiệu ứng Hộp đèn và bài viết sẽ chỉ có trong hai trang bài viết (iem) và trang tĩnh (static_page) như vậy bạn chỉ cần thêm đoạn javascript trong hai trang này, cách chèn như sau:

Đăng nhập Blogger vào Chủ đề > Chỉnh sửa HTML > chèn đoạn script sau trước </body>

Copy


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

  $('.separator a').each(function(){

    var $a = $(this);

    var filename = $a.attr('href')

    $a.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

  });

  $('.separator img').each(function(){

    var $img = $(this);

    var filename = $img.attr('src')

    $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

  });

});

//]]>

<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() {

  $('.separator a').each(function(){

    var $a = $(this);

    var filename = $a.attr('href')

    $a.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

  });

  $('.separator img').each(function(){

    var $img = $(this);

    var filename = $img.attr('src')

    $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

  });

});

//]]>

</script>

</b:if>

</b:if>

Đoạn script trên chỉ chạy ở trang bài viết hoặc trang tĩnh và sẽ lấy thuộc tính tự động bằng tên mà bạn đã đặt cho bức ảnh. Căn cứ vào đoạn script bạn cần xác định đúng class ở trên là separator giả sử bạn đang sử dụng class hoặc id khác thì thay bằng class hoặc id đó. Vì là lấy tên mặc định của ảnh cho nên sau này khi viết bài bạn nên đặt tên cho ảnh vơi từ khóa có liên quan đến bài viết nhé.

Ngoài ra nếu bạn muốn thêm thuộc tính alt vào tất cả hình ảnh có xuất hiện trong trang bao gồm cà ảnh của tiện ích, ảnh của người nhận xét bạn chỉ cần sử dụng đoạn script sau mà không cần phải quan tâm tới class của nó

Copy


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function() { 

  $('img').each(function(){ 

    var $img = $(this); 

    var filename = $img.attr('src') 

    $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.'))); 

  });

}); 

//]]>

<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<script type='text/javascript'>

//<![CDATA[

$(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>

</b:if>

</b:if>