Web Components and JSON-LD to help the web developer

Hi, Habr! Let's start the week with a conversation on how to combine the work of JSON-LD and Web Components. JSON-LD is a format for structuring data on a site for displaying it in the search results of Google and other search engines. For example, if the site contains a list of events, places or people, then in HTML code you can add markup of this data using the constructs of the schema.org dictionary in the form of JSON-LD code. Structuring data helps Google better understand the content of your pages and highlight it in search results. So you can report on upcoming events through the function "Knowledge Network" or show an extended description of the pages in the search results.



Web Components - an evolving set of standards for creating widgets in the user interface. Any web developer can apply them using a template that is added to the page code . You can set the behavior of Web Components using the Custom Element function. Developers can use the same Web Components elements on different pages, as well as distribute them, which facilitates the web design process.

JSON-LD and Web Components are perfectly combined during development. Custom Element functions are used to represent visible content, and JSON-LD markup is used to structure the data. Custom Element can be used with any schema.org data type, such as schema.org/Event or schema.org/LocalBusiness .
')

An example of using JSON-LD and Web Components for an interactive map

Structured data, such as store addresses, is stored in a database. This information is posted on the page as a JSON-LD code. This means that the elements of the Custom Element can show them to users, and Googlebot recognizes them when indexing the page. Suppose we want to create a page with a list of some Google offices: polymerlabs.imtqy.com/structured-data-web-components/demo/combined-demo.html

On the page there are two widgets: a map with a pin for each office and a drop-down menu with a list of addresses. It is very important that both widgets present the same information to the user, and the page is available for scanning by search engines.

In this example, we use the LocalBusiness elements to express the meaning of the data presented: the geographical location of some of the Google offices.

To check how Google scans and indexes this page, it’s best to use the updated Structured Data Verification Tool . Paste the URL of the example we are parsing into the tool, and then click the “Get and check” button. On the right you will see the result of parsing data from the page and possible errors. A more convenient way to check the correctness of the implementation of the JSON-LD markup and its understanding of Google, perhaps, is not invented.

In more detail about this tool and innovations in it in our recent article on Habré: New tool for checking structured data, documentation and more .

Binding components to a structured data source

The code we use is laid out on github . Let's look at the source code of the combined-demo.html page.

First, we embed the data on the page using the JSON-LD script:

<script type="application/ld+json"> {...} </script> 

So we facilitate access to data for other systems that support the standard schema.org and JSON-LD format, for example, for search engines.

Then we use two web components to display the data:

• address-dropdown-jsonld - this element creates a drop-down list with all the addresses in the "jsonld" attribute.
• google-map-jsonld - this item creates a google map with a pin for each address in the jsonld attribute.

Now import them to our page using HTML import .

 <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"> 

After import, we can use them on our page:

 <address-dropdown-jsonld jsonld=""></address-dropdown-jsonld> <google-map-jsonld jsonld=""></google-map-jsonld> 

Finally, we associate JSON-LD data and elements. To do this, use the polymer-ready callback (this event is triggered when the components are ready for use). Since elements can be configured using attributes, it is enough to assign our JSON-LD data to the corresponding component attribute:

 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']; }); 

Read more about these technologies in the following materials:

• original article with code examples on html5rocks.com
• JSON-LD website and W3C specifications ;
• Web Components documentation on webcomponents.org;
• schema.org;
• Google documentation on structured data .