Nhatthienkt.net - Việc thêm thẻ Alt cho các hình ảnh trong tiện ích "Bài đăng phổ biến" - "PopularPosts" của Blogspot nhằm chuẩn cho SEO.
Thiếu 1 thuộc tính ảnh trong blog cũng không thể chuẩn theo W3C được do vậy nếu blog của bạn có sử dụng tiện ích PopularPosts trực tiếp trong tiện ích có sẵn của blogspot thì hãy đặt lại thuộc tính ảnh cho nó, trường hợp sử dụng các cách khác để thay thế PopularPosts thì không cần xem bài này.
Bài viết này chỉ áp dụng với những blogspot có sử dụng widget id='PopularPosts1', tức là tiện ích Bài đăng phổ biến trong blog của mình. Và có sự dụng "Hình ảnh thu nhỏ" như hình dưới
Bài viết này chỉ áp dụng với những blogspot có sử dụng widget id='PopularPosts1', tức là tiện ích Bài đăng phổ biến trong blog của mình. Và có sự dụng "Hình ảnh thu nhỏ" như hình dưới
Tuy nhiên blogspot mặc định hình ảnh thumbnail là thẻ alt="" nên các công cụ kiểm tra cho kết quả là thuộc tính ảnh là rỗng và báo lỗi. Do đó để khắc phục lỗi này ta chỉ việc thêm tên cho thuộc tính ảnh của thumbnail này là OK
Tiến hành nào
Bước 1: Vào Mẫu -> Chỉnh sửa HTML
Bước 2: Tìm đến tiện ích PopularPosts1
Bước 3: Mở rộng nó ra bằng cách click vào nút đen như hình để mở rộng Widegt ra
Bước 4: Đặt cái thuộc tính cho hình ảnh nhỏ trong bài đăng phổ biến.
Tìm trong <!-- (3) Show only thumbnails --> và <!-- (4) Show only thumbnails --> bạn sẽ thấy thẻ thẻ Alt chưa được đặt tên
Hãy cho thuộc tính ảnh thu nhỏ (Thumbanail) tên gì cũng được. Ví dụ dưới đây là toàn bộ Widget của Tiện ích phổ biến mà đã bổ sung thuộc tính cho ảnh thu nhỏ.
<b:widget id='PopularPosts1' locked='false' title='Xem nhiều trong tuần' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='Click để xem' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='Click để xem' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
0 Nhận xét
Vui lòng viết comment Tiếng Việt có dấu.
Emoji- Bạn có thể gửi mail trực tiếp qua địa chỉ: nhatthienkt.s@gmail.com
- Nhận xét không hỗ trợ cho người dùng ẩn danh
- Lưu ý những nhận xét với mục đích backlink không liên quan đến nội dung bài viết sẽ bị xóa bỏ
- Bạn muốn theo dõi cập nhật trả lời sớm nhất từ adm vui lòng tick vào ô "Thông báo cho tôi" rồi xuất bản nhận xét của mình.