Bài này sẽ giới thiệu với các bạn cách làm đơn giản hóa phần HEAD để nó không rườm già như HEAD mặc định mà vẫn đảm bảo seo tốt thậm trí blogspot đạt chuẩn HTML5 của tổ chức W3C.
Thẻ này trong chuẩn hóa HTML5 nó chỉ gây ra 1 lỗi nhưng blog của bạn load rất kém khi có 1 đống js và link mặc định của blogger chặn ngay đầu template.
Chắc nhiều bạn từng mò mẫm view soude (xem code) thì nhận thấy rằng phần đầu trong mẫu khi xem mã nguồn blogger(blogspot) thường có đặc trưng đoạn javascript khá lằng nhằng và rườm già.
Tất nhiên mọi thứ như thế đều có lý do riêng, nhưng không phải ai cũng cần đến thế,nhất là sự hiện diện của js và 2 link stylesheet phía cuối
Vậy head trong mẫu tại sao lại có phần vừa nói ở trên,lý do là từ thẻ:
<b:include data='blog' name='all-head-content'/>
Và để ta không cần đặt thẻ meta mô tả blog vào trong mẫu(nói vậy thì cũng không chính xác vì ta đặt mô tả blog tại phần Cài đặt-Tùy chọn tìm kiếm-Thẻ Meta) mà khi xem mã nguồn ở trang chủ vẫn có đủ phần mô tả blog và khi xem mã nguồn ở trang item vẫn có mô tả tìm kiếm cho bài viết.
Lưu ý:
Muốn thực hiện thủ thuât này thì bạn cũng cần làm chủ được CSS của blog mình còn không thì không nên áp dụng.
Thẻ <b:include data='blog' name='all-head-content'/>
Có tác dụng tự động khai báo cho ta khi ta tạo lập blog.Xóa bỏ nó đi rồi thì chính ta lại phải khai báo những gì blogger đã làm hộ,việc này là hoàn toàn có thể.
Áp Dụng Vào Blogspot
Công việc đầu tiên cần làm là bạn vào Thiết kế ⇒ Cài đặt ⇒ Tùy chọn tìm kiếm và bật thẻ meta rồi điền mô tả blog vào như hình
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'/>
<meta content='width=device-width,initial-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:if cond='data:blog.pageTitle == data:blog.title'>
<title>
<data:blog.title/>
</title>
<b:else/>
<title>
<data:blog.pageName/>
|
<data:blog.title/>
</title>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='keywords'/>
<meta content='index, follow' name='robots'/>
<link expr:href='data:blog.canonicalHomepageUrl' rel='canonical'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageTitle != data:blog.title'>
<meta expr:content='data:blog.pageName' name='keywords'/>
<meta content='index, follow' name='robots'/>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
</b:if>
</b:if>
<link href='favicon.ico' rel='icon' type='image/x-icon'/>
<link href='/feeds/posts/default' rel='alternate' title='ChuBangAiTi - Atom' type='application/atom+xml'/>
<link href='/feeds/posts/default?alt=rss' rel='alternate' title='ChuBangAiTi - RSS' type='application/rss+xml'/>
- Đoạn bôi màu vàng chính là phần lấy mô tả blog khi xem mã nguồn ở trang chủ và là các mô tả tìm kiếm cho bài viết bạn đã bỏ vào mô tả tìm kiếm khi viết bài khi xem mã nguồn ở trang bài viết.<html>
<head>
<meta charset='UTF-8'/>
<meta content='width=device-width,initial-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:if cond='data:blog.pageTitle == data:blog.title'>
<title>
<data:blog.title/>
</title>
<b:else/>
<title>
<data:blog.pageName/>
|
<data:blog.title/>
</title>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='keywords'/>
<meta content='index, follow' name='robots'/>
<link expr:href='data:blog.canonicalHomepageUrl' rel='canonical'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageTitle != data:blog.title'>
<meta expr:content='data:blog.pageName' name='keywords'/>
<meta content='index, follow' name='robots'/>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
</b:if>
</b:if>
<link href='favicon.ico' rel='icon' type='image/x-icon'/>
<link href='/feeds/posts/default' rel='alternate' title='ChuBangAiTi - Atom' type='application/atom+xml'/>
<link href='/feeds/posts/default?alt=rss' rel='alternate' title='ChuBangAiTi - RSS' type='application/rss+xml'/>
- Với code này tại trang chủ keywords là tiêu đề blogspot và trang bài viết là tiêu đề bài viết.
Nếu bạn muốn tại trang chủ từ khóa là những từ bạn tự thêm vào thì đổi đoạn màu vàng như dưới
<meta expr:content='data:blog.title' name='keywords'/>
Thành:
<meta content='Ghi từ khóa vào đây' name='keywords'/>
Bạn có thể bổ sung thêm một số link nữa nhưng các link đó không được chuẩn HTML5 khuyến khích(có lẽ vậy là đủ)Thay ChuBangAiTi thành tiêu đề blog của bạn.
Đối với blogspot vẫn dùng mẫu Mobile của blogger thì dòng
<meta content='width=device-width,initial-scale=1.0,maximum-scale=1.0' name='viewport'/>
Thay bằng:
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
Về vấn đề loại bỏ thẻ này có nhiều quan điểm khác nhau nên các bạn cứ coi đây là vấn đề tham khảo,không khuyến khích dùng.<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
Thực ra bạn để thẻ đó cũng chẳng sao cả, nhưng site bạn khó mà đạt chuẩn với chuẩn HTML5 với một đống link mặc định của blogger ( blogspot ) và cả đoạn javaScript trên nữa.
Kiểm tra chuẩn HTML5 ở ĐÂY
Code này đã chỉnh sửa để tránh lỗi thể tiêu đề và mô tả meta trùng lặp ?m=0 và ?m=1