Tổng Hợp Thẻ Điều Kiện Blogspot (Blogger Conditional Tags): Cẩm Nang Toàn Thư Từ A-Z Cho Developer & SEOer

Trong thế giới của Blogspot (Blogger), nếu XML/HTML là xương và thịt, CSS là da dẻ, thì Thẻ điều kiện (Conditional Tags) chính là “bộ não”. Nó quyết định trang web của bạn thông minh đến đâu, hiển thị cái gì cho ai, và quan trọng nhất là tối ưu hóa công cụ tìm kiếm (SEO) như thế nào.

Bài viết này là tài liệu chuyên sâu nhất hiện nay, tổng hợp toàn bộ kiến thức về thẻ điều kiện Blogspot, cập nhật theo chuẩn Layout Version 3 mới nhất của Google.

Thẻ Điều Kiện Là Gì Và Tại Sao Nó Là “Trái Tim” Của Blogspot?

Định nghĩa cơ bản

Thẻ điều kiện trong Blogspot là các đoạn mã được viết bằng ngôn ngữ XML, bắt đầu bằng b:if, b:elseif hoặc b:else. Chúng hoạt động như những “người gác cổng”, kiểm tra xem một điều kiện nhất định có thỏa mãn hay không (TRUE hoặc FALSE) trước khi cho phép trình duyệt hiển thị nội dung bên trong nó.

Ví dụ đơn giản: Bạn muốn hiển thị dòng chữ “Chào mừng đến trang chủ” nhưng chỉ khi người dùng đang ở trang chủ, còn vào bài viết thì không hiện. Thẻ điều kiện sẽ giải quyết việc này.

Tầm quan trọng đối với SEO và UX

Nhiều người lầm tưởng thẻ điều kiện chỉ để “ẩn/hiện” widget. Thực tế, vai trò của nó lớn hơn nhiều:

1. Kiểm soát cấu trúc Heading (H1, H2, H3): Đây là yếu tố sống còn của SEO. Google yêu cầu mỗi trang chỉ nên có một thẻ H1 duy nhất và nó phải là nội dung quan trọng nhất.

   • Ở Trang chủ: H1 là Tên Blog.

   • Ở Bài viết: H1 là Tiêu đề bài viết (Tên Blog phải chuyển xuống thẻ p hoặc div).

   • Nếu không có thẻ điều kiện, bạn không thể làm được điều này tự động.

2. Tăng tốc độ tải trang (PageSpeed Insights): Bạn có thể dùng thẻ điều kiện để ngăn chặn các tệp Javascript (như Fanpage Facebook, TOC, Slider) tải ở những trang không cần thiết. Điều này giúp giảm Blocking Time và tăng điểm LCP.

3. Tránh trùng lặp nội dung (Duplicate Content): Kiểm soát thẻ Meta Description và Meta Robots để tránh việc Google index các trang rác (như trang tìm kiếm, trang nhãn không quan trọng).

4. Tối ưu trải nghiệm người dùng (UX): Hiển thị quảng cáo đúng chỗ, gợi ý bài viết liên quan đúng ngữ cảnh.

Cuộc Cách Mạng data:view vs data:blog

Đây là phần kiến thức quan trọng nhất mà 90% các bài hướng dẫn cũ trên mạng không đề cập tới. Google đã cập nhật Blogger lên Layout Version 3, giới thiệu một namespace mới là data:view.

data:blog (Cú pháp cũ – Legacy)

Trước đây, chúng ta thường dùng data:blog.pageType hoặc data:blog.url để kiểm tra điều kiện.

• Ưu điểm: Tương thích với các template rất cũ (trước 2018).

• Nhược điểm: Cú pháp dài dòng, xử lý chậm hơn, đôi khi không chính xác (ví dụ check URL trang chủ thường bị lỗi nếu domain có www hoặc https).

Ví dụ cũ:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

data:view (Cú pháp mới – Modern)

Đây là tiêu chuẩn hiện đại. data:view cung cấp các phương thức kiểm tra trực tiếp trạng thái của trang (View) thay vì so sánh chuỗi ký tự.

• Ưu điểm: Ngắn gọn, xử lý phía máy chủ (server-side) nhanh hơn, chính xác tuyệt đối.

