Với sự phổ biến ngày càng tăng của thành phần web và các thư viện hỗ trợ như Polymer, thành phần tuỳ chỉnh trở thành một cách hấp dẫn để xây dựng các tính năng giao diện người dùng. Việc đóng gói mặc định của các phần tử tuỳ chỉnh khiến các phần tử này đặc biệt hữu ích cho việc tạo các tiện ích độc lập.
Mặc dù một số tiện ích có thể tự chứa, nhưng nhiều tiện ích lại dựa vào dữ liệu bên ngoài để hiển thị nội dung cho người dùng – ví dụ: thông tin dự báo thời tiết hiện tại cho tiện ích thời tiết hoặc địa chỉ của một công ty cho tiện ích bản đồ.
Trong Polymer, các phần tử tuỳ chỉnh mang tính khai báo, nghĩa là sau khi nhập các phần tử này vào một dự án, bạn có thể dễ dàng đưa và định cấu hình các phần tử đó trong HTML, ví dụ: bằng cách truyền dữ liệu để điền sẵn tiện ích thông qua một thuộc tính.
Sẽ rất tốt nếu chúng ta có thể tránh lặp lại và đảm bảo tính nhất quán của dữ liệu, bằng cách sử dụng lại cùng một đoạn dữ liệu để điền các tiện ích khác nhau cũng như thông báo cho các công cụ tìm kiếm và người dùng khác về nội dung trên trang của chúng ta. Chúng ta có thể đạt được điều này bằng cách sử dụng tiêu chuẩn schema.org và định dạng JSON-LD cho dữ liệu của mình.
Điền dữ liệu có cấu trúc vào các thành phần
Thông thường, JSON là một cách thuận tiện để chèn dữ liệu vào một tiện ích cụ thể. Với sự hỗ trợ ngày càng tăng cho JSON-LD, chúng ta có thể sử dụng lại cùng một cấu trúc dữ liệu để thông báo cho giao diện người dùng cũng như các công cụ tìm kiếm và những người dùng khác của dữ liệu có cấu trúc về ý nghĩa chính xác của nội dung trang.
Bằng cách kết hợp các thành phần web với JSON-LD, chúng tôi sẽ tạo ra một cấu trúc được xác định rõ ràng cho một ứng dụng:
- schema.org và JSON-LD đại diện cho lớp dữ liệu, trong đó schema.org cung cấp từ vựng cho dữ liệu và JSON-LD tạo nên định dạng và truyền tải cho dữ liệu;
- các phần tử tuỳ chỉnh đại diện cho lớp bản trình bày, có thể định cấu hình và tách biệt với chính dữ liệu.
Ví dụ:
Hãy xem xét ví dụ sau – một trang liệt kê một số vị trí của Google Office: https://github.com/googlearchive/structured-data-web-components/tree/master/demo
Cửa sổ này chứa hai tiện ích: một bản đồ có ghim cho mỗi văn phòng và một trình đơn thả xuống có danh sách các vị trí. Điều quan trọng là cả hai tiện ích đều hiển thị cùng một dữ liệu cho người dùng và trang phải có thể đọc được đối với công cụ tìm kiếm.
Trong bản minh hoạ này, chúng ta đang sử dụng các thực thể LocalBusiness để thể hiện ý nghĩa của dữ liệu, đó là vị trí địa lý của một số văn phòng của Google.
Cách tốt nhất để kiểm tra cách Google đọc và lập chỉ mục trang này là thông qua Công cụ kiểm tra dữ liệu có cấu trúc mới và cải tiến. Gửi URL của bản minh hoạ trong phần Tìm nạp URL rồi nhấp vào Tìm nạp và xác thực. Phần bên phải sẽ hiển thị dữ liệu đã phân tích cú pháp được truy xuất từ trang cùng với mọi lỗi có thể xảy ra. Đây là một cách rất thuận tiện để kiểm tra xem mã đánh dấu JSON-LD của bạn có chính xác và Google có thể xử lý hay không.
Bạn có thể đọc thêm về công cụ này và những điểm cải tiến mà công cụ này mang lại trong bài đăng trên blog của Trung tâm quản trị viên trang web.
Liên kết các thành phần với một nguồn dữ liệu có cấu trúc
Mã cho bản minh hoạ và các thành phần web dùng để tạo bản minh hoạ đó có trên GitHub. Hãy xem mã nguồn của trang combined-demo.html.
Bước đầu tiên, chúng ta nhúng dữ liệu vào trang bằng tập lệnh JSON-LD:
<script type="application/ld+json">
{...}
</script>
Bằng cách này, chúng tôi đảm bảo rằng những người dùng khác hỗ trợ tiêu chuẩn schema.org và định dạng JSON-LD (ví dụ: công cụ tìm kiếm) có thể dễ dàng truy cập vào dữ liệu.
Ở bước thứ hai, chúng ta sử dụng hai thành phần web để hiển thị dữ liệu:
- address-dropdown-jsonld – Phần tử này tạo một trình đơn thả xuống có tất cả các vị trí được truyền trong thuộc tính "jsonld".
- google-map-jsonld – Phần tử này tạo một bản đồ Google có ghim cho mọi vị trí được truyền trong thuộc tính "jsonld".
Để làm như vậy, chúng ta sẽ nhập các tệp đó vào trang bằng cách sử dụng tính năng nhập HTML.
<link rel="import" href="bower_components/google-map-jsonld/google-map-jsonld.html">
<link rel="import" href="bower_components/address-dropdown-jsonld/address-dropdown-jsonld.html">
Sau khi nhập, chúng tôi có thể sử dụng chúng trên trang của mình:
<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>
Cuối cùng, chúng ta nối dữ liệu JSON-LD và các phần tử với nhau. Chúng ta thực hiện việc này trong lệnh gọi lại sẵn sàng cho polymer (đây là sự kiện kích hoạt khi các thành phần đã sẵn sàng sử dụng). Vì các phần tử có thể được định cấu hình thông qua các thuộc tính, nên bạn chỉ cần chỉ định dữ liệu JSON-LD cho thuộc tính thích hợp của thành phần:
document.addEventListener('polymer-ready', function() {
var jsonld = JSON.parse(
document.querySelector(
'script[type="application/ld+json"]').innerText);
document.querySelector('google-map-jsonld').jsonld = jsonld['@graph'];
document.querySelector('address-dropdown-jsonld').jsonld = jsonld['@graph'];
});
JSON-LD, phiên bản nâng cao của JSON
Có thể bạn đã nhận thấy cách này hoạt động rất giống với việc sử dụng JSON cũ, đơn giản để truyền dữ liệu. Tuy nhiên, JSON-LD có một số ưu điểm trực tiếp bắt nguồn từ khả năng tương thích với schema.org:
- Dữ liệu được sắp xếp theo cách rõ ràng bằng cách sử dụng tiêu chuẩn schema.org. Đây là một lợi thế không nhỏ vì nó đảm bảo bạn có thể cung cấp dữ liệu đầu vào có ý nghĩa và nhất quán cho mọi thành phần web hỗ trợ JSON-LD.
- Công cụ tìm kiếm có thể sử dụng dữ liệu này một cách hiệu quả, giúp cải thiện việc lập chỉ mục trang và có thể dẫn đến việc đoạn trích đa dạng thức xuất hiện trong kết quả tìm kiếm.
- Nếu bạn đang viết các thành phần web theo cách này, bạn không cần phải tìm hiểu hoặc thiết kế một cấu trúc (và tài liệu) mới cho dữ liệu mà các thành phần đó mong đợi – schema.org đã làm tất cả những việc nặng nhọc và tạo sự đồng thuận cho bạn. Điều này cũng giúp bạn dễ dàng xây dựng toàn bộ hệ sinh thái gồm các thành phần tương thích.
Tóm lại, JSON-LD và schema.org kết hợp với công nghệ thành phần web cho phép xây dựng các thành phần giao diện người dùng đóng gói, có thể tái sử dụng mà thân thiện với nhà phát triển và công cụ tìm kiếm.
Tạo thành phần của riêng bạn
Bạn có thể thử các ví dụ trên GitHub hoặc đọc hướng dẫn của Polymer về cách tạo thành phần có thể sử dụng lại để bắt đầu viết thành phần của riêng mình. Hãy tham khảo tài liệu về Dữ liệu có cấu trúc trên developers.google.com để tìm hiểu về nhiều thực thể mà bạn có thể đánh dấu bằng JSON-LD.
Hãy cân nhắc việc gửi tin nhắn cho chúng tôi theo địa chỉ @polymer để giới thiệu các phần tử tuỳ chỉnh mà bạn đã tạo!