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 Mắt Bão tìm hiểu về công dụng của Schema là gì nhé!

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.

Schema có tác dụng gì?

Chúng ta có thể xem xét công dụng của Schema qua 2 phương diện: đối với bộ máy tìm kiếm và đối với người dùng.

Bộ máy tìm kiếm

Hiện nay, trên thế giới có hơn 1.94 tỷ website đang hoạt động. Nếu người dùng có thể hiểu được nội dung của những website này thì với search engine lại không hề đơn giản như vậy. Có rất nhiều từ ngữ phức tạp mà công cụ tìm kiếm không thể giải thích được.

Ví dụ với chuỗi ký tự “Moonlight”, nó có thể đang đề cập đến ánh trăng hoặc tên một bộ phim. Tùy theo ngữ cảnh mà từ “Moonlight” sẽ mang một ý nghĩa khác. Điều này sẽ gây cản trở cho công cụ tìm kiếm khi phải hiển thị các kết quả liên quan cho người dùng.

Do đó, để search engine hiểu và phân loại thông tin chính xác hơn, ta cần sắp xếp, hướng dẫn nó theo các cú pháp sẵn có. Và Schema chính là nơi cung cấp những dữ liệu cụ thể để search engine hiểu được các website đang viết nội dung thuộc thể loại nào, chủ đề gì.

Người dùng

Schema sẽ giúp website của bạn trở nên thu hút và cung cấp nhiều thông tin hữu ích hơn. Ví dụ, khi người dùng muốn tham gia một sự kiện nào đó, Schema giúp hiển thị các website có thông tin liên quan đến địa điểm, ngày diễn ra sự kiện…, từ đó, làm tăng tỷ lệ truy cập website. Hiện nay, có nhiều loại Schema tương ứng với các cách hiển thị website khác nhau trong kết quả tìm kiếm.

Hướng dẫn kiểm tra Schema Markup 

Để 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:

• Bước 1: Truy cập vào trang công cụ của Google. Sau đó, nhập link mà bạn muốn kiểm tra vào mục “Tìm nạp URL” và click “Chạy thử nghiệm”.
• Bước 2: Chờ quá trình nạp và phân tích hoàn tất. Tiếp đó, hệ thống sẽ trả về thông tin các loại dữ liệu có cấu trúc trong URL của bạn. Các dữ liệu càng nhiều thì chứng tỏ site của bạn được cấu trúc tốt và công cụ tìm kiếm càng dễ hiểu được nội dung.

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ý.

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ư:

• Tổ chức (Organization): Hiển thị các thông tin liên quan đến tổ chức đang sở hữu website như tên, địa chỉ, số điện thoại, URL website…
• Sự kiện (Event): Hiển thị các thông tin quan trọng của sự kiện như tên sự kiện, thời gian, địa điểm…
• Sản phẩm (Product): Hiển thị các thông tin sản phẩm như tên sản phẩm, giá tiền, xếp hạng…
• Đánh giá (Review): Hiển thị các thông tin đánh giá, xếp hạng cho một sản phẩm bất kỳ. Loại Schema này thường sẽ thích hợp với các trang blog marketing hoặc affiliate.
• Công thức (Recipes): Hiển thị các thông tin quan trọng của một bài blog chuyên đề ẩm thực như tên món ăn, thời gian hoàn thành, lượng calories, đánh giá…

Hướng dẫn cài đặt Schema cho WordPress

Cách đơn giản nhất để thêm Schema vào website là dùng Schema Plugin. Plugin này có thể hỗ trợ cho cả những Schema cũ.

Để cài đặt Schema Plugin, bạn cần làm theo những bước sau:

• Bước 1: Tại giao diện admin của WordPress, chọn mục Plugins -> Add New. Sau đó gõ từ khóa “Schema” trong ô tìm kiếm.
• Bước 2: Sau khi tìm được Schema Plugin, click vào nút “Install now” để cài đặt.

• Bước 3: Sau khi đã kích hoạt plugin thành công, di chuyển đến mục Schema -> Settings để bắt đầu cấu hình
• Bước 4: Trong trường General, điền các thông tin cơ bản của trang như About Page, Contact Page và upload logo cho website

Ngoài ra, bạn cũng cần điền các trường content, knowledge graph, search result để kết quả tìm kiếm được tối ưu hơn.

• Bước 5: Chuyển đến mục Schema đến Types để chỉ định loại schema nào sẽ được thêm vào

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

Ngoài cách sử dụng plugin của WordPress, bạn cũng 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ủ về nhà hàng của chúng ta có dạng sau:

<div>

<h1>My Restaurant</h1>

<h2>The best dishes all over the world!</h2>

<p>Address:</p> <p>123 abc</p> <p>Ho Chi Minh City, VN</p>

<p>Tel: 0123 456 789</p>

<p><a href=”http://www.myrestaurant.com/menu”>Click here to see our dishes!</a></p>

<p>We’re open:</p> <p>Mo-Sa 09:00-22:30</p>

<p>Su 09:00-23:00</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-LD
• RDFa
• 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”

  },

Tiếp theo, chúng ta sẽ đưa vào giờ mở cửa.

  “openingHours”: [

    “Mo-Sa 09:00-22:30”,

    “Su 09:00-23:00”

  ],

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=”address” typeof=”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=”menu” href=”http://www.myrestaurant.com/menu”>Click here to see our dishes!</a></p>

<p>We’re 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=”address” itemscope 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=”menu” href=”http://www.myrestaurant.com/menu”>Click here to view see our dishes!</a></p>

<p>We’re open:</p>

<p itemprop=”openingHours”>Mo-Sa 09:00 – 22:30</p>

<p itemprop=”openingHours”>Su: 09:00 – 23: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!