Cách tự động thêm mô tả cho ảnh trên Blogspot để tối ưu SEO

Tại sao phải tối ưu hóa SEO ảnh trên Blogspot?

Trước tiên chúng ta cần biết làm những gì để tối ưu SEO trên Blogspot. SEO ảnh chúng ta chỉ cần có đầy đủ thẻ tiêu đề (alt), chú thích cho ảnh. Thường chúng ta thường phải thêm miêu tả cho ảnh bằng mã sau:

<img alt="mo ta hinh anh" src="/img.png" />

Tuy nhiên làm cách này một cách thủ công sẽ rất vất cả cho các bạn nếu số lượng ảnh trong bài viết lớn, nhất là một số bạn làm blog chia sẻ ảnh. Tối ưu hóa SEO ảnh nói chung là giúp chúng ta có thứ hạng tìm kiếm cao khi từ khóa được tìm kiếm dạng hình ảnh, không những thế nó còn giúp google đánh giá website của bạn tốt hơn khi có đầy đủ các thẻ cần thiết.

Làm sao để tự động tối ưu SEO ảnh trên Blogspot?

Để tự động thêm thẻ mô tả cho ảnh, chúng ta chỉ cần copy đoạn mã JavaScrip sau dán vào trước thẻ </body> và sau đó lưu lại và hưởng thụ thành quả

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

Kết Luận

Như vậy là mỗi khi bạn đăng bài viết, tất cả hình ảnh của bạn sẽ được tự động thêm một thẻ mô tả dựa vào tên của file ảnh mà các bạn không cần phải sửa code từng cái một. Một lưu ý nhỏ cho các bạn khi sử dụng code là nếu các bạn muốn seo từ khóa gì thì đổi tên ảnh thành từ khóa đó. Ví dụ: muốn SEO "ảnh girl xinh" thì tên file ảnh bạn đổi là "anh-girl-xinh.png" khi đó với code này thì thẻ alt sẽ được tự động thêm là "anh-girl-xinh". Chúc các bạn thành công!