Easier website development with Web Components and JSON-LD
Stay organized with collectionsSave and categorize content based on your preferences.
Monday, March 09, 2015
JSON-LDis a JSON-based data format
that can be used to implementstructured datadescribing 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 theschema.orgvocabulary embedded in
webpages as a JSON-LD snippet. The structured data helps Google understand your pages better and
highlight your content in search features, suchevents in the Knowledge Graphandrich snippets.
Web Componentsare 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 atemplatefor a distinct part of the user interface, which youimport into the pageson which you want to use the Web Component. ACustom Elementis 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.
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 asEventandLocalBusiness.
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.
To learn more and get started with your own custom elements, please see:
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[[["\u003cp\u003eJSON-LD is a JSON-based format used for implementing structured data on websites, enhancing search engine understanding and visibility.\u003c/p\u003e\n"],["\u003cp\u003eWeb Components enable the creation of reusable UI widgets by bundling display and logic, simplifying web development.\u003c/p\u003e\n"],["\u003cp\u003eJSON-LD and Web Components work together, with JSON-LD as the data layer consumed by Web Components (presentation layer) and search engines.\u003c/p\u003e\n"],["\u003cp\u003eThis synergy allows for building custom elements for any schema.org type, improving data representation and searchability.\u003c/p\u003e\n"],["\u003cp\u003eStructured data stored in a database can be embedded as JSON-LD on webpages, benefiting both human visitors and search engine indexing.\u003c/p\u003e\n"]]],["JSON-LD is a structured data format, using schema.org vocabulary, that helps search engines understand website content like events or businesses. Web Components define reusable UI widgets with custom behavior. These two work together: Web Components display content, while JSON-LD provides the data layer for both the component and search engines. Data is stored, embedded into web pages as JSON-LD, and then displayed by the Web Components. This setup enables building custom elements for various schema.org types.\n"],null,["# Easier website development with Web Components and JSON-LD\n\nMonday, March 09, 2015\n\n\n[JSON-LD](https://www.w3.org/TR/json-ld/) is a JSON-based data format\nthat can be used to implement\n[structured data](/search/docs/appearance/structured-data/intro-structured-data)\ndescribing content on your site to Google and other search engines. For example, if you have a\nlist of events, cafes, people or more, you can include this data in your pages in a structured way\nusing the [schema.org](https://schema.org/) vocabulary embedded in\nwebpages as a JSON-LD snippet. The structured data helps Google understand your pages better and\nhighlight your content in search features, such\n[events in the Knowledge Graph](/search/docs/appearance/structured-data/event)\nand\n[rich snippets](/search/docs/appearance/structured-data/search-gallery).\n\n\n[Web Components](https://webcomponents.org/) are a nascent set of\ntechnologies to define custom, reusable user interface widgets and their behavior. Any web\ndeveloper can build a Web Component. You start by defining a\n[template](https://webcomponents.org/articles/introduction-to-template-element/)\nfor a distinct part of the user interface, which you\n[import into the pages](https://webcomponents.org/articles/introduction-to-html-imports/)\non which you want to use the Web Component. A\n[Custom Element](https://webcomponents.org/articles/introduction-to-custom-elements/)\nis used to define the behavior of the Web Component. Because you're bundling the display and logic\nfor part of the user interface into the Web Component, you can share and reuse the bundle on other\npages and with other developers, thus simplifying web development.\n\n\nJSON-LD and Web Components work really well together. The Custom Element functions as the\npresentation layer and the JSON-LD functions as the data layer that the custom element and search\nengines consume. This means you can build custom elements for any schema.org type, such as\n[`Event`](https://schema.org/Event) and\n[`LocalBusiness`](https://schema.org/LocalBusiness).\n\n\nYour architecture would then look like this. Your structured data is stored in your database, for\nexample, the store locations in your chain. This data is embedded into your webpage as a JSON-LD\nsnippet, which means it's available to be consumed by the Custom Element to display to a human\nvisitor and for Googlebot to retrieve for Google indexing.\n\nTo learn more and get started with your own custom elements, please see:\n\n- Our latest article on [HTML5 Rocks](https://updates.html5rocks.com/2015/03/creating-semantic-sites-with-web-components-and-jsonld) and [the accompanying code examples](https://github.com/PolymerLabs/structured-data-web-components).\n- The [JSON-LD website](https://json-ld.org/), and [the W3C spec](https://www.w3.org/TR/json-ld/)\n- [Web Components wiki](https://www.w3.org/wiki/WebComponents/) and the Web Components community on [webcomponents.org](https://webcomponents.org/)\n- [schema.org](https://schema.org)\n- Google's [structured data documentation](/search/docs/appearance/structured-data/intro-structured-data)\n\n\nPosted by\n[Ewa Gasperowicz](https://plus.google.com/+EwaGasperowicz), Developer\nPrograms Engineer, [Mano Marks](https://plus.google.com/+ManoMarks),\nDeveloper Advocate, [Pierre Far](/search/blog/authors/pierre-far),\nWebmaster Trends Analyst"]]
