tu-them-mo-ta-anh

Cách tự động thêm mô tả cho ảnh trong bài viết cho Blogspot

Thẻ mô tả ảnh là một yếu vố khá quan trọng trong SEO hình ảnh. Do vậy mình sẽ hướng đẫn các bạn cách tự động thêm mô tả ảnh trong bài viết cho Blogspot. Nó sẽ một phần nào đó giúp website của bạn có thứ hạng cao hơn trên công cụ tìm kiếm.

Tại sao cần phải thêm mô tả cho ảnh?

Câu hỏi trên chắc hẳn một số bạn rất muốn hỏi. Như chúng ta đã biết cú pháp cơ bản để chèn một bức ảnh là:

<img src="url_to_image" alt="mo_ta_hinh_anh" width="chieu_rong" height="chieu_cao" />

Và thẻ trên có một số thuộc tính như:src, alt, width và height trong đó cái mình cần nói ở đây là thẻ mô tả “alt”. Thẻ alt là một văn bản để mô tả nội dung mà hình ảnh bạn chèn vào bài viết. Nó sẽ giúp bạn hiển thị văn bản đó ra khi hình ảnh của bạn không được hiển thị. Đây là một thẻ cực kỳ quan trọng đối với SEO, do vậy bạn không nên bỏ qua nó.

Tuy nhiên một số bạn khi viết bài trên Blogspot thường sử dụng các nút trên thanh công cụ để chèn ảnh. Khi đó các bạn thường không để ý thêm thuộc tính cho ảnh. Sau này khi biết được tầm quan trọng của thẻ Alt thì lại sửa từng bài viết để thêm nó vào rất mất công. Do vậy sau đây mình sẽ hướng dẫn các bạn cách tự động thêm thẻ mô tả alt cho ảnh trong các bài viết. Nếu bạn nào lười thêm thẻ mô tả cũng có thể dùng cách này cho nhàn.

Cách tự động thêm thẻ mô tả cho ảnh

Để tự động thêm thẻ mô tả, trước tiên các bạn cần đăng nhập vào trang quản lý Blogger.com rồi chọn blog cần thêm. Sau đó các bạn vào Chủ đề rồi chọn Chỉnh sửa HTML, ở đây các bạn tìm kiếm thẻ </body> sau đó copy đoạn mã dưới đây dán vào trước thẻ </body>


<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>
<script type='text/javascript'>
//<![CDATA[
$(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>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
//]]>
</script>

Sau đó lưu lại. Như vậy mỗi hình ảnh trên bài viết của bạn sẽ được tự động thêm thẻ mô tả với nội dung là tên ảnh đó. Chúc các bạn thành công!

4

2 Bình luận

  1. Trang Nguyễn
    06/12/2017
    • TruongKen
      06/12/2017

Viết bình luận