Thêm Dữ Liệu Có Cấu Trúc Schema Vào Website
Bài viết giới thiệu về ý nghĩa Schema trong SEO, đồng thời chia sẻ với các bạn một class dùng để hỗ trợ chuyện này : PHP Schema Helper
Nếu bạn là người có quan tâm đến SEO, thì chắc nhiều lần bạn nghe đến Schema.org và thắc mắc nó là gì ? có ý nghĩa gì đối với SEO ? Và thêm Schema vào website làm sao cho đúng cách ? Tất cả các câu hỏi trên sẽ được trả lời trong bài viết hôm nay. Đồng thời mình sẽ khuyến mãi cho các bạn một class chuyên nghiệp dùng để thêm schema vào website của bạn. Tin rằng sau bài viết này, bạn sẽ có một website hỗ trợ tối đa shema để đạt hiệu quả SEO onpage tốt nhất.
Shema.Org Là Gì ?
Schema là quy ước được tạo ra bởi ba nhà cung cấp công cụ tìm kiếm lớn nhất thế giới là Microsoft, Yahoo và Google nhằm mục đích tạo ra một cấu trúc dữ liệu chung nhất để định dạng nội dung trên các website. Nó là một ngôn ngữ đánh dấu.
Như các bạn biết, nội trung trên website được lồng nghép với code html và trăm nghìn thứ code khác nhau nữa. Và để định dạng các nội dung này, bạn sử dụng thẻ html để gom nhóm và css để định dạng cách hiển thị, đó là cách bạn hiển thị cho con người nhìn, còn các công cụ tìm kiếm thì không phải con người, và ngày càng trở nên “chảnh”, chúng muốn muốn chúng ta cũng phải làm sao cho chúng dễ hiểu, và Schema là cái chúng tạo ra để ta làm chúng thỏa mãn.
Schema không có tác dụng đối với người đọc, Nó là ngôn ngữ đánh dấu, trong một mớ code mà công cụ tìm kiếm không quan tâm, nó gió chúng ta tạo một cấu trúc cho website của mình bằng cách đánh dấu các đoạn dữ liệu có ý nghĩa, và tạo thành một đối tượng cụ thể nào đó.
Ví dụ như website của bạn giới thiệu một sản phẩm bạn sẽ định nghĩa nó là Book, sau đó trong trang, chỗ nào bạn định nghĩa là Tiêu đề thì bạn có thể đánh dấu nó là name, giới thiệu, mục lục, tác giả, …
Ngoài schema, cũng có các quy microformats, microdata, hoặc RDFa.
Google cung cấp tài liệu cụ thể và chi tiết về Schema hơn Microsoft và Yahoo. Bạn có thể đọc thêm về các câu hỏi thông dụng tại Schema.org FAQ.
Schema Hỗ Trợ SEO Như Thế Nào ?
Tất nhiên rồi, như đã nói ở trên, Schema là để làm thỏa mãn các công cụ tìm kiếm, vì vậy nhất định là nó tốt cho SEO rồi. Dưới đây là vài ý nghĩa cơ bản mình có thể nghĩ ra :
- Các công cụ tìm kiếm dễ phân loại hơn, nên sẽ rất dễ “kết” website của bạn.
- Trang có hỗ trợ schema.org sẽ được google ưu ái hiển thị đẹp hơn ở trang kiết quả tìm kiếm.
- Có điểm số cao hơn trong nhiều thuật toán bí ẩn của các máy tìm kiếm.
Ý nghĩa thứ ba có lẽ là hợp lý với chúng ta nhất. Dù sao đi nữa, các công cụ tìm kiếm đã chảnh lắm rồi, chúng ta lép vế thì phải chịu. À mà thôi, chúng ta bắt đầu …
Sử Dụng Schema Cùng Với Microdata Và RDFa
Câu trả lời là có, trước kia Schema chưa hỗ trợ, nhưng hiện tại thì Schema đã có kế hoạch để hỗ trợ, cụ thể là đối với rating, nếu dùng microdata thì ở trang kết quả hiển thị của google sẽ hiển thị các ngôi sao, còn đối với schema thì không.
Từ Khóa
Theo quy ước, chúng ta có rất ít các từ khóa cần phải nhớ :
- itemscope : Đánh dấu thẻ này bao bọc một đối tượng
- itemtype : Định nghĩa kiểu của dối tượng, giá trị chính là đường dẫn tới trang định nghĩa trên schema.org
- itemprop : Đánh dấu một thuộc tính của đối tượng.
- content : một vài thuộc tính cho phép bạn đặt content khác với giá trị hiển thị.
Ngoài ra, nếu thuộc tính của một đối tượng thuộc một kiểu đối tượng khác thì bạn vẫn có thể sử dụng hệt như các khối block html bình thường.
Trong trường hợp thuộc tính có kiểu là một class khác, thì bạn vẫn cứ như quy định mà làm, nó là thuộc tính, vì vậy sẽ dùng itemprop cho nó, nó là đối tượng của một class, nên sẽ khai báo itemscope và itemtype cho nó :
<div itemprop="review" itemscope itemtype="http://schema.org/Review" > <p itemprop="author" itemscope itemtype="http://schema.org/Organization">Duoc nguyen</p> <p itemprop="reviewBody">This is my review about this product, so good</p> <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <div itemscope itemtype="http://schema.org/Rating"> bestRating : <p itemprop="bestRating" content="5">5</p> ratingValue : <p itemprop="ratingValue">5</p> worstRating: <p itemprop="worstRating">2</p> </div> </div> </div>
Sự Kế Thường Trong Schema
Các class được định nghĩa trong Schema nhằm mục đích định nghĩa các đối tượng trong thế giới thật – các đối tượng thông dụng trên website. Và tất nhiên, chúng có tính kế thừa.
Tất cả mọi class đều kế thừa class Thing. Và khi kế thừa như vậy, chỉ cần class cha có thuộc tính nào, thì bạn có thể đánh dấu thuộc tính đó khi mô tả đối tượng thuộc class con.
Bạn có thể xem chi tiết tại : Full Hierarchy.
Thêm Schema Vào Website Như Thế Nào ?
Việc thêm Schema vào website khá đơn giản. Bạn chỉ cần đặt các thuộc tính mới vào trong thẻ html mà bạn thường dùng là được. Rất dễ.
Tuy nhiên bạn phải chú ý cách sắp xếp cho hợp lý, cũng như thẻ html, khi đánh dấu schema, bạn cũng phải để ý level của các element.Bạn không thể đóng thẻ rồi mới khai báo các thuộc tính của nó được đúng không ?
Đầu tiên chúng ta có đoạn code mẫu, chưa đánh dấu như sau :
<div> <p>This is product name</p> <img src="link_to_image"> <p> this is product description</p> <p>3434</p> <div> Review : <p>12</p> Rating : <p>14</p> </div> <div> <p>Address of you org</p> <p>Org's email</p> <img src="link_to_logo"> </div> <div> <p>Duoc nguyen</p> <p>This is my review about this product, so good</p> <div> <div> Best Rating<p>5</p> Ratin value<p>5</p> Worst Rating<p>2</p> </div> </div> </div> </div>
Ta có thể đánh dấu thành như sau :
<div itemscope itemtype="http://schema.org/Product" > <p itemprop="name" >This is product name</p> <img itemprop="image" src="link_to_image"> <p itemprop="description" > this is product description</p> <p itemprop="sku">This is SKU</p> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> ratingCount : <p itemprop="ratingCount">12</p> reviewCount: <p itemprop="reviewCount">14</p> </div> <div itemprop="brand" itemscope itemtype="http://schema.org/Organization"> <p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">Address of you org</p> <p itemprop="email">Org's email</p> <img itemprop="logo" src="link_to_logo"> </div> <div itemprop="review" itemscope itemtype="http://schema.org/Review" > <p itemprop="author" itemscope itemtype="http://schema.org/Organization">Duoc nguyen</p> <p itemprop="reviewBody">This is my review about this product, so good</p> <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <div itemscope itemtype="http://schema.org/Rating"> bestRating : <p itemprop="bestRating" content="5">5</p> ratingValue : <p itemprop="ratingValue">5</p> worstRating: <p itemprop="worstRating">2</p> </div> </div> </div> </div>
Như các bạn thấy ở trên, chúng ta đang mô tả một đối tượng Product. Đối tượng này kế thừa class Thing. Trong đối tượng product, có thuộc tính Review, thuộc tính này lại chính là đối tượng của class Review. vì vậy ta sử dụng itemprop="review" itemscope cho nó. Rất đơn giản.
Công Cụ Hỗ Trợ
Google có hỗ trợ bạn một công cụ để hỗ trợ đánh dấu rất trực quang, đồng thời cũng cung cấp cho bạn luôn một công cụ kiểm tra :
- Markup helper : Công cụ hỗ trợ đánh dấu.
- Richsnippet test : Công cụ hỗ trợ kiểm tra.
Đánh Dấu Bằng Markup Helper
Bước 1 : Đầu tiên bạn truy cần vào website Markup helper , sau đó chọn danh mục cho website của bạn, tiếp theo là nhập url. hoặc bạn cũng có thể dán code html của đoạn bạn muốn đánh dấu vào thẻ html, và cuối cùng là ấn “Bắt đầu” :
Bước 2 : Bạn sẽ được chuyển sang bước thứ hai, đây là bước chính, bạn sẽ dùng chuột để bôi đen vào text hoặc click chọn vào các div để định nghĩa kiểu thuộc tính của nó :
Bước 3 : Sau khi đã chọn xong, bạn ấn vào nút “Tạo HTML” để lấy code html của những gì bạn vừa đánh dấu :
Giờ bạn chỉ việc chép đoạn code này và bỏ vào website của mình là được, nếu đây chỉ là template, thì bạn xem sự thay đổi trong đoạn code này và trong template, sửa đổi lại template của bạn. Đối với theme, WordPress, mình sẽ hướng dẫn bạn tại WordPress Kite trong thời gian gần nhất.
Kiểm Tra
Sau khi có code, chúng ta sẽ sửa lại trên website của chúng ta, và sau đó sử dụng công cụ của google để kiểm tra xem chúng ta đã làm đúng hay chưa. Bằng cách truy cập vào webiste này. Tiếp theo chỉ cần nhập URL hoặc chép code vào để thử cũng được :
Class Hỗ Trợ Theme Schema
Như bạn thấy, để theme schema, bạn phải nhớ chính xác các từ khóa cũng như đường dẫn của các itemtype. Để đơn giản hóa việc này cho các bạn, Sen Việt có viết cho các bạn một thư viện hỗ trợ bạn làm điều này một cách tự động, bạn chỉ việc nhớ tên các thuộc tính là đủ, phần còn lại hãy để Sen Việt lo.
Lợi ích khi dùng class này là quá rõ :
- Bạn không cần phải nhớ url dài dòng.
- Tự động update khi Schema có thay đổi
Class này tên là PHP Schema Helper. Lần đầu tiên class này được sử dụng là trong Theme ClassifiedEngine của EngineThemes.
Cách Sử Dụng
Bước 1 : Không cần include dài dòng, bạn chỉ cần require_once một file autoload.php duy nhất, file này sẽ tự động load những class nào bạn sử dụng, chỉ những class được sử dụng mà thôi, các class khác sẽ không được load :
<?php require_once 'autoload.php'; ?>
Bước 2 : Giờ chỉ cần sử dụng nó trong thẻ html mà thôi, Bạn sử dụng như ví dụ dưới đây :
<div <?php echo Schema::Product(); ?> > <p <?php echo Schema::Product("name"); ?> >This is product name</p> <img <?php echo Schema::Product("image"); ?> src="link_to_image"> <p <?php echo Schema::Product("description") ?> > this is product description</p> <p <?php echo Schema::Product("sku") ?>>This is SKU</p> <div <?php echo Schema::Product("aggregateRating") ?>> ratingCount : <p <?php echo Schema::AggregateRating("ratingCount") ?>>12</p> reviewCount: <p <?php echo Schema::AggregateRating("reviewCount") ?>>14</p> </div> <div <?php echo Schema::Product("brand") ?>> <p <?php echo Schema::Organization("address") ?>>Address of you org</p> <p <?php echo Schema::Organization("email") ?>>Org's email</p> <img <?php echo Schema::Organization("logo") ?> src="link_to_logo"> </div> <div <?php echo Schema::Product("review") ?> > <p <?php echo Schema::Review("author") ?>>Duoc nguyen</p> <p <?php echo Schema::Review("reviewBody") ?>>This is my review about this product, so good</p> <div <?php echo Schema::Review("reviewRating") ?>> <div <?php echo Schema::Rating() ?>> bestRating : <p <?php echo Schema::Rating("bestRating", 5) ?>>5</p> ratingValue : <p <?php echo Schema::Rating("ratingValue") ?>>5</p> worstRating: <p <?php echo Schema::Rating("worstRating") ?>>2</p> </div> </div> </div> </div>
Như các bạn thấy, chúng ta sử dụng class chính là Schema và gọi đến các phương thức tĩnh, tên phương thức cũng là tên của class trong schema. PHP Schema Helper đã map toàn bộ class của schema, vì vậy bạn cứ yên tâm sử dụng. Đoạn code trên sẽ cho kết quả như sau :
<div itemscope itemtype="http://schema.org/Product" > <p itemprop="name" >This is product name</p> <img itemprop="image" src="link_to_image"> <p itemprop="description" > this is product description</p> <p itemprop="sku">This is SKU</p> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> ratingCount : <p itemprop="ratingCount">12</p> reviewCount: <p itemprop="reviewCount">14</p> </div> <div itemprop="brand" itemscope itemtype="http://schema.org/Organization"> <p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">Address of you org</p> <p itemprop="email">Org's email</p> <img itemprop="logo" src="link_to_logo"> </div> <div itemprop="review" itemscope itemtype="http://schema.org/Review" > <p itemprop="author" itemscope itemtype="http://schema.org/Organization">Duoc nguyen</p> <p itemprop="reviewBody">This is my review about this product, so good</p> <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <div itemscope itemtype="http://schema.org/Rating"> bestRating : <p itemprop="bestRating" content="5">5</p> ratingValue : <p itemprop="ratingValue">5</p> worstRating: <p itemprop="worstRating">2</p> </div> </div> </div> </div>
Các hàm này đều có chung một cấu trúc tham số như nhau :
- Tham số đầu tiên : Tên thuộc tính
- Tham số thứ hai : giá trị content của thuộc tính nếu có.
Quá đơn giản đúng không các bạn.
Lời Kết
Qua bài viết này, tin rằng bạn đã tính lũy cho mình những kiến thức nhất định về Schema, đồng thời bạn cũng đã biết thêm một thư viện vô cùng hữu ích để boot SEO cho website của mình.