• Khuyên dùng: Bạn nên thay thế toàn bộ code cũ sang data:view.

Ví dụ mới:

<b:if cond='data:view.isHomepage'>

Bảng so sánh chuyển đổi

Cấu Trúc Ngữ Pháp và Các Toán Tử Logic

Để viết được những điều kiện phức tạp (ví dụ: “Chỉ hiện ở trang chủ VÀ trên máy tính, nhưng KHÔNG hiện ở trang bài viết”), bạn cần nắm vững ngữ pháp XML.

Cấu trúc thẻ b:if, b:elseif, b:else

Cấu trúc 1: Điều kiện đơn (b:if)

Chỉ thực hiện nếu điều kiện đúng.

<b:if cond='data:view.isHomepage'>
    </b:if>

Cấu trúc 2: Điều kiện phủ định (b:else)

Nếu đúng thì làm A, nếu sai thì làm B.

<b:if cond='data:view.isPost'>
    <b:else/>
    </b:if>

Cấu trúc 3: Đa điều kiện (b:elseif)

Kiểm tra lần lượt nhiều trường hợp.

<b:if cond='data:view.isHomepage'>
    <h1>Trang Chủ</h1>
<b:elseif cond='data:view.isPost'/>
    <h1>Trang Bài Viết</h1>
<b:elseif cond='data:view.isPage'/>
    <h1>Trang Tĩnh</h1>
<b:else/>
    <h1>Các trang khác</h1>
</b:if>

Toán tử so sánh và Logic

Trong XML của Blogger, bạn không thể sử dụng các ký tự đặc biệt như && (Và), || (Hoặc), < (Nhỏ hơn), > (Lớn hơn) trực tiếp vì sẽ gây lỗi cú pháp (Syntax Error). Bạn phải dùng mã thay thế hoặc từ khóa.

Bảng toán tử chuẩn:

Ví dụ nâng cao:

Hiện nội dung nếu là Trang chủ HOẶC Trang bài viết:

<b:if cond='data:view.isHomepage or data:view.isPost'> ... </b:if>

Hiện nội dung nếu là Bài viết VÀ KHÔNG PHẢI xem trên Mobile:

<b:if cond='data:view.isPost and not data:blog.isMobileRequest'> ... </b:if>

Từ Điển Chi Tiết Các Loại Trang (Page Types)

Ở chương này, chúng ta sẽ đi sâu vào từng loại trang cụ thể để bạn biết cách áp dụng chính xác.

Trang Chủ (Homepage)

Đây là mặt tiền của website.

• Code: data:view.isHomepage

• Đặc điểm: Chỉ áp dụng cho trang đầu tiên của domain (ví dụ: domain.com). Nếu người dùng bấm sang trang 2 (domain.com/search?updated-max...) thì nó KHÔNG còn là Homepage nữa mà là Index.

• Ứng dụng: Hiển thị Slider, Bố cục lưới bài viết (Grid Layout), thông báo chào mừng.

Trang Bài Viết (Item/Post)

Nơi hiển thị nội dung chi tiết.

• Code: data:view.isPost

• Ứng dụng: Hiển thị khung bình luận, bài viết liên quan, tác giả, ngày đăng, Breadcrumb (thanh điều hướng).

• Lưu ý: isPost chỉ tính các bài đăng từ mục “Bài đăng” (Posts), không tính các trang “Trang” (Pages).

Trang Tĩnh (Static Page)

Các trang như Giới thiệu (About), Liên hệ (Contact), Chính sách bảo mật.

• Code: data:view.isPage

• Ứng dụng: Thường dùng để ẩn ngày đăng, ẩn tác giả, ẩn khung bình luận để trang trông chuyên nghiệp giống landing page hơn.

Trang Đơn (Single Item)

Đây là tập hợp bao gồm cả Bài viết và Trang tĩnh.

• Code: data:view.isSingleItem

• Logic: isSingleItem = isPost + isPage.

• Ứng dụng: Dùng khi bạn muốn chèn một đoạn code (ví dụ: nút chia sẻ MXH) vào cả bài viết và trang giới thiệu mà không muốn viết lặp lại 2 lần.

Trang Index (Multiple Items)

