Hướng dẫn triển khai dữ liệu có cấu trúc cho thẻ rich vào nền tảng blogspot

Xin chào các bạn! Trong bài viết hôm nay mình sẽ hướng dẫn các bạn cách triển khai dữ liệu có cấu trúc cho thẻ rich vào nền tảng blogspot mà mình đã biên soạn sẵn tuy không thật sự đầy đủ và mình sẽ cập nhật trong thời gian sắp tới. Phần này do mình tự nghiên cứu để soạn ra không hề bắt trước của bất kỳ website nào cho nên có thể còn sai sót do đó các bạn thông cảm. Các bạn chơi blog hầu như đều biết rằng với nền tảng blogspot còn rất nhiều hạn chế tính năng đặc biệt với tính năng tìm kiếm Google không như các nền tảng Wordpress có sẵn các công cụ SEO tích hợp lại dễ hiểu và dễ thực hiện, mình lấy đơn giản ví dụ với xếp hạng 5 sao sao hay bao nhiêu phiếu bầu là không có với blogspot.

Trước hết bạn cần hiểu dữ liệu có cấu trúc nó là cái gì? Và thư viện tính năng tìm kiếm là gì? Các bạn truy cập trang giới thiệu của Google để hiểu rõ hơn do trang viết bằng tiếng Anh nên các bạn chịu khó dịch sang tiếng Việt cho dễ đọc và Google cũng dịch rất sát với trang của mình 😁  Dưới đây là cách triển khai đúng vào mẫu còn Google có cập nhật cho blog của mình không thì mình không chắc lắm tuy nhiên mình đã test một vài tính năng tìm kiếm chắc chắn Google sẽ cập nhật cho bài viết ví dụ như breadcrumbs, products, reviews.

Trước tiên bạn cần vào Cài đặt > Tùy chọn tìm kiếm > bật thẻ Meta mô tả sau đó ghi tối đa 160 từ mô tả blog của mình viết về chủ đề gì?, lĩnh vực nào?...

Ví dụ khi tìm kiếm blog thu thuat win 10 ở trang chủ Google sẽ index mô tả blog như hình bên dưới

Còn phần mô tả tìm kiếm cho bài viết cũng viết mô tả ngắn gọn tối đa 160 từ

Bây giờ chúng ta sẽ bắt đầu triền khai mã vào trong mẫu các bạn vào Chủ đề > Chỉnh sửa HTML

1. Áp dụng với trang chủ

Chèn đoạn javascrip sau ngay trước <b:skin>

Copy

<b:if cond='data:view.isHomepage'><!-- Google Search Meta --><script type='application/ld+json'>{"@context" : "http://schema.org","@type" : "WebSite","name" : "<data:blog.title/>","alternateName" : "<data:blog.metaDescription/>","url" : "<data:blog.canonicalUrl/>"}</script><!-- Google Logos --><script type="application/ld+json">{  "@context": "http://schema.org",  "@type": "Organization",  "url": "<data:blog.canonicalUrl/>",  "logo": "https://i.imgur.com/F5xk7Ah.png"}</script><!-- Google Profile --><script type="application/ld+json">{"@context": "http://schema.org","@type": "Person","name": "<data:blog.title/>","url": "<data:blog.canonicalUrl/>","sameAs": ["https://www.facebook.com/blogthuthuatwin10","https://twitter.com/thuthuatwin10","https://www.youtube.com/blogthuthuatwin10","https://plus.google.com/+blogthuthuatwin10"]}</script><!-- Google Sitelinks Searchbox --><script type='application/ld+json'>{"@context":"http://schema.org","@type":"WebSite","url":"<data:blog.canonicalUrl/>","name":"<data:blog.title/>","potentialAction":{"@type":"SearchAction","target":"<data:blog.canonicalUrl/>?q={search_term_string}","query-input":"required name=search_term_string"}}</script></b:if>

Và khi xem nguồn trang chủ nó sẽ ra như hình

