Hướng dẫn cài đặt schema cho website

in bài viết Chia sẻ trên Facebook

1. Schema là gì?

Schema hay Schema.org, Schema Markup là một đoạn code html hoặc code khai báo java script dùng để đánh dấu dữ liệu có cấu trúc (structured data)Schema được tạo ra với sự hợp tác của 4 công cụ tìm kiếm nổi tiếng hiện nay là Google, Bing, Yandex và Yahoo. Cùng Hurasoft tìm hiểu về công dụng của Schema là gì nhé!

Schema là ngôn ngữ dùng để đánh dấu dữ liệu có cấu trúc

Schema được gắn vào website để giúp công cụ tìm kiếm dễ dàng nhận biết, phân loại và trả về kết quả nhanh chóng, chính xác hơn. Nếu không có Schema thì một website sẽ chỉ bao gồm các thông tin không có ngữ cảnh.

Giao diện công cụ kiểm tra dữ liệu có cấu trúc của Google

Để biết được website có Schema Markup hay chưa và dữ liệu cấu trúc của bạn đang gặp phải những vấn đề gì, cách đơn giản nhất là sử dụng công cụ kiểm tra dữ liệu có cấu trúc của Google theo các bước sau:

Ngoài ra, cần lưu ý mục “Lỗi” và “Cảnh báo” phía bên phải. Nếu xuất hiện lỗi hoặc cảnh báo, hãy click vào từng mục để tìm vấn đề và xử lý.

Hệ thống trả về thông tin các loại dữ liệu có cấu trúc trong URL

2. Một số loại Schema phổ biến

Hiện nay, có rất nhiều loại schema khác nhau để hỗ trợ website. Trong đó, một vài dạng schema phổ biến có thể kế đến như:

3. Hướng dẫn cài đặt Schema cho website thủ công

JSON-LD là phương pháp cài đặt Schema được Google khuyến nghị sử dụng

Bạn  có thể thêm Schema vào website một cách thủ công. Dù đòi hỏi nhiều thao tác về code, phương pháp này có ưu điểm là bạn có thể chọn bất kỳ loại Schema nào cho từng trang và bài post.

Đoạn mã HTML gốc cho trang chủ có dạng sau:

<div>
<h1>Thiết kế website, web bán hàng và ứng dụng mobile chuyên nghiệp</h1>
<h2>Khách hàng của bạn <b>ở mọi nơi</b><br/> và bạn cũng nên như vậy</h2>
<p>Giải pháp thiết kế website, phần mềm toàn diện của HuraSoft giúp bạn tiếp cận khách hàng ở mọi nơi để bán hàng và chăm sóc họ.</p>
<p>Address:</p> <p>Thanh Xuan</p> <p>Hanoi, Vietnam</p>
<p>Tel: 02422 138 068</p>
<p><a href=”https://www.hurasoft.vn/solution.html”>Sản phẩm và Giải Pháp </a></p>
</div>

Sau đây chúng ta sẽ đánh dấu thuộc tính Schema Markup cho nhà hàng trên theo 3 cách sau: JSON-LDRDFa và Microdata


Sử dụng JSON-LD

JSON-LD Schema Markup là gì?

Trong các cách thì JSON-LD là phương pháp cài đặt Schema hiệu quả hàng đầu được khuyên dùng bởi chính Google. JSON-LD được thực hiện dựa trên Javacript. Bạn sẽ tự thêm Schema vào website bằng các đoạn script nên dễ dàng để tìm đọc và debug lỗi hơn.

Một đoạn mã JSON-LD nhìn chung sẽ có dạng như sau:

 <script type=”application/ld+json”>
{
code goes here
}
</script>

Ưu điểm khi sử dụng JSON-LD với Schema.org markup là nó giới hạn phần lớn mã liên quan ở phần tiêu đề trang, bố trí các thẻ khác ở ngoài phần nội dung chính và giúp cho việc đọc mã rõ ràng và dễ hơn.

Hướng dẫn thêm Schema Markup bằng JSON-LD

Bước 1: Khai báo định dạng

Chú thích JSON-LD có được cung cấp bên trong một khối script (<script></script>). Để bắt đầu, chúng ta sẽ nhập dòng này để cho thấy chúng ta đang sử dụng định dạng JSON-LD:

