Triển khai dữ liệu có cấu trúc và thẻ rich cho nền tảng blogger

Schema.org (hay thường gọi là Schema) là 1 thuật ngữ về các thẻ (Microdata) mà bạn có thể thêm vào thẻ HTML nhằm cung cấp thông tin, nội dung để các công cụ tìm kiếm hiểu dễ hơn từ đó nâng cao thứ hạng trang web của bạn trên các công cụ tìm kiếm.

Dữ liệu có cấu trúc (tiếng anh là Structured Data) là 1 tên ghép giữa Data (dữ liệu) và Structured (có cấu trúc, được lên cấu trúc) có giá trị giúp các công cụ tìm kiếm phân loại và index nội dung 1 trang web. Việc tối ưu cấu trúc theo chuẩn này sẽ giúp Google dễ đọc các thành phần của trang web hơn.

I. Dữ liệu có cấu trúc

Phân loại item của Schema.Org

Dữ liệu có cấu trúc có thể được sử dụng để đánh dấu nhiều loại dữ liệu khác nhau như: các sự kiện, các công thức nấu ăn, địa điểm, … Trong đó, có một số dữ liệu được sử dụng loại đánh dấu này là:

• Creative Work: Các sản phẩm hoặc tác phẩm sáng tạo.
• Event: Các sự kiện từ nhỏ đến lớn.
• Organization: Các tổ chức, cộng đồng.
• Person: Các cá nhân đăng tải tài liệu trực tuyến.
• Place: Địa điểm nào đó.

Với mỗi loại dữ liệu, chúng có các thuộc tính nhỏ hơn để mô tả chi tiết về chúng. Bạn có thể xem tất cả những loại dữ liệu được hỗ trợ cũng như các thuộc tính của nó tại Schema.org.

Dữ liệu có cấu trúc ảnh hưởng thế nào đến SEO ?

Về câu hỏi này, không ai dám khẳng định rằng nó ảnh hưởng trực tiếp đến kết quả xếp hạng của website trong quá trình làm SEO. Tuy nhiên, cũng không có ai bác bỏ nó. Bằng việc tham khảo ý kiến của nhiều người “trong nghề”, với những website được tích hợp dữ liệu có cấu trúc (đặc biệt là với website tích hợp đánh dấu dữ liệu cho Rich Snippet) có tỷ lệ click trong trang kết quả tìm kiếm cao hơn hẳn những website không có điều này. Với việc cải thiện được tỷ lệ click (CTR) vào kết quả tìm kiếm, thứ hạng website của bạn cũng sẽ được cải thiện phần nào. Như vậy, chúng ta không khẳng định rằng nó ảnh hưởng trực tiếp đến thứ hạng từ khóa nhưng nó cũng ảnh hưởng phần nào trong việc này.

Kiểm tra dữ liệu có cấu trúc

Bạn truy cập vào https://search.google.com/structured-data/testing-tool điền url của mình hoặc các đoạn mã để kiểm tra cấu trúc và bắt lỗi. Tuy nhiên cách fix lỗi không đơn giản, không phải ai cũng có thể làm được, điều này đòi hỏi bạn cần có kiến thức khá thâm hậu về cấu trúc HTML, JSON,...

Lấy ví dụ

Fix lỗi bằng việc khai báo thêm các thành phần còn thiếu và chèn đúng chỗ

<meta expr:content='data:post.firstImageUrl' itemprop='image' />
<meta content='data:post.link : data:post.url' expr:itemid='data:post.link' itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope' />
<meta expr:content='data:post.timestamp' itemprop='datePublished' />
<meta expr:content='data:post.lastUpdatedISO8601' itemprop='dateModified' />

<div itemprop='publisher' itemscope='' itemtype='https://schema.org/Organization'>
    <div itemprop='logo' itemscope='' itemtype='https://schema.org/ImageObject' style='display:none;'>
        <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlAdkU-PF687-dOCzu5jk5SxAk5FhzSRS9FiaQdSExmDLcsCNgLfa_CA1tC4IDLehmfrE2YKSGezShnfs_V826pJhToNowHg_TJ9axvs3AX3K6_k4w0hKhWVA1ZRs1zOO5xH0sbdz8Gd8/h0/hung1001.png' itemprop='url' />
        <meta content='300' itemprop='width' />
        <meta content='200' itemprop='height' />
    </div>
    <meta expr:content='data:blog.title' itemprop='name' />
