larlet-fr-david-cache/cache/f927d2defddee10090fe91d138f2a180/index.md

title: Easier website development with Web Components and JSON-LD
url: http://googlewebmastercentral.blogspot.fr/2015/03/easier-website-development-with-web.html
hash_url: f927d2defddee10090fe91d138f2a180

<p><a href="http://www.w3.org/TR/json-ld/">JSON-LD</a> is a JSON-based data format that can be used to implement <a href="http://developers.google.com/structured-data/">structured data</a> describing content on your site to Google and other search engines. For example, if you have a list of events, cafes, people or more, you can include this data in your pages in a structured way using the <a href="http://schema.org/">schema.org</a> vocabulary embedded in webpages as a JSON-LD snippet. The structured data helps Google understand your pages better and highlight your content in search features, such <a href="https://developers.google.com/structured-data/events/">events in the Knowledge Graph</a> and <a href="https://developers.google.com/structured-data/rich-snippets/">rich snippets</a>.</p>

<p><a href="http://webcomponents.org/">Web Components</a> are a nascent set of technologies to define custom, reusable user interface widgets and their behavior. Any web developer can build a Web Component. You start by defining a <a href="http://webcomponents.org/articles/introduction-to-template-element/">template</a> for a distinct part of the user interface, which you <a href="http://webcomponents.org/articles/introduction-to-html-imports/">import into the pages</a> on which you want to use the Web Component. A <a href="http://webcomponents.org/articles/introduction-to-custom-elements/">Custom Element</a> is used to define the behavior of the Web Component. Because you’re bundling the display and logic for part of the user interface into the Web Component, you can share and reuse the bundle on other pages and with other developers, thus simplifying web development.</p>

<p>JSON-LD and Web Components work really well together. The Custom Element functions as the presentation layer and the JSON-LD functions as the data layer that the custom element and search engines consume. This means you can build custom elements for any schema.org type, such as <a href="http://schema.org/Event">schema.org/Event</a> and <a href="http://schema.org/LocalBusiness">schema.org/LocalBusiness</a>.</p>

<p>Your architecture would then look like this. Your structured data is stored in your database, for example, the store locations in your chain. This data is embedded into your webpage as a JSON-LD snippet, which means it’s available to be consumed by the Custom Element to display to a human visitor and for Googlebot to retrieve for Google indexing.</p>

<p>To learn more and get started with your own custom elements, please see:</p>

<ul>
<li>Our latest article on <a href="http://updates.html5rocks.com/2015/03/creating-semantic-sites-with-web-components-and-jsonld">HTML5 Rocks</a> and <a href="https://github.com/PolymerLabs/structured-data-web-components">the accompanying code examples</a>.</li>
<li>The <a href="http://json-ld.org/">JSON-LD website</a>, and <a href="http://www.w3.org/TR/json-ld/">the W3C spec</a></li>
<li><a href="http://www.w3.org/wiki/WebComponents/">Web Components wiki</a> and the Web Components community on <a href="http://webcomponents.org/">webcomponents.org</a></li>
<li><a href="http://schema.org">schema.org</a></li>
<li>Google's <a href="https://developers.google.com/structured-data/">structured data documentation</a></li>
</ul>