Schema markup là gì?
Để trả lời được câu hỏi này, chúng ta cần phải hiểu dữ liệu có cấu trúc là gì?
Hiểu một cách đơn giản nhất, dữ liệu có cấu trúc là thông tin được định dạng theo cách có thể được hiểu một cách phổ biến. Đối với các website, dữ liệu có cấu trúc giúp cho công cụ tìm kiếm có thể dễ dàng cho biết một trang nói về nội dung gì và các thành phần khác nhau trên trang đó. Từ đó cho phép công cụ tìm kiếm trả về kết quả hữu ích hơn với truy vấn của người dùng.
Schema.org là một trang đánh dấu cho dữ liệu có cấu trúc do Google, Microsoft, Yahoo và Yandex phát triển. Mục đích chính là tạo ra một trang đánh dấu dữ liệu có cấu trúc để tất cả các công cụ tìm kiếm đều có thể hiểu được.
Schema có dạng một đoạn mã thêm vào website của bạn để xác định ý nghĩa của các thành phần khác nhau, như ngày tháng năm, hình ảnh, giờ mở cửa hay các đánh giá.
Nếu không có dữ liệu có cấu trúc, một website về cơ bản chỉ là thông tin không có ngữ cảnh. Việc bổ sung dữ liệu có cấu trúc giúp tạo thêm ngữ cảnh phù hợp cho thông tin đó.
Công việc này giúp cho công cụ tìm kiếm của Google có thể thu thập các phần liên quan của một trang web dưới dạng các rich snippet và dữ liệu chất lượng cao (rich data). Giúp website hiển thị kết quả có nhiều thông tin hơn vì thế mà còn tăng tỷ lệ nhấp chuột.
Dữ liệu có cấu trúc giúp chúng ta có được dữ liệu chất lượng cao như xếp hạng theo sao (star ratings) trên kết quả tìm kiếm
Mặc dù là một tính năng khá tốt nhưng chỉ có một tỷ lệ rất nhỏ các website sử dụng tính năng này. Một nghiên cứu của Searchmetrics năm 2014 cho thấy chỉ có 0.3% website đang sử dụng Schema.org để đánh dấu các trang web của mình và số liệu này không thay đổi kể từ năm 2014.
Do đó, nếu bạn sở hữu một website hay là web deverloper và bạn muốn bắt đầu sử dụng Schema markup. Nhưng lại không biết cách làm như thế nào? Bài viết dưới đây là hướng dẫn sử dụng Schema markup dành cho người mới. Hy vọng bài viết này có thể giúp cho những người mới có thể dễ dàng hiểu được về Schema markup.
Schema markup hoạt động như thế nào?
Schema.org đánh dấu các thành phần riêng lẻ của một website như hình ảnh hay tên, bằng một mã cụ thể. Mã này giúp công cụ tìm kiếm biết chính xác thành phần trang đó là gì.
Cách làm này phụ thuộc vào loại đánh dấu dữ liệu có cấu trúc bạn chọn dùng trên website của mình.
Schema markup có cả một danh sách dài cho bạn lựa chọn, tuy nhiên, không phải toàn bộ những thứ trên danh sách bạn cần để đưa lên một website.
Tuy nhiên, kho dữ liệu của Schema luôn được cập nhật và mở rộng. Nếu muốn, bạn có thể bổ sung một extension của chính bạn.
Đánh dấu website của bạn bằng dữ liệu có cấu trúc sẽ giúp công cụ tìm kiếm “đọc” được các website này một cách dễ dàng hơn và hiểu được nội dung nói gì.
Ví dụ, bạn có một trang nói về Avatar, bộ phim của đạo diễn James Cameron, bạn có thể đánh dấu trang đó bằng thể loại ‘phim’ để công cụ tìm kiếm biết đó là một trang nói về một bộ phim chứ không phải một dạng ảnh chân dung trực tuyến.
Như đã đề cập ở trên, “rich snippets” của Google và các dạng dữ liệu chất lượng khác xuất hiện trên kết quả tìm kiếm, như hình ảnh và công thức nấu ăn, có thể thực hiện được bằng cách sử dụng đánh dấu dữ liệu có cấu trúc như Schema.org.
Khi sử dụng Schema markup, trang của bạn trông hấp dẫn hơn và thú vị hơn trên kết quả tìm kiếm. Giúp tăng tỷ lệ nhấp chuột và từ đó tăng lượng traffic từ tìm kiếm tự nhiên.
Schema markup tạo cho kết quả tìm kiếm của bạn trông hấp dẫn, chất lượng và nhiều thông tin. Với hình ảnh hấp dẫn và xếp hạng sao (star rating):
Với kết quả kém phần hấp dẫn hơn này với một trích dẫn được tạo ra ngẫu nhiên:
Bạn sẽ click vào kết quả nào trong số 2 kết quả trên
Nghiên cứu của Searchmetrics cũng đã đề cập đến khả năng tăng thứ hạng thêm bốn bậc cho các trang có sử dụng Schema markup. Tuy nhiên, nhiều khả năng đây là do ngẫu nhiên chứ không phải là kết quả.
Như Searchmetrics đã đề cập, các quản trị viên website sử dụng Schema.org dường như “đi trước một bước so với đối thủ cạnh tranh” về nhiều khía cạnh khác nhau. Từ đó giúp tăng khả năng xếp hạng của website.
Hay nói cách khác, các quản trị viên website thông minh đã đánh dấu website của mình bằng Schema.org.
Trong bài hướng dẫn sử dùng Schema markup dành cho người mới, chúng tôi sẽ hướng dẫn sử dụng ba loại mã đánh dấu với Schema: microdata, RDFa và JSON-LD. Mỗi loại mã đánh dấu đều có ưu nhược điểm riêng và tất cả đều phụ thuộc vào lựa chọn của bạn để triển khai.
Hướng dẫn đánh dấu Schema markup cho website của mình?
1. Hướng dẫn đánh dấu Schema markup bằng Microdata
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. Trong đó bạn có thể chỉ cần sử dụng mã ở phần tiêu đề.
Trước khi bắt đầu, bạn cần tìm hiểu xem nội dung trang web của bạn thuộc “loại nội dung” nào. Đó là một công thức? Một bài đánh giá? Một tác phẩm âm nhạc hay một sự kiện? Việc này sẽ quyết định bạn sẽ đánh dấu nội dung đó như thế nào.
Giả sử bạn có một website về một nhà hàng có tên Noodle Paradise. Trang chủ của website này có thể có dạng sau:
<div>
<h1>Noodle Paradise</h1>
<h2>The best noodles in all of London!</h2>
<p>Address:</p>
<p>260 Elephant Road</p>
<p>London, UK</p>
<p>Tel: 01234 567890</p>
<p><a href=”http://www.noodleparadise.com/menu”>Click here to view our tasty range of dishes!</a></p>
<p>We’re open: </p>
<p>Mon-Sat 12pm – 9:30pm</p>
<p>Sun: 1pm – 8pm</p>
</div>
Đầu tiên, bạn cần xác định phần nào của trang web nói về nhà hàng đó. Với chúng tôi, đó 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ể. Tuy nhiên, nội dung đó là gì? 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 trang, tức là, một nhà hàng.
<div itemscope itemtype=”http://schema.org/restaurant”>
Loại nội dung được đưa ra dưới dạng các URL, trong trường hợp này là http://schema.org/restaurant. Nếu trang của bạn nói về một bộ phim, bạn có thể sử dụng URL http://schema.org/movie. Bạn có thể duyệt danh sách đầy đủ các loại nội dung cộng với các phần đuôi mở rộng (extension) để tìm loại nội dung phù hợp với bạn.
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”>Noodle Paradise</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. Khi đánh dấu đặc tính của nội dung, bạn không cần đánh dấu cả dòng, chỉ đoạn nào thuộc đặc tính liên quan thôi. Nếu bạn có một dòng như Phone number: 01234 567890, bạn chỉ cần đặt thẻ ở hai đầu của chuỗi số mà thôi.
<h2 itemprop=”description”>The best noodles in all of London!</h2>
<p>Address:</p>
<span itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>
<p itemprop=”streetAddress”>260 Elephant Road</p>
<p itemprop=”addressLocality”>London, UK</p></span>
<p>Tel: <span itemprop=”telephone”>01234 567890</span></p>
<p><a itemprop=”menu” href=”http://www.noodleparadise.com/menu”>Click here to view our tasty range of dishes!</a></p>
<p>We’re open:</p>
<p itemprop=”openingHours”>Mon-Sat 12pm – 9:30pm</p>
<p itemprop=”openingHours”>Sun: 1pm – 8pm</p>
</div>
Nếu các đoạn mã này trông quá phức tạp thì bạn cũng đừng quá lo lắng. Bởi mỗi trang trên Schema.org cho các loại nội dung khác nhau đều có ví dụ hướng dẫn cách sử dụng, nên bạn có thể tham khảo mã ở phần đó.
Bạn cũng có thể sử dụng công cụ Google’s Structured Data Markup Helper để có thể dễ dàng đánh dấu trang web của bạn. Để sử dụng, chỉ cần chọn loại nội dung của bạn, dán vào URL trang của bạn hay nội dung bạn muốn đánh dấu, sau đó bôi đen để đánh dấu các thành phần khác nhau.
Mặc dù có thể hơi hạn chế chút (ví dụ, chọn loại ‘nhà hàng’ sẽ không cung cấp cho bạn tùy chọn để đánh dấu một mô tả). Vì vậy, tùy thuộc vào việc bạn muốn đánh dấu nội dung gì bạn sẽ cần bổ sung theo cách thủ công.
Và nếu bạn muốn kiểm tra phần đánh dấu của bạn, Google có một Công cụ kiểm tra dữ liệu có cấu trúc giúp theo dõi các lỗi trên trang web đã hoàn thành của bạn.
2. Hướng dẫn đánh dấu Schema markup bằng RDFa
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.
Nếu bạn đã biết cách sử dụng mã đánh dấu Microdata với Schema.org, thì RDFa không có sự khác biệt. Giống với microdata, các thẻ tích hợp với mã HTML hiện có trong phần chính của nội dung chính. Chúng ta hãy lấy một website đơn giản về nhà hàng làm ví dụ.
Đoạn mã HTML gốc cho trang chủ về nhà hàng của chúng ta có dạng sau:
<div>
<h1>Noodle Paradise</h1>
<h2>The best noodles in all of London!</h2>
<p>Address:</p>
<p>260 Elephant Road</p>
<p>London, UK</p>
<p>Tel: 01234 567890</p>
<p><a href=”http://www.noodleparadise.com/menu”>Click here to view our tasty range of dishes!</a></p>
<p>We’re open:</p>
<p>Mon-Sat 12pm – 9:30pm</p>
<p>Sun: 1pm – 8pm</p>
</div>
Đầu tiên, 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. Bạn có thể điều hướng đến trang Restaurant trên Schema.org để biết cách đánh dấu các thành phần khác nhau. 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 với 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”>
Đến đây chúng ta đã cho máy tìm kiếm biết rằng đây là một trang nói về một nhà hàng, nhưng chưa nói phần còn lại của trang nói về nội dung gì. 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. Ví dụ, chúng ta sẽ đánh dấu tên nhà hàng bằng thẻ name, như sau:
<h1 property=”name”>Noodle Paradise</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ínhitemprop. Bạn có thể tham khảo các danh sách và ví dụ trên Schema.org để biết loại thành phần nào được định nghĩa là các loại hay các thuộc tính. Đố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 noodles in all of London!</h2>
<p>Address:</p>
<div property=”address” typeof=”PostalAddress”>
<p property=”streetAddress”>260 Elephant Road</p>
<p property=”addressLocality”>London, UK</p>
</div>
<p>Tel: <span property=”telephone”>01234 567890</span></p>
<p><a property=”menu” href=”http://www.noodleparadise.com/menu”>Click here to view our tasty range of dishes!</a></p>
<p>We’re open:</p>
<p property=”openingHours”>Mon-Sat 12pm – 9:30pm</p>
<p property=”openingHours”>Sun: 1pm – 8pm</p>
</div>
Để hỗ trợ việc đánh dấu của bạn, mỗi trang Schema.org cho một loại nội dung cụ thể hay thuộc tính như “nhà hàng”, “số điện thoại” hay “giờ mở cửa”. Đều có ví dụ riêng để bạn tham khảo cách sử dụng. Bạn cũng có thể sử dụng Công cụ Dữ liệu Có cấu trúc của Google để hỗ trợ bạn phát hiện bất kỳ lỗi nào trong đoạn mã của bạn.
Một số tài nguyên khác hữu ích khi viết hướng dẫn này là Schema.org mô hình dữ liệu cho RDFa, mô hình này giải thích cách sử dụng Microdata của Schema.org phù hợp với RDFa và W3C RDFa Primer. W3C primer chủ yếu tập trung vào các kho dữ liệu khác như Dublin Core, nhưng bạn có thể sử dụng tổ hợp phím Ctrl-F để tìm các bit liên quan đến Schema.
3. Hướng dẫn đánh dấu Schema markup bằng JSON-LD
JSON-LD, viết tắt của từ JavaScript Object Notation for Linked Data, là một phương tiện giải mã dữ liệu được liên kết bằng cách sử dụng JSON. Đây là một W3C Recommendation và được thêm vào làm định dạng khuyến cáo cho Schema.org năm 2013.
Google mới đầu do dự hỗ trợ sử dụng JSON-LD làm một định dạng cho Schema.org markup. Họ thích các web deverloper sử dụng mã inline markup như Microdata hay RDFa hơn. Trong đó, bạn có thể dễ dàng thấy được mã đánh dấu được áp dụng với từng thành phần riêng lẻ. Tuy nhiên, kể từ đó họ đã tiếp tục sử dụng định dạng này và khuyên các web deverloper sử dụng JSON-LD để đánh dấu trang web của mình. Nghĩa là có rất nhiều tài nguyên phù hợp cho JSON-LD trên diễn đàn Google Developers.
Ư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.
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”>
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>
Tiếp theo bạn cần 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”,
Tiếp theo bạn cần 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”,
Tiếp theo chúng ta cần xác định tên nhà hàng và mô tả về nhà hàng này. Nếu chúng ta sử dụng một mã đánh dấu inline markup như Microdata hay RDFa để xác định các thành phần này, thì các thành phần này cần xuất hiện trên trang chủ của website. Tuy nhiên, một ưu điểm khác 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”: “Noodle Paradise”,
“description”: “The best noodles in all of London!”,
Bây giờ chúng ta cần xác định địa chỉ cho nhà hàng. Bởi vì địa chỉ sẽ có thêm các thuộc tính khác và chính xác hơn thuộc về địa chỉ đó như địa chỉ đường/phố và địa danh. Chúng ta sẽ đưa các thuộc tính này vào trong một cặp dấu ngoặc nhọn khác, như sau:
“address”: {
“@type”: “PostalAddress”,
“addressLocality”: “London, UK”,
“streetAddress”: “260 Elephant Road”,
},
Tiếp theo, chúng ta sẽ đưa vào giờ mở cửa. Bởi vì chúng ta có một vài cặp giờ mở cửa khác nhau trên website một cặp giờ từ thứ Hai đến thứ Bảy và một cặp giờ cho Chủ nhật. Chúng ta sẽ cho các cặp giờ này vào các dòng riêng biệt, bên trong một cặp dấu ngoặc vuông.
Giờ mở cửa từ thứ Hai đến thứ Bảy từ 12h trưa đến 21h30 và Chủ nhật từ 13h chiều đến 20h. Các ngày trong tuần được xác định cụ thể theo các kết hợp gồm hai chữ (Mo, Tu, We, Th, Fr, Sa, Su) và thời gian luôn được viết theo chế độ 24 giờ.
“openingHours”: [
“Mo-Sa 12:00-21:30”
“Su 13:00-20: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”: “+441234567890”
“menu”: “http://www.noodleparadise.com/menu”
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”: “Noodle Paradise”,
“description”: “The best noodles in all of London!”,
“address”: {
“@type”: “PostalAddress”,
“addressLocality”: “London, UK”,
“streetAddress”: “260 Elephant Road”
},
“openingHours”: [
“Mo-Sa 12:00-21:30”,
“Su 13:00-20:00”
],
“telephone”: “+441234567890”,
“menu”: “http://www.noodleparadise.com/menu”
}
</script>
Như đã đề cập ở trên, diễn đàn Google Developers có một số tài nguyên hữu ích để sử dụng JSON-LD với Schema.org, gồm một bài giới thiệu về dữ liệu có cấu trúc, bài này lấy JSON-LD làm ví dụ về định dạng. Và bạn có thể sử dụng công cụ thử nghiệm dữ liệu có cấu trúc của Google để kiểm tra cú pháp của bạn có bị lỗi không.
Nguồn: searchenginewatch.com
Dịch bởi PersoTrans
Biên tập bởi vietmoz.com
