Với sự phổ biến ngày càng tăng của các thành phần web và các thư viện hỗ trợ như Polymer, các phần tử 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 các phần tử tuỳ chỉnh mặc định khiến các phần tử này đặc biệt hữu ích trong việc tạo các tiện ích độc lập.
Mặc dù một số tiện ích con độc lập, nhưng nhiều tiện ích trong số đó dựa vào dữ liệu bên ngoài để hiển thị nội dung cho người dùng - ví dụ: dự báo hiện tại cho tiện ích thời tiết hoặc địa chỉ của công ty cho tiện ích bản đồ.
Trong Polymer, phần tử tuỳ chỉnh mang tính khai báo, có nghĩa là sau khi được nhập vào một dự án, bạn có thể dễ dàng bao gồm và định cấu hình phần tử đó trong HTML (ví dụ: bằng cách truyền dữ liệu để điền vào tiện ích thông qua một thuộc tính).
Thật tuyệt nếu chúng ta có thể tránh lặp lại dữ liệu 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ác đoạn dữ liệu giống nhau để điền sẵn vào các tiện ích khác nhau, đồng thời cung cấp thông tin cho các công cụ tìm kiếm và người tiêu 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 các thành phần bằng dữ liệu có cấu trúc
Thông thường, JSON là một phương thức 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 tôi có thể sử dụng lại các cấu trúc dữ liệu tương tự để 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à người sử dụng dữ liệu có cấu trúc khác về ý nghĩa chính xác của nội dung trên trang.
Bằng cách kết hợp các thành phần web với JSON-LD, chúng ta 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 cấu thành định dạng và truyền tải dữ liệu;
- các phần tử tuỳ chỉnh đại diện cho lớp trình bày, có thể định cấu hình và được tách riêng với chính dữ liệu.
Ví dụ:
Hãy cùng xem xét một ví dụ sau đây – một trang liệt kê một số vị trí Google Office: https://github.com/googlearchive/structured-data-web-components/tree/master/demo
Ứng dụng 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 với danh sách các vị trí. Điều quan trọng là cả hai tiện ích đều phải trình bày cùng một dữ liệu cho người dùng và công cụ tìm kiếm có thể đọc được trang đó.
Trong bản minh hoạ này, chúng tôi sẽ sử dụng các thực thể LocalBusiness để thể hiện ý nghĩa của dữ liệu, tức 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à Công cụ kiểm tra dữ liệu có cấu trúc mới được 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ị cho bạn 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 Google có chính xác và có thể xử lý mã đánh dấu JSON-LD của bạn hay không.
Bạn có thể đọc thêm về công cụ này và các điểm cải tiến mà công cụ này ra mắt trong bài đăng trên blog của Trung tâm quản trị 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à cho 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 trang combined-demo.html.
Bước đầu tiên, chúng tôi 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 những người tiêu dùng khác hỗ trợ tiêu chuẩn schema.org và định dạng JSON-LD đều có thể dễ dàng truy cập vào dữ liệu, ví dụ như các công cụ tìm kiếm.
Bước thứ hai, chúng ta sử dụng 2 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 chuyển vào thuộc tính "jsonld".
- google-map-jsonld – Phần tử này tạo bản đồ của Google có ghim cho mọi vị trí được chuyển vào thuộc tính "jsonld".
Để làm như vậy, chúng tôi nhập chúng vào trang của mình bằng cách sử dụ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 chúng được nhập, chúng ta 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 liên kết dữ liệu JSON-LD và các phần tử với nhau. Chúng ta làm như vậy trong lệnh gọi lại sẵn sàng sử dụng (đâ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ó thể định cấu hình các phần tử thông qua các thuộc tính, nên bạn chỉ cần gán dữ liệu JSON-LD của chúng ta cho thuộc tính phù 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, người anh em mạnh mẽ của JSON
Như bạn có thể nhận thấy, phương thức này hoạt động rất giống với cách sử dụng JSON cũ để truyền dữ liệu. Tuy nhiên, JSON-LD có một số ưu điểm bắt nguồn trực tiếp từ khả năng tương thích với schema.org:
- Dữ liệu được cấu trúc một cách rõ ràng theo 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 có hỗ trợ JSON-LD.
- Công cụ tìm kiếm sử dụng dữ liệu một cách hiệu quả, từ đó cải thiện khả năng lập chỉ mục trang và có thể khiến đoạn trích nhiều định dạng xuất hiện trong kết quả tìm kiếm.
- Nếu đ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 nghĩ ra 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 đã thực hiện mọi công việc khó khăn và tạo dựng sự đồng thuận cho bạn. Ngoài ra, tính năng 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 phần giao diện người dùng đóng gói, có thể tái sử dụng và thân thiện với nhà phát triển và công cụ tìm kiếm.
Tạo các 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 các thành phần có thể sử dụng lại để bắt đầu tự viết mã. Xem tài liệu về Dữ liệu có cấu trúc trên developers.google.com để tìm cảm hứng về nhiều thực thể mà bạn có thể đánh dấu bằng JSON-LD.
Hãy cân nhắc gửi lời cảm ơn đến @polymer để giới thiệu các phần tử tuỳ chỉnh mà bạn đã xây dựng!