Đọc qua một số mẹo sau đây giúp bạn hiểu và tự thêm được bộ thẻ meta tags vào Blog của mình hiển thị đầy đủ với tất cả các trang, không bị trùng lặp và không bị lỗi. Tác dụng khi thêm các thẻ meta cần thiết giúp các công cụ tìm kiếm dễ thu thập dữ liệu, lập chỉ mục cho giao diện tìm kiếm và khi chia sẻ lên các mạng xã hội sẽ hiển thị đầy đủ không bị lỗi.
Trước tiên bạn cần nắm được bộ thẻ meta cần thiết phải có cho mỗi trang riêng biệt trong Blog ngoại trừ trang lỗi 404 có một số thẻ không sử dụng.
<!--Khung nhìn đáp ứng với kích thước thiết bị-->
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<!--Chỉ định ký tự được mã hóa cho tài liệu HTML-->
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<!--Chỉ định đường dẫn đến biểu tượng favicon.ico-->
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<!--Liên kết URL chính của trang-->
<link href='' rel='canonical'/>
<!--Chia sẻ nguồn cấp dữ liệu-->
<link href='' rel='alternate' title='' type='application/atom+xml'/>
<link href='' rel='alternate' title='' type='application/rss+xml'/>
<!--Tiêu đề trang-->
<title></title>
<!--Mô tả ngắn trang-->
<meta content='' name='description'/>
<!--Thẻ meta open graph-->
<meta content='' property='og:title'/>
<meta content='' property='og:description'/>
<meta content='' property='og:url'/>
<meta content='' property='og:image'/>
Ngoài ra còn rất nhiều thẻ meta khác nhưng chỉ là phụ bạn có thể chọn thêm hoặc không nhưng đã thêm phải thêm thật chính xác.
Đầu tiên bạn cần xem Blog có những loại trang nào để sử dụng điều kiện cho mỗi trang riêng biệt, ngoài ra bạn cũng cần biết các thẻ đọc dữ liệu mặc định của Blogger sẽ giúp bạn khi thêm sẽ chính xác hơn.
Blogger hiển thị các loại trang chính sau đây kèm theo liên kết URL:
- Trang chủ (/)
- Trang các bài đăng cũ hơn (/search)
- Trang tìm kiếm label (/search/label/)
- Trang tìm kiếm kết quả (/search?q=)
- Trang lưu trữ (/year hoặc /year/month)
- Trang tĩnh (/p/)
- Trang bài viết (/year/month/)
Ngoài ra còn có các loại trang phụ nhưng không thường xuyên
- Trang xem trước
- Trang lỗi 404
Các thẻ đọc dữ liệu mặc định của Blogger
Tiếp theo bạn cần lọc ra những thẻ meta nào sẽ sử dụng chung cho tất cả các trang từ các thẻ meta ở trên:
<!--Khung nhìn đáp ứng với kích thước thiết bị-->
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<!--Chỉ định ký tự được mã hóa cho tài liệu HTML-->
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<!--Chỉ định đường dẫn đến biểu tượng favicon.ico-->
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<!--Liên kết URL chính của trang-->
<link href='' rel='canonical'/>
<!--Thẻ meta open graph url và image-->
<meta content='' property='og:url'/>
<meta content='' property='og:image'/>
Các thẻ còn lại sử dụng điều kiện với mỗi trang
<!--Chia sẻ nguồn cấp dữ liệu-->
<link href='' title='' type='application/atom+xml'/>
<link href='' rel='' title='' type='application/rss+xml'/>
<!--Thẻ tiêu đề và mô tả ngắn-->
<title></title>
<meta content='' name='description'/>
<!--Thẻ meta open graph tiêu đề và mô tả ngắn-->
<meta content='' property='og:title'/>
<meta content='' property='og:description' />
Các bước thêm thẻ meta
Bước 1: Xác định các thẻ meta sẽ nằm cố định ở vị trí nào?
Trước tiên bạn sẽ định hình các thẻ meta sẽ nằm ở vị trí nào trong template, cụ thể các thẻ meta sẽ được nằm ngay dưới thẻ <head> và trước thẻ <b:skin>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<!--THẺ META NẰM Ở ĐÂY-->
<b:skin><![CDATA[]]></b:skin>
<b:template-skin><![CDATA[]]></b:template-skin>
</head>
<body>
<b:section>
<b:widget></b:widget>
</b:section>
</body>
</html>
Bước 2: Thêm thẻ meta chung cho tất cả các trang
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
<b:if cond='!data:view.isError'> <!--Nếu không phải trang lỗi 404-->
<!--VIẾT ĐIỀU KIỆN CHO CÁC TRANG-->
<meta expr:content='data:blog.url.canonical' property='og:url'/>
<b:if cond='data:view.featuredImage'>
<meta expr:content='resizeImage(data:view.featuredImage, 1200, "1200:630")' property='og:image'/>
<b:elseif cond='data:widgets'/>
<b:loop values='data:widgets.Blog.first.posts where (p => p.featuredImage) map (p => p.featuredImage)' var='imageUrl'>
<meta expr:content='resizeImage(data:imageUrl, 1200, "1200:630")' property='og:image'/>
</b:loop>
<b:elseif cond='data:blog.postImageUrl'/>
<meta expr:content='resizeImage(data:blog.postImageUrl, 1200, "1200:630")' property='og:image'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrGKaCo4UWhtFLhB7TvN3um9KGvUlh9LBEHMTbL-OP-VvtHzfmppBk0X7aS69tkvkABdzajm9OBEHi19DVZxszvc_jIO6mLkfBiGIY2zlnjlCy9Y0GDaWC8xWMG5DDCP8IlICrxJTV01x_/w1200-h630-p-k-no-nu/blogger.jpg' property='og:image'/>
</b:if>
<b:else/> <!--Nếu là trang lỗi 404-->
<title>Rất tiếc, không tìm được trang này. - Việt Blogger</title>
<meta content='Không có trang này trên Việt Blogger. Rất có thể trang đã bị xóa do tính năng không còn hoặc do đường dẫn URL bị sai.' name='description'/>
</b:if>
Bước 3: Thêm thẻ meta cho điều kiện mỗi trang
Chúng ta sẽ thêm các thẻ meta cho điều kiện mỗi trang phần đánh dấu màu đỏ ở trên, phần này sẽ chia ra làm hai loại trang riêng biệt: Trang tìm kiếm label và các trang còn lại.
<b:if cond='data:blog.searchLabel == "blogspot-seo"'> <!--Nếu là trang tìm kiếm có label tên blogspot-seo-->
<link expr:href='data:blog.canonicalHomepageUrl + "feeds/posts/default/-/blogspot-seo"' rel='alternate' title='Seo Blogspot - Việt Blogger' type='application/atom+xml'/>
<link expr:href='data:blog.canonicalHomepageUrl + "feeds/posts/default/-/blogspot-seo?alt=rss"' rel='alternate' title='Seo Blogspot - Việt Blogger' type='application/rss+xml'/>
<title>Seo Blogspot - Việt Blogger</title>
<meta content='Các bài viết thuộc các chuyên mục Blogger Template, Seo Blogspot, Thiết kế Blogspot, Thủ thuật Blogspot và Tiện ích Blogspot' name='description'/>
<meta content='Blogspot - Việt Blogger' property='og:title'/>
<meta content='Các bài viết thuộc các chuyên mục Blogger Template, Seo Blogspot, Thiết kế Blogspot, Thủ thuật Blogspot và Tiện ích Blogson' property='og:description' />
<b:elseif cond='data:blog.searchLabel == "ten-label-khac"'/> <!--Nếu là trang tìm kiếm có label tên khác-->
<!--Viết các thẻ meta tương tự như label tên blogspot-seo-->
<b:else/> <--Còn không sẽ hiển thị cho các trang khác-->
<link expr:href='data:blog.canonicalHomepageUrl + "feeds/posts/default"' expr:title='data:blog.title' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.canonicalHomepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title' rel='alternate' type='application/rss+xml'/>
<title><b:if cond='data:view.isHomepage'><data:view.title.escaped/><b:elseif cond='data:view.isSearch and !data:view.search.query'/><data:messages.recentPosts/> - Việt Blogger<b:elseif cond='data:view.search.query'/><data:blog.pageName/> - Việt Blogger<b:elseif cond='data:view.isArchive'/><data:messages.blogArchive/> <data:blog.pageName/> - Việt Blogger<b:elseif cond='data:view.isSingleItem'/><data:view.title.escaped/> - Việt Blogger</b:if></title>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:view.title.escaped' property='og:title'/>
<meta expr:content='data:view.description.escaped' property='og:description'/>
</b:if>
Cứ như vậy bạn chỉ cần thêm điều kiện vào vùng mình đánh dấu màu đỏ cho các trang có tên label khác, phần còn lại các bạn giữ nguyên và nhớ thay các dòng chữ tiếng Việt của mình ở trên cho phù hợp với Blog của mình. Cuối cùng bạn đừng quên bật thẻ mô tả meta trong phần Cài đặt > Tùy chọn tìm kiếm > Ghi vài dòng mô tả ngắn gọn về Blog, khi soạn bài viết bài nhớ thêm vài dòng mô tả bao quá bài viết bên phải ô Mô tả tìm kiếm.