Đây là tập hợp các trang hiển thị danh sách bài viết.

• Code: data:view.isMultipleItems

• Bao gồm: Trang chủ, Trang tìm kiếm, Trang Label, Trang lưu trữ (Archive).

• Logic: Ngược lại với isSingleItem.

• Ứng dụng: Dùng để cắt ngắn nội dung (Snippet/Excerpt), hiển thị ảnh thumbnail thay vì ảnh full.

Trang Tìm Kiếm & Nhãn (Search & Label)

• Trang tìm kiếm (Query): data:view.isSearch (Khi người dùng gõ vào ô tìm kiếm).

• Trang Nhãn (Label): data:view.isLabelSearch (Khi người dùng bấm vào một tag).

• Ứng dụng: Hiển thị tiêu đề “Kết quả tìm kiếm cho: [Từ khóa]”.

Trang Lỗi (Error 404)

• Code: data:view.isError

• Ứng dụng: Tùy biến trang 404 đẹp mắt, thêm nút “Quay về trang chủ” hoặc ô tìm kiếm để giữ chân người dùng.

Chế độ xem trước (Preview)

• Code: data:view.isPreview

• Ứng dụng: Ẩn các mã quảng cáo hoặc mã thống kê (Analytics) khi bạn đang soạn bài và bấm “Xem trước” để tránh làm sai lệch số liệu thống kê.

Ứng Dụng SEO On-page Đỉnh Cao Với Thẻ Điều Kiện

Đây là phần giá trị nhất giúp blog của bạn leo top Google. Chúng ta sẽ xây dựng một cấu trúc Meta Data hoàn hảo.

Tối ưu thẻ Title (Tiêu đề trang)

Mặc định Blogger hiển thị: “Tên Blog: Tên Bài Viết”. Cấu trúc này không tốt cho SEO. Chúng ta cần đổi lại thành: “Tên Bài Viết | Tên Blog” hoặc chỉ “Tên Bài Viết” để từ khóa xuất hiện đầu tiên.

<title>
  <b:if cond='data:view.isHomepage'>
    <data:blog.title/> - <data:blog.pageTitle/>
  <b:elseif cond='data:view.isPost or data:view.isPage'/>
    <data:blog.pageName/> | <data:blog.title/>
  <b:elseif cond='data:view.isLabelSearch'/>
    Tổng hợp bài viết về <data:blog.pageName/>
  <b:elseif cond='data:view.isSearch'/>
    Kết quả tìm kiếm cho: <data:view.search.query/>
  <b:elseif cond='data:view.isError'/>
    404 - Không tìm thấy trang này
  <b:else/>
    <data:blog.pageTitle/>
  </b:if>
</title>

Tối ưu thẻ Meta Description

Tránh lỗi trùng lặp thẻ mô tả.

<b:if cond='data:view.isHomepage'>
    <meta content='Viết mô tả trang chủ chuẩn SEO chứa từ khóa chính của toàn blog tại đây...' name='description'/>
<b:elseif cond='data:view.isPost or data:view.isPage'/>
    <b:if cond='data:blog.metaDescription'>
        <meta expr:content='data:blog.metaDescription' name='description'/>
    <b:else/>
        <meta expr:content='data:post.snippet' name='description'/>
    </b:if>
</b:if>

Tối ưu Canonical URL

Tránh việc Google index các đường dẫn rác có tham số ?m=1 hoặc ?commentPage=....

<link expr:href='data:view.url.canonical' rel='canonical'/>

(Lưu ý: data:view.url.canonical là thẻ mới của Layout v3, rất mạnh mẽ và tự động loại bỏ các tham số thừa).

Kiểm soát thẻ Heading (H1) động

Như đã đề cập ở Chương 1, đây là kỹ thuật Dynamic Heading.

Tìm trong code template của bạn (thường ở phần Header), thay thế thẻ cố định bằng code sau:

<b:if cond='data:view.isHomepage'>
    <h1 class='header-title'>
        <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
    </h1>
<b:else/>
    <p class='header-title'>
        <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
    </p>
</b:if>

Sau đó, trong widget Blog1 (phần bài viết), hãy đảm bảo tiêu đề bài viết (post-title) được đặt trong thẻ h1 nếu là trang bài viết (isPost) và h2 nếu là trang index.

