Creating semantic websites using web components, and JSON-LD

With the popularity of web components and related libraries like Polymer, polivalencia become an attractive way of creating a UI. The original encapsulation custom elements makes them particularly useful in the creation of independent widgets.

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

In Polymer custom elements declaratively, that is, they are imported into the project, they are very easy to connect and configure directly in HTML, that is, to transfer the data through the attributes.

It would be great to avoid repetition and ensure consistency of data 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 in the components of structured data

Usually JSON is quite convenient way to transfer data to a particular widget. With a growing support for JSON-LD, we can re-use the same data structures to the UI, search engines and other consumers of structured data on the exact meaning of the page content.

Combining web components with JSON-LD you can create a well-defined architecture of an application:

the

the
• schema.org and JSON-LD provide a layer of data schema.org provides a dictionary for data and JSON-LD defines the format and transmission of data
the
• custom elements provide the presentation layer customizable and separated from the data

Example

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

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



Here we use the entity LocalBusiness to Express the meaning of our data is the geographical placement of some of the Google offices.

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



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

Associated components, and a structured data source.

The example code and used by the web components are on Github. Let's look at ishodnik pages combined-demo.html.

First we implemented the data using the script JSON-LD:

the

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

Thus we see that the data is readily available to consumers that supports the standard schema.org and JSON-LD format, such as search engines.
Next, we use the web components to display the data:

the

the
• address-dropdown-jsonld — This element creates a drop-down list with all the addresses passed to the attribute "jsonld"
the
• google-map-jsonld — This element creates a google map with points for each location passed to the attribute "jsonld"

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

the

<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 elements are imported we can use them on the page:

the

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

Finally, bind the JSON-LD data and elements together. Do this in the event handler, polymer-ready (it will be called when all components are ready to use). The items you can configure using attributes, you simply need to assign our JSON-LD data to the appropriate attribute of the component:

the

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, JSON powerful brother

As you probably already noticed, this is similar to using the normal JSON. While JSON-LD has several advantages, which are directly inherited from its compatibility with schema.org:

the

the
• Data is structured explicitly using standard schema.org. This is not a trivial advantage, because it provides you with the provision of meaningful and consistent input data for any web component with support for JSON-LD.
the
• Data is effectively consumed by search engines, which improves indexing, and can lead to extended snippets when displaying in search results.
the
• If you write web components in a similar way, there is no need to learn or develop a new structure (and documentation) for data expected components schema.org already does all the hard work and formed a consensus for you. It also makes it easier to build 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 pieces of UI that are user friendly and the developer, and search engine.

Build your components

You can try the examples on Github or read the manual Polymer at creating reusable components in order to begin writing your own.
View the documentation for structured data developers.google.com so inspired by the different entities that you can mark up with JSON-LD.

Consider placing your shiny new items on customelements.io to the delight of other users, and send a quick Hello to us at @рolymer or +Polymer community to show that cool you turned out.

The article under Creative Commons Attribution 3.0 License
Code under Apache 2.0 License

PS This is my first translation, typos and translation errors write in lichku.

Article based on information from habrahabr.ru