Creating semantic sites using web components and JSON-LD

With the growing popularity of web components and related libraries like Polymer , user elements have become an attractive way to create a UI. The initial encapsulation of custom elements makes them especially useful in creating independent widgets.

While some widgets are self-sufficient, many of them rely on external data to provide content to the user, such as the current forecast for a weather widget or the company’s address for a map widget.

In Polymer, custom elements are declarative, that is, they are imported into a project, it is very easy to connect and configure them directly in HTML, that is, to transfer data through attributes.
')
It would be great to avoid repetition and be sure of the consistency of data by reusing the same snippets for different widgets, as well as informing search engines and other consumers about the content on the page. We can achieve this using the standard schema.org and JSON-LD format for our data.

Filling components with structured data

Usually JSON is quite a convenient way to transfer data to a specific widget. With growing support for JSON-LD, we can reuse the same data structures for UI, search engines, and other users of structured data about the exact meaning of the page content.

By combining web components with JSON-LD, we can create a well-defined application architecture:

• schema.org and JSON-LD provide a data layer, schema.org provides a dictionary for data, and JSON-LD defines the format and data transfer
• custom elements provide a presentation layer customizable and separate from the most data

Example

Let's consider the following example - a page with a list of addresses of some Google offices: http://polymerlabs.imtqy.com/structured-data-web-components/demo/combined-demo.html

The page consists of two widgets: a map with points for each office and a drop-down list with addresses. It is important that both widgets present the same data to the user, and that the page is accessible to search engines.



Here we use LocalBusiness entities to express the meaning of our data, this is the geographical location of some Google offices.

The best way to check how Google sees and indexes the page is through a new improved structured data testing tool . Enter the URL of the demo page in the Fetch URL section and click Fetch and validate . On the right you will see the parsed data received from the page, as well as any errors that occurred. This is a very convenient way to check your JSON-LD markup for correct processing by Google.



You can read more about the tool and the innovations in a Webmaster Central blog article .

We connect components and the structured data source.

The code for the example and the web components used is on Github . Let's take a look at the source of the combined-demo.html page.

We first implemented the data using a JSON-LD script:

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

Thus, we are convinced that the data is easily accessible to consumers who support the standard schema.org and JSON-LD format, for example, search engines.

Next we use for web components to display data:

• address-dropdown-jsonld - This item creates a drop-down list with all addresses passed to the “jsonld” attribute.
• google-map-jsonld - This item creates a google map with dots for each location passed to the “jsonld” attribute.

To do this, we import them to the page using HTML imports .

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

Once the items are imported, we can use them on the page:

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

Finally, we bind JSON-LD data and elements together. We do this in the polymer-ready event handler (it will be called when all 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']; }); 

JSON-LD, the powerful brother of JSON

As you probably already noticed, it works just like using regular JSON. However, JSON-LD has several advantages that are directly inherited from its compatibility with schema.org :

• The data is structured in an unambiguous way using the standard schema.org. This is a non-trivial advantage, because it provides you with meaningful and consistent input for any JSON-LD web component.
• Data is effectively consumed by search engines, which improves page indexing, and can lead to extended snippets when displayed in search results.
• If you write web components in a similar way, there is no need to teach or develop a new structure (and documentation) for the data expected by the components — schema.org already does all the hard work and has formed a consensus for you. It also simplifies building an ecosystem of compatible components.

To summarize, JSON-LD and schema.org, in conjunction with the technology of web components, allows you to create reusable, encapsulated UI parts that are both developer and search engine friendly.

Create your components

You can try out the examples on Github or read Polymer's guide to creating reusable components in order to start writing your own.
Check out the structured data documentation on developers.google.com for inspiration from various entities that you can tag using JSON-LD.

Consider placing your shiny new items on customelements.io to the delight of other users, and beckon us on @polymer or + Polymer community to show what cool you have done.

Article Creative Commons Attribution 3.0 License
Code under Apache 2.0 License

PS This is my first translation, typos and errors in the translation, write in a personal.