Code chèn thẻ Alt tiêu đề hình ảnh tự động cho blogspot


Thẻ alt (alternative information) là một đoạn văn bản mô tả nội dung của hình ảnh mà bạn tải lên. Trong trường hợp vì một lí do nào đó mà hình ảnh không thể hiện lên thì đoạn nội dung đó sẽ hiện lên cho người dùng biết hình ảnh đó nói đến nội dung gì.

Thêm vào đó thẻ này sẽ giúp cho bot của Google hiểu được nội dung hình ảnh và dựa vào đó trả lại kết quả tìm kiếm là hình ảnh của bạn khi người dùng tìm kiếm.


Tầm quan trọng của thẻ alt.

Lẽ đương nhiên là việc thêm thẻ alt rất quan trọng trong việc SEO hình ảnh. Sẽ là một thiếu sót rất lớn nếu như bạn không thêm thẻ này cho hình ảnh mà bạn tải lên.

- Thứ nhất: đối với người dùng việc thêm thẻ này là một cách nâng cao trải nghiệm cho người dùng. Khi hình ảnh bạn tải lên không thể hiển thị người dùng sẽ cảm thấy khó chịu vì không thể biết hình ảnh đó nói đến điều gì. Vậy nên khi thêm thẻ alt người dùng dù không nhìn thấy ảnh nhưng vẫn có thể biết hình ảnh nói về điều gì, giảm thiểu sự khó chịu ở người dùng.

- Thứ hai: Bot của Google không thể hiểu hình ảnh của bạn nói gì nếu bạn không thêm thẻ alt. Google sẽ dựa vào nội dung thẻ này để so sánh với tìm kiếm của người dùng. Nếu nội dung hình ảnh mà người dùng tìm trùng hợp với nội dung thẻ alt trong bức ảnh của bạn thì bức ảnh của bạn sẽ hiển thị trong kết quả tìm kiếm của người dùng.

Cách thêm thẻ alt tự động trên Blogspot.

Trước tiên các bạn tìm đoạn code bên dưới xem mình đã có chưa, nếu chưa thì thêm vào.
  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>



"Click vào để xem ảnh gốc với chất lượng tốt hơn"

Sau đó bạn chèn đoạn code bên dưới vào vị trí như hình ảnh sau đó nhấn lưu lại.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='imgus' style='display:none;'><data:blog.pageName/></div>
<script type='text/javascript'>
 //<![CDATA[
$(document).ready(function(){$(".post-body img").each(function(){var t=$(this),e=document.getElementById("imgus").innerHTML;t.attr("title",e),t.attr("alt",e)})});
 //]]>
 </script>

</b:if>



"Click vào để xem ảnh gốc với chất lượng tốt hơn"


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

No comments: