Hiểu về include all-head-content

Dịch từ tiếng anh sang tiếng việt ta cũng có thể hiểu được thẻ này dùng để làm gì rồi, b: include all-head-content gồm toàn bộ nội dung được sử dụng để chèn dữ liệu meta cho blog giúp blog dễ dàng được các công cụ tìm kiếm xác định, mã này sẽ tự động gọi mã khác. Việc duy nhất bạn cần làm là chèn thẻ này nằm trong cặp thẻ head. Trong bài viết này tôi sẽ cùng các bạn bóc tách những thành phần bên trong nó

I. Các thành phần

1. Unicode Content Type

Được sử dụng để xác định loại tài liệu và mã được sử dụng bởi blog, nhằm tạo điều kiện cho các công cụ tìm kiếm dễ đọc tài liệu, blogger sử dụng chuẩn UTF-8 unicode

<meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/>

Kết quả:

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />

2. Meta theme color

Chỉ tồn tại trong mẫu template v3, được sử dụng để xác định màu chủ đề được sử dụng trong trình duyệt di động (Chrome, Firefox và Opera), mã mặc định được lấy từ màu nền chủ đề

Code mặc định

<b:if cond='data:widgets'>
<b:comment>Chrome, Firefox OS and Opera</b:comment>
<meta expr:content='data:skin.vars.body_background_color' name='theme-color'/>
<b:comment>Windows Phone</b:comment>
<meta expr:content='data:skin.vars.body_background_color' name='msapplication-navbutton-color'/>
</b:if>

Nếu không tìm thấy màu chủ đề kết quả trả về rỗng

<!-- Chrome, Firefox OS and Opera -->
<meta content='' name='theme-color' />
<!-- Windows Phone -->
<meta content='' name='msapplication-navbutton-color' />

Thay vào đó ta có thể set thủ công như sau

<meta content='#111111' name='theme-color' />
<meta content='#111111' name='msapplication-navbutton-color' />

3. Latency Script

<data:blog.latencyHeadScript/>
<data:blog.mobileHeadScript/>

Đoạn mã trên gồm nội dung của tập lệnh thời gian chờ thay đổi theo chủ đề

4. Meta generator

Cho phép các blogger thực hiện thống kê trên blog

<meta content='blogger' name='generator'/>

Kết quả như trên

5. Favicon

Được sử dụng để xác định favicon của trang web

<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>

Kết quả:

<link href='https://www.hung1001.blog/favicon.ico' rel='icon' type='image/x-icon' />

6. Syndication Feed

Được sử dụng để cung cấp thông tin cho trình duyệt và một số dịch vụ web, url blog có sẵn

<data:blog.feedLinks/>

Kết quả:

<link rel="alternate" type="application/atom+xml" title="Hưng Hoàng Văn | Thủ thuật quản lý chuyên sâu - Atom" href="https://www.hung1001.blog/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Hưng Hoàng Văn | Thủ thuật quản lý chuyên sâu - RSS" href="https://www.hung1001.blog/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Hưng Hoàng Văn | Thủ thuật quản lý chuyên sâu - Atom" href="https://www.blogger.com/feeds/8256370320146498427/posts/default" />

7. OpenID

OpenID là một tiêu chuẩn mở cho phép người dùng dịch vụ OpenIDto kết nối với các trang web tương thích với thông tin đăng nhập OpenIDusing duy nhất

<data:blog.openIdOpTag/>

Kết quả:

<link rel="openid.server" href="https://www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="https://www.hung1001.blog/" />

8. Publisher

Được sử dụng để xác định nhà xuất bản blog

<data:blog.meTag/>
<b:if cond='data:blog.googleProfileUrl'>
<link expr:href='data:blog.googleProfileUrl' rel='publisher'/>
</b:if>

Kết quả:

<link expr:href='"https://plus.google.com/" PROFILE GOOGLE PLUS "/posts"' rel='publisher' />
<link expr:href='"https://plus.google.com/" PROFILE GOOGLE PLUS "/about"' rel='author' />
<link expr:href='"https://plus.google.com/" PROFILE GOOGLE PLUS' rel='me' />

9. OpenGraph

Được sử dụng để hiển thị meta Open Graph, meta này phục vụ để xác định url, tiêu đề, hình ảnh, mô tả sẽ được hiển thị khi bao gồm các liên kết blog trên web bằng cách sử dụng opengraph. Thành phần này rất quan trọng khi chia sẻ bài lên Facebook

<b:include name='openGraphMetaData'/>

Kết quả:

<meta content='BLOG URL' property='og:url'/>
<meta content='BLOG TITLE' property='og:title'/>
<meta content='DESCRIPTION' property='og:description'/>
<meta content='IMAGE URL' property='og:image'/>

10. Description

Được sử dụng để hiển thị mô tả blog và bài viết cho các công cụ tìm kiếm

<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

11. IE

Được sử dụng để cải thiện giao diện của trình duyệt internet explorer

Chỉ cần tích hợp

<b:include data='blog' name='all-head-content'/>

Blogger sẽ tự sinh code, không có code tùy chỉnh. Kết quả gần tương tự như:

<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->

II. Tích hợp và tùy chỉnh

1. All in one

Để tích hợp tất cả các thành phần trên bạn chỉ cần gọi 1 dòng code duy nhất chèn trong cặp thẻ <head>...</head>

<b:include data='blog' name='all-head-content'/>

Tuy nhiên rất có thể sẽ có những thành phần đã được khai báo từ người thiết kế template. Việc bạn cần làm là check sources và xóa đi các thẻ trùng

Ưu điểm của cách này đó là việc tích hợp đơn giản, không đòi hỏi nhiều tuy nhiên nhược điểm của nó là một số thẻ meta bị trống nội dung hoặc gây trùng lặp nội dung, tự sinh thêm code với IE có thể làm chậm trang

2. Tùy chỉnh

Với 10 thành phần kể trên bạn có thể lựa chọn cho mình những thành phần cần thiết và chèn vào cặp thẻ <head>...</head>. Ví dụ đoạn sau

<meta expr:content='"text/html; charset=" + data:blog.encoding' http-equiv='Content-Type'/>
<meta content='#111111' name='theme-color'/>
<meta content='#111111' name='msapplication-navbutton-color'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url.canonical' rel='canonical'/>
<data:blog.feedLinks/>
<data:blog.openIdOpTag/>
<b:include name='openGraphMetaData'/>

sẽ xóa được đoạn js tự sinh trên IE

Ưu điểm của cách này có thể nhìn thấy rất rõ ví dụ như loại bỏ được khai báo meta trống hoặc có thể dùng thêm thẻ điều kiện để tùy biến

<b:if cond='data:view.isHomepage'>
    <meta content='#111111' name='theme-color' />
    <meta content='#111111' name='msapplication-navbutton-color' />
    <b:else/>
    <b:if cond='data:view.isPost'>
        <meta content='#57007c' name='theme-color' />
        <meta content='#57007c' name='msapplication-navbutton-color' />
        <b:else/>
        <b:if cond='data:view.isPage'>
            <meta content='#0a7c00' name='theme-color' />
            <meta content='#0a7c00' name='msapplication-navbutton-color' />
            <b:else/>
            <meta content='#00127c' name='theme-color' />
            <meta content='#00127c' name='msapplication-navbutton-color' />
        </b:if>
    </b:if>
</b:if>

Theo code trên, khi duyệt trên di động (Chrome, Firefox OS and Opera) trang chủ sẽ có chủ đề màu #111111, trang bài viết sẽ là màu #57007c, trang tĩnh sẽ có màu #0a7c00 và các trang còn lại có màu #00127c trông rất cool ngầu :))

Như vậy qua bài viết này bạn đã bóc tách được thêm 1 thẻ rất khai báo meta rất quan trọng trong nền tảng blogger.

Chúc thành công !