Thêm thẻ Alt vào tiện ích "Bài đăng phổ biến" blogspot

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

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 == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (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 == &quot;false&quot;'>
            <!-- (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> 

Vậy là xong. Kiểm tra sẽ không còn lỗi thiếu thuộc tính ảnh thubnail nữa đâu nhé,sửa lỗi không chuẩn W3C-HTML5

Chúa các bạn thành công!