Schema là gì? Tăng sức mạnh website với Schema Markup

Trang chủ
Tin tức & bài viết

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.

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

Schema giúp công cụ tìm kiếm hiểu và phân loại website chính xác hơn

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

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:

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

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

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

Công thức (Recipes) là một 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 website thủ công

JSON-LD là phương pháp cài đặt Schema được Google khuyến nghị sử dụ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:

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

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

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:

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.

<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!

Schema là gì? Tăng sức mạnh website với Schema Markup

Schema là gì? Tăng sức mạnh website với Schema Markup

Bài viết khác

Liên hệ