Code SEO tự động thêm ALT và Title vào hình ảnh cho Blogger

Chào bạn, có lẽ ai cũng có những lúc viết bài mà quên không thêm thẻ Alt với Title cho hình ảnh bài viết điều này sẽ không tốt cho việc SEO bài viết với hình ảnh. Hôm nay Nguyen Ha sẽ hướng dẫn các bạn dùng javascript tự động thêm Alt & Title cho hình ảnh Blogspot để nó tự SEO ảnh tự động mà không cần nhiều thao tác.

Code SEO tự động thêm ALT và Title vào hình ảnh cho Blogger

Tại sao phải tối ưu SEO hình ảnh và tự động thêm thẻ Alt và Title

Bởi vì, những hình ảnh trên blog là một trong những cái đáng chú ý nhất để thu hút lưu lượng truy cập cho blogspot của bạn vì một số người dùng rất thích tìm kiếm bằng hình ảnh nên rất cần thiết cho việc SEO hình ảnh.

Cách thêm code SEO tự động thêm Atl và Title cho Blogpsot

Đầu tiên, các bạn vào chỉnh sửa HTML => Ctrl + F => Tìm mã </body> trong mẫu blog của bạn, sau đó sao chép và dán mã sau lên 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>
Rồi sau đó lưu lại và kiểm tra bằng f12 xem thử nha. Mỗi hình ảnh trong blog sẽ tự động thêm ALT cho hình ảnh, nó giúp chúng ta seo hình ảnh khi quên thêm thẻ, rất tiện lợi đúng không nào

Lời kết:

Như vây, Nguyen Ha vừa chia sẻ cho bạn cách thêm code tự động thêm Alt và Title vào hình ảnh giúp tốt cho SEO. Hi vọng bài viết tôi chia sẻ hữu ích cho bạn, nếu có thắc mắc hay ý kiến vui lòng comment xuống dưới. Chúc bạn thành công!

Đăng nhận xét

Mới hơn Cũ hơn

Nhận xét Mới