Tối Ưu Hiệu Suất (Core Web Vitals) – Defer JS/CSS

Google đánh giá rất cao tốc độ tải trang (LCP, CLS, FID). Thẻ điều kiện giúp bạn loại bỏ tài nguyên chặn hiển thị (Render-blocking resources).

Chỉ tải Font Awesome hoặc Icon ở nơi cần thiết

Nếu bạn chỉ dùng Icon ở trang bài viết, đừng tải nó ở trang chủ.

<b:if cond='data:view.isPost'>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css' rel='stylesheet'/>
</b:if>

Lazy Load Fanpage Facebook & Comments

Plugin Facebook rất nặng. Hãy dùng điều kiện để chỉ tải nó khi vào bài viết.

<b:if cond='data:view.isPost'>
    <div id="fb-root"></div>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/vi_VN/sdk.js..."></script>
</b:if>

CSS điều kiện (Critical CSS)

Bạn có thể chèn thẻ <style> vào trong thẻ điều kiện.

Ví dụ: Bạn muốn nền trang web màu đen khi vào bài viết, nhưng màu trắng ở trang chủ.

<b:if cond='data:view.isPost'>
    <style>
        body { background-color: #000; color: #fff; }
        .sidebar { display: none; } /* Ẩn sidebar bằng CSS */
    </style>
</b:if>

Tùy Biến Giao Diện & Widget Nâng Cao

Ẩn/Hiện Widget bằng thuộc tính cond (Mới nhất)

Trước đây, để ẩn widget, bạn phải bao bọc nó bằng b:if. Bây giờ, Google cho phép thêm thuộc tính cond trực tiếp vào thẻ <b:widget>.

Cách làm: Vào chỉnh sửa HTML, tìm đến thẻ widget bạn muốn.

<b:widget id='HTML1' type='HTML' cond='data:view.isHomepage' title='Slider'>
...
</b:widget>

<b:widget id='PopularPosts1' type='PopularPosts' cond='not data:view.isPage' title='Bài xem nhiều'>
...
</b:widget>

Lợi ích: Code gọn gàng hơn, dễ quản lý hơn rất nhiều.

Tạo giao diện “Full Width” cho bài viết

Nhiều blog hiện đại bỏ Sidebar ở bài viết để người đọc tập trung.

1. Dùng thẻ điều kiện bọc Sidebar:

   XML

   Đã copy xong!

   <b:if cond='not data:view.isPost'>
       <div id='sidebar-wrapper'>...các widget sidebar...</div>
   </b:if>

   Copy

2. Dùng CSS điều kiện để mở rộng Main Wrapper:

   XML

   Đã copy xong!

   <b:if cond='data:view.isPost'>
       <style>
           .main-wrapper { width: 100%; max-width: 100%; }
       </style>
   </b:if>

   Copy

Các Thẻ Điều Kiện Đặc Biệt (Specific Targeting)

Phần này dành cho những yêu cầu “khó nhằn” mà developer thường gặp.

Điều kiện cho từng Nhãn (Label) cụ thể

Bạn muốn đổi màu menu nếu bài viết thuộc nhãn “Công Nghệ”?

Sử dụng toán tử in:

<b:if cond='data:view.isPost and "Công Nghệ" in data:post.labels'>
    <style>.header { background: blue; }</style>
</b:if>

Lưu ý: Code này phải đặt bên trong widget Blog1 hoặc nơi có dữ liệu data:post.

Nếu muốn kiểm tra ở cấp độ toàn trang (Global) với trang Label Search:

<b:if cond='data:view.search.label == "Công Nghệ"'>
    <div class="banner-tech">Banner Quảng cáo đồ công nghệ</div>
</b:if>

Điều kiện theo ID bài viết (Post ID)

Khi bạn muốn can thiệp vào duy nhất 1 bài viết (ví dụ: bài Landing Page bán hàng) mà không ảnh hưởng bài khác.

1. Lấy ID bài viết trên thanh địa chỉ trình duyệt khi soạn thảo (dãy số sau postID=...).

2. Code:

<b:if cond='data:blog.postId == "1234567890123456"'>
    <style>.post-title { color: red; }</style>
</b:if>

Điều kiện Mobile vs Desktop

Blogger có thuộc tính isMobileRequest.

• True: Khi người dùng xem trên điện thoại (hoặc URL có ?m=1).

• False: Khi xem trên máy tính.

<b:if cond='data:blog.isMobileRequest'>
    <a href="tel:090xxx" class="call-btn-mobile">GỌI NGAY</a>
<b:else/>
    <img src="qr-code.png" class="qr-desktop"/>
</b:if>

Khắc Phục Lỗi (Troubleshooting) Thường Gặp

Trong quá trình làm việc, bạn sẽ gặp những lỗi khiến không lưu được Template.

Lỗi: “The reference to entity…”

Nguyên nhân: Trong XML, bạn không được dùng ký tự & đứng một mình hoặc trong biểu thức logic.

• Sai: <b:if cond='data:view.isPost && data:view.isMobile'>

• Đúng: <b:if cond='data:view.isPost and data:view.isMobile'>

• Hoặc: <b:if cond='data:view.isPost &amp;&amp; data:view.isMobile'> (Nhưng hãy dùng and cho chuẩn).

Lỗi: Thiếu thẻ đóng

Mỗi b:if mở ra BẮT BUỘC phải có </b:if> đóng lại. Nếu bạn lồng nhiều thẻ (if trong if), hãy chú ý thụt đầu dòng (indent) để dễ kiểm soát.

Lỗi: Đặt sai vị trí (Scope)

Một số dữ liệu như data:post.labels hay data:post.body chỉ hoạt động bên trong widget Blog1 và bên trong vòng lặp b:loop. Nếu bạn mang ra ngoài </head> hoặc Footer, nó sẽ không hoạt động hoặc gây lỗi.

• Giải pháp: Chỉ dùng data:view (biến toàn cục) ở ngoài widget. Dùng data:post (biến cục bộ) ở trong widget bài đăng.

Bạn muốn một website chuẩn SEO xem thêm: Thiết kế website Bình Dương TASDIGITAL

Tổng Kết & Cheatsheet (Bảng Tra Cứu Nhanh)

Để kết thúc bài viết, tôi cung cấp cho bạn một bảng tra cứu nhanh. Bạn có thể copy/paste ngay khi cần.

Bảng Tra Cứu Code (Copy & Paste)

1. Chỉ hiện Trang chủ:

   <b:if cond='data:view.isHomepage'> ... </b:if>

2. Hiện mọi nơi TRỪ Trang chủ:

   <b:if cond='not data:view.isHomepage'> ... </b:if>

3. Chỉ hiện Bài viết:

   <b:if cond='data:view.isPost'> ... </b:if>

4. Chỉ hiện Trang tĩnh:

   <b:if cond='data:view.isPage'> ... </b:if>

5. Hiện ở Bài viết HOẶC Trang tĩnh:

   <b:if cond='data:view.isSingleItem'> ... </b:if>

6. Chỉ hiện ở Trang Tìm kiếm:

   <b:if cond='data:view.isSearch'> ... </b:if>

7. Chỉ hiện ở Trang Lỗi 404:

   <b:if cond='data:view.isError'> ... </b:if>

8. Chỉ hiện trên Mobile:

   <b:if cond='data:blog.isMobileRequest'> ... </b:if>

9. URL cụ thể:

   <b:if cond='data:blog.url == "URL_CUA_BAN"'> ... </b:if>

Lời kết cho Developer

Làm chủ Thẻ điều kiện Blogspot là bước ngoặt đưa bạn từ một người “chỉnh sửa template” thành một “nhà phát triển theme”. Khả năng tùy biến là vô hạn nếu bạn biết kết hợp khéo léo giữa b:if, CSS và JS.

Hãy nhớ nguyên tắc vàng: “Load đúng thứ, đúng chỗ, đúng người”. Đừng bắt người dùng tải cả một thư viện JS 500KB chỉ để xem một trang tĩnh 2KB. Đó chính là tư duy lập trình và SEO hiện đại.

Chúc bạn thành công trong việc tối ưu hóa Blogspot của mình! Nếu có bất kỳ câu hỏi nào về các trường hợp điều kiện phức tạp, hãy để lại yêu cầu chi tiết.