Tìm hiểu về Structured Data trong Seo và thiết kế web

Thảo luận trong 'Sưu Tầm & Lưu Trữ' bắt đầu bởi seotadien, 24/11/14.

Khóa đào tạo Khởi nghiệp kinh doanh nhỏ trên internet
Bạn đang tham gia thảo luận tại Diễn Đàn SEO uy tín nhất Việt Nam VNSEOSEM.COM

Đã xem: 141

Trạng thái chủ đề:
Không mở trả lời sau này.
  1. seotadien Khách

    Đây là thắc mắc của một bạn gì đó về Microformats... mình đã đọc nhiều tài liệu thấy bài viết này hay nên post lại cho anh em tham khảo nhá :p
    Structured data là gì? và tại sao nó lại quan trọng trong thiết kế web hiện nay. Câu trả lời sẽ được giải đáp ngay sau đây.

    Structured Data – Dữ liệu có cấu trúc là những thông tin đã được định dạng. Các search engines như Google, Bing hay Yahoo sử dụng dữ liệu có cấu trúc để lọc kết quả tìm kiếm, đưa ra những kết quả chính xác và có nghĩa hơn với người dùng.

    Tại sao chúng ta lại cần Structured Data – Dữ liệu có cấu trúc?

    Bình thường thì con người ta khi lướt web, đọc báo thì không nói làm gì, vì những thông tin dó chúng ta có thể hiểu được. Nhưng với search engine thì sao, chúng đâu thể hiểu được bài viết đang nói về vấn đề gì. Ví dụ như bài viết nói về ‘jaguar’ và một con spider tiến hành duyệt qua trang báo đó, và nó không thể biết nghĩa của từ ‘jaguar’ là gì, có thể là một loài động vật, cũng có thể là một loại máy móc. Điều đó gây ra khó khăn cho Search Engine để hiển thị chính xác kết quả tìm kiếm cho người dùng. Google đã tuyên bố như sau:


    Mã:


    Structured data đã trở thành một phần quan trọng của hệ thống website
    Structured data is becoming an increasingly important part of the web ecosystem – Google
    [​IMG]
    Do đó, với structured data, bạn có thể giúp cho các search engine hiểu được nội dung của bạn và hiển thị một cách tích cực hơn.
    Structure data có những loại nào?

    Chúng có 3 dạng như sau

    • Microdata
    • Microformats
    • RFDa
    Trước khi đi sâu vào từng dạng, bạn cần chú ý rằng: bạn không thể sử dụng nhiều hơn một loại structured data ở bên trên, vì sẽ gây nhầm lẫn cho các search engines. Vì vậy chúng ta cần chọn cho mình một loại trong số 3 loại trên mà thôi.
    I. Microdata

    Microdata là kiểu cấu trúc được sử dụng phổ biến nhất, nó được thiết kế bởi Schema.org,
    Microdata có 3 thành phần là: itemscope, itemtypeitemprops. Itemscope là thuộc tính bao quanh thông tin về item đó. Bằng cách thêm thuộc tính Itemscope này vào mã HTML của bạn, bạn đã quy định rằng nội dung trong đó là một nội dung đặc biệt.


    Mã:


    <div itemscope>
    Foo Fighters Concert
    </div>
    Thêm thuộc tính Itemtype để xác định kiểu của dữ liệu. Sử dụng thuộc tính này ngay sau Itemscope.

    Mã:


    <div itemscope itemtype=”http://schema.org/Event”>
    Foo Fighters Concert
    <div>
    Ngay bây giờ, các search engines có thể đã hiểu một phần nào đó về nội dung mà bạn muốn truyền tải. Và chúng ta có thể cung cấp thông tin cho nó một cách rõ ràng hơn bằng thuộc tính Itemprop. Ở ví dụ dưới đây, nếu bạn muốn mô tả vị trí cho Foo Fighters Concert thì bạn có thể sử dụng cấu trúc itemprop=”location” để định vị trí cho nó hoặc itemprop=”name” để thông báo sự kiện này tên là gì?

    Mã:


    <div itemscope itemtype=”http://schema.org/Event”>
    <span itemprop=”name”>Foo Fighters Concert</span>.
    Concert will take place at <span itemprop=”location”>Madison Square Garden</span>.
    <div>
    Để biết thêm các kiểu dữ liệu được phép khai báo, bạn có thể đọc bài viết danh sách các itemtypes của Schema
    1. Dates and Times

    Ngày tháng và thời gian là loại khó có thể phân định rạch ròi được. Ví dụ như 08/10/12 thì có nhiều nơi là 8 October 2012 hoặc 10 August 2012… và đó cũng là vấn đề đối với các search engines.

    Để cung cấp thông tin chính xác về thời gian chúng ta cần thêm một thuộc tính ‘datetime’. Thuộc tính này có định dạng mặc định là ‘YYYY-MM-DD’.


    Mã:


    <time datetime="2011-04-01">04/01/11</time>
    Đoạn code trên sẽ có định dạng là 1 April 2011
    Thuộc tính datetime có thể sử dụng được cho cả thời gian.


    Mã:


    <time datetime="2011-05-08T19:30">May 8, 7:30pm</time>
    Đoạn code bên trên sẽ hiển thị kết quả là: May 8th 2011, 7.30pm. Và nếu bạn muốn thêm vào mã HTML của mình thì bạn có thể thêm như sau:

    Mã:


    <div itemscope itemtype=”http://schema.org/Event”>
    <span itemprop=”name”>Foo Fighters Concert</span>.
    Concert will take place at <span itemprop=”location”>Madison Square Garden</span>
    on <time datetime="2011-05-08T19:30">May 8, 2011 at 7:30pm</time>.
    <div>
    2. Implicit Information Implicit Information
    Implicit Information Implicit Information tạm hiểu là thông tin ngầm. Đây là thông tin mà nó sẽ không được hiển thị cho cả người dùng và các search engines. Một vài thông tin được chèn ẩn vào các đối tượng đa phương tiện như video, movie…Để hiểu rõ hơn về cái này, thì mình có một ví dụ thế này. Giả sử bạn có 1 đoạn mã để chạy video, và bạn muốn video đó xuất hiện như một rich snippet thì làm thế nào. OK chỉ cần thêm một chút thông tin cho nó như sau:


    Mã:


    <meta itemprop=”Duration” content=”T2M40S” />
    Đoạn mã trên nói cho các search engines rằng video này dài 2 phút 40s. (T2M40S – là định dạng ngày tháng và thời gian theo chuẩn ISO8601.
    II. MicroFormat

    MicroFormat là sự mở rộng các thẻ HTML với các thông tin ngữ nghĩa. Và chúng có các kiểu phổ biến là hCard, hCalendar, hReview. hCard được sử dụng cho người, công ty hoặc tổ chức. hCalendar được sử dụng cho các thông tin về sự kiện. và hReview được sử dụng cho nhà hàng, sách, phim….

    Khi chúng ta nói về một trận đấu bóng. Điều đầu tiên là chúng ta cần phải nói cho các search engines rằng trang web đó đang có một sự kiện bằng thuộc tính hCalendar trong thẻ


    Mã:


    <head profile=”http://microformats.org/hcalendar”>
    Tiếp theo chúng ta nói cho search engines về 1 phần của event.

    Mã:


    <div class=”vevent”>
    Và mọi thứ nằm trong thẻ div này sẽ biểu diễn cho search engine thêm thông tin về event đó. Nếu bạn muốn thêm tiêu đề cho event, chúng ta sử dụng thuộc tính sumary.

    Mã:


    <div class=”vevent”>
    <span class=”summary”>Real Madrid-FC Barcelona</span>
    </div>
    Bằng cách sử dụng thuộc tính location, chúng ta khai báo là event đó được tổ chức ở đâu.

    Mã:


    <div class=”vevent”>
    <span class=”summary”>Real Madrid-FC Barcelona</span>
    at<span class=”location”>Camp Nou</span>
    </div>
    Tiếp theo là thời gian diễn ra sự kiện bên trên chúng ta sử dụng thuộc tính dtstart.

    Mã:


    <div class=”vevent”>
    <span class=”summary”>Real Madrid - FC Barcelona</span>
    at <span class=”location”>Camp Nou</span>
    on <time class=”dtstart” title=”2012-10-22T20:30”>October 22, 2012 at 8:30pm</time>
    </div>
    Các thông tin thêm về MicroFormat bạn có thể tìm hiểu ở microformat wiki
    III. RFDa

    Về cái này tôi cũng không có nhiều kiến thức lắm. chỉ biết rằng nó có 4 loại cơ bản như sau: voctype, typeof, propertyresource.

    Vậy là bài viết đã kết thúc. bạn có thể ứng dụng ngay vào website của mình, sau đó sử dụng công cụ Google’s Rich Snippet Testing Tool để kiểm tra.

    Theo Nguyễn Trung Hiếu (sharecodeweb)
     
    Đang tải...
    nam lim xanh

    Bình Luận Bằng Facebook

Trạng thái chủ đề:
Không mở trả lời sau này.

Chia sẻ trang này