2. Áp dụng với trang nhãn (Label)

Các bạn chuyển đến tiện ích Blog1 tìm đoạn <b:includable id='main' var='top'> mở rộng ra tìm <div class='post-outer'> chèn đoạn javascript sau ngay dưới nó

Copy

<b:if cond='data:blog.searchLabel'><!-- Google Search Meta --><script type="application/ld+json">{"@context" : "http://schema.org","@type" : "WebSite","name" : "<b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == &quot;true&quot;'><data:label.name/></b:if></b:loop>","alternateName" : "<data:blog.metaDescription/>","url" : "<data:blog.canonicalUrl/>"}</script></b:if>

Kết quả ra ra tìm kiếm áp dụng với nhãn Blogger khi xem nguồn trang

3. Áp dụng trong bài viết

Tiếp tục tìm đến đoạn <b:includable id='post' var='post'> mở rộng ra tìm <div class='post-footer'> chèn đoạn javascript sau ngay trên nó

Copy

<b:if cond='data:view.isSingleItem'><!-- Google Search For Article --><script type="application/ld+json">{"@context": "http://schema.org","@type": "NewsArticle","mainEntityOfPage":{"@type":"WebPage","@id":"<data:blog.canonicalUrl/>"},"headline": "<data:blog.pageName/>","description": "<data:blog.metaDescription/>","image": {"@type": "ImageObject","url": "<data:blog.postImageThumbnailUrl/>","width" : 720,"height" : 480},"datePublished": "<data:post.dateHeader/>","dateModified": "<data:post.dateHeader/>","author": {"@type": "Person","name": "<data:post.author/>"},"publisher": {"@type": "Organization","name": "<data:blog.title/>","logo": {"@type": "ImageObject","url": "https://i.imgur.com/F5xk7Ah.png"}}}</script><!-- Google Breadcrumb --><script type="application/ld+json">{"@context": "http://schema.org","@type": "BreadcrumbList","itemListElement": [{"@type": "ListItem","position": 1,"item": {"@id": "<data:blog.homepageUrl/>","name": "<data:homeMsg/>"}},{"@type": "ListItem","position": 2,"item": {"@id": "<data:blog.pageName/>","name": "<b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == &quot;true&quot;'><data:label.name/></b:if></b:loop>"}}]}</script></b:if>

Kết quả sẽ ra khi xem nguồn trang bài viết

4. Chèn reviews trực tiếp trong bài viết

Chúng ta có thể chèn trực tiếp trong mẫu giống như phần 3 ở trên áp dụng trong bài viết nhưng khi index lên Goole nhìn không được thẩm mỹ và không thực vì bài nào cũng giống nhau cả 😂  do đó chúng ta sẽ chèn trực tiếp trong bài viết như sau:

Khi viết bài xong chuyển qua khung soạn thảo HTML chèn đoạn javascript sau trên đầu hoặc dưới cùng hoặc giữa hoặc bật kỳ chỗ nào cũng được

Copy

<script type="application/ld+json">{  "@context": "http://schema.org/",  "@type": "Product",  "name": "Chia sẻ miễn phí giao diện blogger template Masign View",  "aggregateRating": {    "@type": "AggregateRating",    "ratingValue" : "4.5",    "ratingCount": "15"  }}</script>

Với giá trị ratingValue (xếp hạng) tối đa là 5 còn ratingCount (phiếu bầu) để bao nhiêu thì tùy bạn để ý thấy bài viết nhiều view thì thêm nhiều phiếu bầu còn ít thì thêm ít trung bình cứ để 10 đến 20 😜  kết quả ra khi index bài viết lên tìm kiếm Google

Trên đây là các bước triển khai đúng dữ liệu có cấu trúc cho thẻ rich vào blogspot, các bạn có thể sử dụng công cụ kiểm tra cấu trúc của Google để test nhé mình sẽ cập nhật đầy đủ trong thời gian sớm nhất, hi vọng bài viết sẽ có ích với bạn