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

Xem

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 titlealt 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ểmNhược đểm
Thêm thủ công trực tiếpCó thể thêm thuộc tính theo sở thíchCác bài viết cũ phải sửa lại mất thời gian
Thêm tự độngDễ dàng thêm thuộc tính cho tất cả các bài viếtThuộ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:

them-alt-cho-link-anh

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


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

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBnMIt0YcbFLVvXugBJ7csHGd4EfLYxvfOLlEX-Ht742eR2OGUN7CILK6jOHtD941CuKhOzUaIlTeFP2Wlll0PTLldwo2C2PZeOPxt1Jp_Mn-YEKL-9-k3PqdygpHLia-i6qRX_2agnipQ/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/AVvXsEhBnMIt0YcbFLVvXugBJ7csHGd4EfLYxvfOLlEX-Ht742eR2OGUN7CILK6jOHtD941CuKhOzUaIlTeFP2Wlll0PTLldwo2C2PZeOPxt1Jp_Mn-YEKL-9-k3PqdygpHLia-i6qRX_2agnipQ/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:


href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBnMIt0YcbFLVvXugBJ7csHGd4EfLYxvfOLlEX-Ht742eR2OGUN7CILK6jOHtD941CuKhOzUaIlTeFP2Wlll0PTLldwo2C2PZeOPxt1Jp_Mn-YEKL-9-k3PqdygpHLia-i6qRX_2agnipQ/s1600/them-alt-cho-link-anh.png"


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


src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBnMIt0YcbFLVvXugBJ7csHGd4EfLYxvfOLlEX-Ht742eR2OGUN7CILK6jOHtD941CuKhOzUaIlTeFP2Wlll0PTLldwo2C2PZeOPxt1Jp_Mn-YEKL-9-k3PqdygpHLia-i6qRX_2agnipQ/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>


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


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


Nhược điểm của cách này nếu chúng ta đã thêm thuộc tính vào link ảnh của tiên ích từ trước thì thuộc tính này sẽ bị thay đổi theo đoạn script ở trên.

Tags: SEOtemplatetìm kiếmscript

Phổ biến trong tuần

Tin mới

  • Monarque Hotel 4* Đà Nẵng
    Monarque Hotel 4* Đà Nẵng

    *Monarque Hotel là một trong những ks hoang gia tốt ở Đà Nẵng. Ks tọa lạc trên đường Võ Nguyên Gíap nằm ngay bãi tắm Mỹ Khê thơ mộng, đây cũng là bãi...

  • Chez Carole Resort 4* Phú Quốc
    Chez Carole Resort 4* Phú Quốc

    *Với một vị trí tuyệt đẹp trên đảo PQ khu nghĩ dưỡng Chez Carole là nơi vô cùng lý tưởng cho kỳ nghĩ của bạn khi đến với đảo ngọc. Chez Carole đc xây...

  • Saphir Hotel 4* Đà Lạt
    Saphir Hotel 4* Đà Lạt

    *Đà Lạt lun là điểm đến lý tưởng dành cho mọi du khách. Còn gì tuyệt vời hơn khi đc trải qua một kỳ nghĩ thú vị tại Tp sương mù với những cảnh sắc...

  • Lazi Beach Resort 4* Bình Thuận
    Lazi Beach Resort 4* Bình Thuận

    *Lazi Beach được xây dựng trên khu bờ biển với những nét độc đáo hiếm nơi nào có được. Những thảm co xanh trải dài dọc bờ biển, những thân cây dương...

  • Resort 5* Mer Perle Hòn Tằm
    Resort 5* Mer Perle Hòn Tằm

    *Mer Perle Hòn Tằm  là resort tọa lạc trên đảo hòn tằm giữa vịnh Nha Trang, khoảng không gian hoang sơ với những thảm cỏ xanh mướt và bờ cát...

  • Rong Biển Chiên Tỏi
    Rong Biển Chiên Tỏi

    *Thành Phần: -Tỏi tươi -Rong biển -Dầu ăn -Thịt sấy khô (nếu có) *Cách làm: -Cho dầu ăn vào chảo, sau khi nóng nổi tiêm li ti cho tỏi vào phi...

  • Bài 3 : Tính Chu Vi Và Diện Tích Hình Chữ Nhật
    Bài 3 : Tính Chu Vi Và Diện Tích Hình Chữ Nhật

    Trong các môn học , bài viết này liên quan đến môn toán học của các bạn . Các bạn cần nhớ đến công thức tính chu vi và diện tích của hình như nhật ....

  • Mẹo : Gõ Tiếng Việt Trong Game Không Lỗi Skill (Kỹ Năng) W
    Mẹo : Gõ Tiếng Việt Trong Game Không Lỗi Skill (Kỹ Năng) W

    Đôi Nét Về Bộ Gõ "GoTiengViet" Đây là bộ gõ nằm trong danh sách các bộ gõ có thể thể gõ tiếng Việt trong game mà không bị lỗi kỹ năng W ....

  • Tải Bộ Cài Windows 10 Pro Lite Version 1803 - Phiên Bản Dành Cho Máy Cấu Hình Thấp
    Tải Bộ Cài Windows 10 Pro Lite Version 1803 - Phiên Bản Dành Cho Máy Cấu Hình Thấp

    Ưu Điểm Của Windows 10 Pro Lite 1803Thích hợp cho máy tính văn phòng, máy tính cài phòng gameThích hợp cho máy tính và laptop có cấu hình thấpMáy có...

  • Internet 5G: Thay thế tốc độ cao cho cáp?
    Internet 5G: Thay thế tốc độ cao cho cáp?

    I.Wifi 5G Là Gì ? Tương tự như cách bạn kết nối WiFi ở nhà ngay bây giờ, thông qua một dịch vụ không dây hiện có như vệ tinh hoặc kết nối có dây...