</div>

Khi kiểm tra lại

Một lỗi khác

Thì ta phải set lại định dạng ngày giờ của blog

Nói chung lỗi và cảnh báo rất phong phú, nếu bạn còn lơ mơ mà muốn vọc vạch ngay thì ngồi fix lỗi cả ngày chưa hết.

Xóa cấu trúc cũ và cấu trúc lại từ đầu

Trong bài này tôi sẽ hướng dẫn bạn cách xóa cấu trúc cũ và tạo lại cấu trúc mới. Trước tiên bạn hãy backup lại template để tránh hậu quả không mong muốn nhé

Template blogger đa phần sử dụng dữ liệu cấu trúc dạng Microdata, qua việc sử dụng các thuộc tính itemprop, itemscope, itemtype nên việc xóa đi rất đơn giản

- Lần lượt tìm các với 3 từ khóa itemprop, itemscope, itemtype

+ Nếu là tag HTML

Ví dụ <div id='xxx' itemprop='publisher' itemscope='' itemtype='https://schema.org/Organization'> thì xóa hết thuộc tính chỉ để lại div,id,class.. hoặc bất kì thuộc tính nào không liên quan tới 3 từ khóa trên.

Kết quả <div id='xxx'>

+ Nếu là thẻ meta thì xóa luôn thẻ meta

+ Để xóa hvcard tìm class='fn' và xóa đi ví dụ <span class='fn'...> thì xóa thành <span...>

+ Để xóa hatom tìm class hfeed và xóa đi ví dụ <div class='post hfeed'...> thì xóa thành <div class='post'...>

+ Để xóa hentry tìm class hentry và xóa đi ví dụ <div class='post hentry'...> thì xóa thành <div class='post'...>

Sau khi xóa kết quả tôi thu được

* Trang chủ

* Trang bài viết (đã để lại breadcrumb do đã tích hợp chuẩn)

Bây giờ tôi tiến hành tạo lại cấu trúc

Header

+ Code ban đầu: <div class='header-wrap' id='header-wrap'>
+ Code tạo cấu trúc: <div class='header-wrap' id='header-wrap' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>

Sidebar

+ Code ban đầu: <div class='sidebar-wrapper' id='sidebar-wrapper'>
+ Code tạo cấu trúc: <div class='sidebar-wrapper' id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>

Footer

+ Code ban đầu: <div class='lowerbar-wrapper' id='lowerbar-wrapper'>
+ Code tạo cấu trúc: <div class='lowerbar-wrapper' id='lowerbar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>

Main wrapper hoặc content wrapper

+ Code ban đầu: <div class='body-row' id='content-wrapper'>
+ Code tạo cấu trúc: <div class='body-row' id='content-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>

Menu

+ Code ban đầu: <div class='tm-menu' id='tm-menu'>
+ Code tạo cấu trúc: <div class='tm-menu' id='tm-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>

Khi kiểm tra lại

Sau khi đã tạo cấu trúc cho các thành phần xong ta lại tiếp tục tạo cấu trúc cho các thành phần con của chúng

Ví dụ menu với khai báo là SiteNavigationElement thì sẽ truy cập vào http://schema.org/SiteNavigationElement để lấy các thuộc tính của nó

Ví dụ tôi chọn thuộc tính name để khai báo thì sẽ thêm itemprop='name' vào tag HTML

Kết quả

Tương tự với các thành phần khác !

Bạn có thể tham khảo nhiều template blogger khác nhau để xem cách tạo dữ liệu có cấu trúc của họ. Điều này cần sự đầu tư về thời gian, sự tỉ mỉ, kiên trì nhé :))

Thống kê dữ liệu có cấu trúc trong trang webmaster search console

II. Thẻ RICH