<script type=”application/ld+json”>

 

Bước 2: Thêm Object Structure

Nên đặt mã JSON-LD của bạn bên trong dấu ngoặc nhọn nếu không công cụ tìm kiếm sẽ không phân tách dữ liệu được hoặc không áp dụng được với trang. Trong JavaScript được gọi là một object structure. Do đó, nhìn chung đoạn mã của bạn có dạng như sau:

 <script type=”application/ld+json”>

{

code goes here

}

</script> 

Bước 3: Sử dụng context để xác định kho dữ liệu đang được liên kết đến

Trong trường hợp của chúng ta là Schema.org. Vì vậy, cần thêm một dấu phẩy ở cuối mỗi dòng mã.

@context:http://schema.org”,

Bước 4: Xác định loại nội dung cần đánh dấu

Thuộc tính này tương đương với thuộc tính itemtype trên Microdata, hay thuộc tính typeof trên RDFa.

Chúng ta sẽ sử dụng một website đơn giản nói về nhà hàng làm ví dụ. Như vậy loại nội dung của chúng ta sẽ là “Restaurant”:

 “@type:Restaurant,

Ưu điểm của JSON-LD là nó cho phép bạn xác định các thành phần. Và không nhất thiên cần phải xuất hiện trên trang.

name:My Restaurant,
 
description:The best dishes all over the world!,

Bây giờ chúng ta cần xác định địa chỉ cho nhà hàng, như sau:

address: {
 
    “@type:PostalAddress,
 
    “addressLocality:Ho Chi Minh City, VN,
 
    “streetAddress:123 abc
 
  },

Cuối cùng, chúng ta sẽ thêm số điện thoại và URL menu. Cả hai đều khá đơn giản trừ việc số điện thoại cần được viết dưới dạng chuỗi các số liên tục và có mã khu vực như sau:

“telephone”: “+84123456789”,

  “menu”: “http://www.myrestaurant.com/menu”

Schema Markup trên JSON-LD hoàn chỉnh

Mã đánh dấu hoàn chỉnh sẽ có dạng như sau:

<script type=application/ld+json>
 
{
 
  “@context: “http://schema.org”,
 
  “@type: “Restaurant,
 
  “name: “My Restaurant,
 
  “description: “The best dishes all over the world!,
 
  “address: {
 
    “@type: “PostalAddress,
 
    “addressLocality: “Ho Chi Minh City, VN,
 
    “streetAddress: “123 abc
 
  },
 
  “openingHours: [
 
    “Mo-Sa 09:00-22:30,
 
    “Su 09:00-23:00
 
  ],
 
  “telephone: “+84123456789,
 
  “menu: “http://www.myrestaurant.com/menu”
 
}
 
</script>

Sử dụng RDFa

RDFa Schema markup là gì?

RDFa viết tắt của từ Resource Description Framework in Attributes là một đuôi mở rộng (extension) của mã HTML5 được thiết kế để giúp bạn đánh dấu dữ liệu có cấu trúc. Đây là một W3C Recommendation và nó có thể dùng để kết hợp nhiều dữ liệu có cấu trúc khác nhau. Nếu bạn muốn thêm dữ liệu có cấu trúc trong trường hợp Schema.org không đủ đáp ứng.

Hướng dẫn thêm Schema markup bằng RDFa

Bước 1: Khai báo Schema Markup

Chúng ta cần xác định rằng dữ liệu chúng ta đang sử dụng là Schema.org. Và website này nói về một nhà hàng. Các ví dụ ở dưới cùng sẽ chỉ cho bạn biết cách thực hiện. Chỉ cần click vào thẻ RDFa để xem các ví dụ về định dạng RDFa.

Chúng ta cần sử dụng thẻ vocab cùng URL http://schema.org/ để xác định dữ liệu cho đánh dấu của mình. Loại trang được xác định bởi thẻ typeof; khác với Microdata. Các loại trang được chỉ thể hiện bằng một hay hai dữ liệu thay vì các URL.

 <div vocab=http://schema.org/” typeof=”Restaurant”>

 Bước 2: Xác định thuộc tính

Bây giờ chúng ta cần xác định các thành phần này dưới dạng các thuộc tính, sử dụng thuộc tính property. Chúng ta sẽ đánh dấu tên nhà hàng bằng thẻ name, như sau:

 <h1 property=name>My Restaurant</h1>

Thuộc tính typeof cũng có thể được dùng khi bạn cần xác định thêm một thuộc tính khác. Ví dụ, bạn có thể xác định thêm thuộc tính address bằng loại thông tin PostalAddress, như sau:

 <div property=address” typeof=PostalAddress>

Typeof gần như tương đương với itemtype trong Microdata. Còn property tương đương với thuộc tính itemprop. Đối với trang chủ nhà hàng của chúng ta, chúng ta sẽ đánh dấu phần còn lại của trang như sau:

<h2 property=description>The best dishes all over the world!</h2>
 
<p>Address:</p>
 
<div property=addresstypeof=PostalAddress>
 
<p property=streetAddress>123 abc</p>
 
<p property=addressLocality>Ho Chi Minh City, VN</p>
 
</div>
 
<p>Tel: <span property=telephone>0123 456 789</span></p>
 
<p><a property=menuhref=http://www.myrestaurant.com/menu”>Click here to see our dishes!</a></p>
 
<p>Were open:</p>
 
<p property=openingHours>Mo-Sa 09:00-22:30</p>
 
<p property=openingHours>Su 09:00-23:00</p>
 
</div>

Sử dụng Microdata

Microdata Schema Markup là gì?

Microdata là một tập hợp các thẻ HTML5 và là một giải pháp đơn giản hơn để giải thích các thành phần HTML bằng các thẻ mà công cụ tìm kiếm có thể đọc được.

Microdata là một mã đánh dấu tương đối dễ sử dụng và phù hợp với người mới. Nhược điểm là bạn phải đánh dấu từng mục riêng lẻ trong phần nội dung chính của trang web. Khi đánh dấu Schema markup bằng Microdata sẽ rất mất công so với việc đánh dấu bằng JSON-LD.

Hướng dẫn thêm Schema Markup bằng Microdata

Sử dụng tương tự ví dụ nhà hàng phía trên. Sau đây là những bước thêm Schema Markup bằng Microdata;

Bước 1: Khai báo Schema Markup

Đầu tiên, bạn cần xác định phần nào của trang web nói về nhà hàng đó. Đó là tất cả những thứ nằm giữa hai thẻ <div>. Vì vậy, ta thêm “itemscope” vào thẻ <div>:

 <div itemscope>

Khi thêm thẻ itemscope, chúng ta xác định rằng mã HTML có trong khối <div>…</div> nói đến một nội dung cụ thể. Tiếp theo chúng ta cần sử dụng thuộc tính itemtype để xác định loại nội dung của nhà hàng.

 <div itemscope itemtype=http://schema.org/restaurant”>

 

Bước 2: Khai báo thuộc tính

Tiếp theo chúng ta cần đánh dấu phần nào của trang web sẽ có tên nhà hàng. Phần nằm giữa thẻ <h1> của chúng ta. Thẻ này được gọi là một thẻ itemprop, như bạn có thể đoán, để dán nhãn các đặc tính của một nội dung.

 <h1 itemprop=name>My Restaurant</h1>

Chúng ta có thể tiếp tục và đánh dấu phần còn lại của trang theo cách này.

<h2 itemprop=description>The best dishes all over the world!</h2>
 
<p>Address:</p>
 
<span itemprop=addressitemscope itemtype=http://schema.org/PostalAddress”>
 
<p itemprop=streetAddress>123 abc</p>
 
<p itemprop=addressLocality>Ho Chi Minh City, VN</p></span>
 
<p>Tel: <span itemprop=telephone>0123 456 789</span></p>
 
<p><a itemprop=menuhref=http://www.myrestaurant.com/menu”>Click here to view see our dishes!</a></p>
 
<p>Were open:</p>
 
<p itemprop=openingHours>Mo-Sa 09:0022:30</p>
 
<p itemprop=openingHours>Su: 09:0023:00</p>
 
</div>

Trên đây là những thông tin chi tiết về Schema, vai trò và cách cài đặt nó trên website. Hy vọng bài viết đã đem lại những kiến thức bổ ích cho quá trình SEO. Chúc bạn thành công!

 Nguồn: Tham khảo