Thẻ rich là cách để cung cấp dữ liệu cho Google Tìm kiếm về các sự kiện, sản phẩm hoặc cơ hội trên trang web của bạn. Dữ liệu thẻ rich có thể được hiển thị cho người dùng dưới nhiều định dạng trên các thiết bị khác nhau và có thể giúp tăng lưu lượng truy cập vào trang web của bạn.

Việc thêm thẻ rich vào blog/website không khó, khó ở chỗ được google chấp thuận và hiển thị lên trang tìm kiếm. Trước hết thì ta cứ tích hợp chuẩn nhé

Thay các giá trị cần thay và chèn các code sau đây trước thẻ </head>. Sử dụng https://search.google.com/structured-data/testing-tool để kiểm tra cấu trúc

1. Corporate Contact

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "url": "<data:blog.canonicalUrl/>",
  "contactPoint": [{
    "@type": "ContactPoint",
    "telephone": "+1-877-746-0909",
    "contactType": "customer service",
    "contactOption": "TollFree",
    "areaServed": "US"
  },{
    "@type": "ContactPoint",
    "telephone": "+1-505-998-3793",
    "contactType": "customer service"
  },{
    "@type": "ContactPoint",
    "telephone": "+1-877-296-1018",
    "contactType": "customer service",
    "contactOption": [
      "HearingImpairedSupported",
      "TollFree"
    ],
    "areaServed": "US"
  }]
}
</script>

Full hướng dẫn: https://developers.google.com/search/docs/data-types/corporate-contact

2. Logo

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "url": "<data:blog.canonicalUrl/>",
  "logo": "http://www.example.com/images/logo.png"
}
</script>

Full hướng dẫn: https://developers.google.com/search/docs/data-types/logo

3. Sitelinks Searchbox

<b:if cond='data:view.isHomepage'>
<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "<data:blog.canonicalUrl/>",
    "potentialAction": [
        {
            "@type": "SearchAction",
            "target": "<data:blog.canonicalUrl/>search?q={search_term_string}",
            "query-input": "required name=search_term_string"
        },
        {
            "@type": "SearchAction",
            "target": "android-app://com.example/<data:blog.canonicalUrl/>search/?q={search_term_string}",
            "query-input": "required name=search_term_string"
        }
    ]
}
</script>
</b:if>

Full hướng dẫn: https://developers.google.com/search/docs/data-types/sitelinks-searchbox

4. Social Profile

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "<data:blog.title/>",
  "url": "<data:blog.canonicalUrl/>",
  "sameAs": [
    "http://www.facebook.com/your-profile",
    "http://instagram.com/yourProfile",
    "http://www.linkedin.com/in/yourprofile",
    "http://plus.google.com/your_profile"
  ]
}
</script>

Full hướng dẫn: https://developers.google.com/search/docs/data-types/social-profile

5. Article

Chuyển đến tiện ích → Blog1 → tìm và mở rộng thẻ <b:includable id='post' var='post'>...</b:includable> chèn đoạn script sau bên dưới <div class='post-footer'>

<b:if cond='data:view.isSingleItem'>
<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": "<b:if cond='data:post.firstImageUrl'><data:post.firstImageUrl/><b:else/>https://i.imgur.com/cLKUgqi.jpg</b:if>",
      "width": 720,
      "height": 480
    },
    "datePublished": "<data:post.timestampISO8601/>",
    "dateModified": "<data:post.timestampISO8601/>",
    "author": {
      "@type": "Person",
      "name": "<data:post.author/>"
    },
    "publisher": {
      "@type": "Organization",
      "name": "<data:blog.title/>",
      "logo": {
        "@type": "ImageObject",
        "url": "https://i.imgur.com/RlyG031.png"
      }
    }
  } </script>
</b:if>

Full hướng dẫn: https://developers.google.com/search/docs/data-types/article

Còn rất nhiều thẻ rich nữa nhưng bài có vẻ dài rồi nên xin phép dừng tại đây, truy cập https://developers.google.com/search/docs/guides/search-gallery để vọc vạch thêm

Good Luck !