How can JSON-LD help you sell more?

By default, all data exposed by the Sylius API and all APIs using API Platform are formatted using JSON-LD, "JavaScript Object Notation for Linked Data".

This is no accident! Understanding and using JSON-LD can dramatically improve your offers' reach and enhance the customer experience.

In this talk, we will see how the RDF data model, shared vocabularies such as Schema.org, and the JSON-LD format are must-haves for any merchant who cares about SEO, or who wants to have good and automated integration with popular services such as Gmail and Google Calendar.

1. How can JSON-LD help you sell more? Meet JSON-LD, the format at the heart of API Platform!
2. API Platform: the API-first framework 02 03 OUTLINE 04 01 At the heart of API Platform: JSON-LD JSON-LD: use cases Using JSON-LD with Sylius
3. Kévin Dunglas ➔ Creator of API Platform ➔ Symfony Core Team ➔ Sylius user and occasional contributor @dunglas
4. ➔ eCommerce, API, Web and Cloud experts ➔ 100% employee-owned co-op ✊ ➔ Democratically managed 💬 ➔ Europe and remote 🌎 ➔ contact@les-tilleuls.coop 💌 11 YEARS OF ECOMMERCE 70 COOPERATORS 300+ HAPPY CUSTOMERS 50+ PROJECTS/YEAR
5. 02 03 04 01 API Platform: the API-first framework Using JSON-LD with Sylius JSON-LD: use cases At the heart of API Platform: JSON-LD
6. API Platform ➔ API-first framework (servers and clients) ➔ Native REST and GraphQL support ➔ Officially recommended by Symfony for APIs ➔ Powers the Sylius unified API ➔ Designed for headless apps ➔ Very active and diverse community ➔ Used by hundreds of companies ➔ Sponsored by Les-Tilleuls.coop, Arte, Orange and by your company soon? 7.6k STARS ON GITHUB MIT LICENSED 777 CONTRIBUTORS
7. API Platform Design API Platform core values EASY TO USE ➔ Your API in minutes ➔ Batteries-included: API docs, persistence, filters, pagination, access control, admin interface, JS client generators… ➔ No-code tools (MakerBundle) STANDARDS-COMPLIANT ➔ True REST API: hypermedia ➔ Implements API-related standards from the W3C and the IETF CUSTOMIZABLE ➔ Everything can be replaced: strong and modern OOP approach ➔ Designed for DDD, Clean/Hexagonal Architecture…
8. The Engine of Sylius eCommerce
10. API Platform Embraces the Web Platform REST HTTP RDF JSON-LD Hydra, Schema.org
11. 02 03 04 01 API Platform: the API-first framework At the heart of API Platform: JSON-LD Build your Solid application JSON-LD: use cases
12. REST: The Architecture of the Web ➔ Webapps expose a network of resources ➔ Resources: ◆ Any information that can be named ◆ Valid resources: a thing, a temporary service, a collection of resources ➔ Resources have representations: ◆ Ex: HTML, JSON-LD, JPEG, CSV,… ◆ The same resource can have multiple representations ➔ Clients progress through the resource graph using links embedded in representations (or in related metadata) ➔ REST: REpresentational State Transfer REST
13. « The Web is intended to be an Internet-scale distributed hypermedia system. » Roy Fielding, author of HTTP, REST, and of the Apache web server. HTTP: The Main Implementation of REST
14. ➔ Resources: ◆ published on servers ◆ requested by clients ◆ identified by URIs (aka URLs) ◆ linked together ➔ The Web is a graph of resources: ◆ Node: web resource ◆ Edge: link ➔ Open standards (W3C, IETF): ◆ URI, HTTP, HTML, RDF, JSON-LD… HTTP: The Core Protocol of the Web
15. ➔ The web as a big database ➔ Focus on interoperability and decentralization ➔ Open standards (W3C and IETF): ◆ core web standards: URI, HTTP ◆ abstract data model: RDF ◆ serialization formats: JSON-LD, N-Triples, Turtle, XML-RDF… ◆ vocabulary definitions: RDFS, OWL ◆ vocabularies and ontologies: Schema.org, GoodRelations… Linked Data: The Machine-Readable Web Alice Person 14 July 1990 The Mona Lisa Leonardo Da Vinci La Joconde à Washington is about was created by is friend with is interested in is a is born on Bob
16. ➔ Abstract model to represent any set of data ➔ Directed graph ➔ Basic unit: semantic triple ◆ subject ◆ predicate ◆ object Resource Description Format (RDF) SUBJECT OBJECT predicate
17. RDF: N-Triples <https://my-sylius.com/products/basic-t-shirt/offer> <http://schema.org/price> "55.00" . <https://my-sylius.com/products/basic-t-shirt/offer> <http://schema.org/priceCurrency> "EUR" . <https://my-sylius.com/products/basic-t-shirt/offer> <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <http://schema.org/Offer> . <https://my-sylius.com/products/basic-t-shirt> <http://schema.org/name> "Everyday white basic T-Shirt" . <https://my-sylius.com/products/basic-t-shirt> <http://schema.org/offers> <https://my-sylius.com/products/basic-t-shirt/offer> . <https://my-sylius.com/products/basic-t-shirt> <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <http://schema.org/Product> .
18. RDF: Tabular Representation
19. RDF: Visual Representation
20. RDF: JSON-LD { "@context": "https://schema.org", "@type": "Product", "@id": "https://my-sylius.com/products/basic-t-shirt", "name": "Everyday white basic T-Shirt", "image": "basic-t-shirt.jpg", "offers": { "@type": "Offer", "@id": "https://my-sylius.com/products/basic-t-shirt/offer", "price": "55.00", "priceCurrency": "EUR" } }
21. JSON-LD ➔ JSON for Linked Data ➔ Valid JSON: all you need is json_decode() or JSON.parse() ➔ RDF serialization format ➔ Transform existing JSON documents in RDF resources with as little effort as possible ➔ Transform JSON-LD in other RDF serialization formats, and vice versa ➔ Properties starting with a @ are reserved ➔ W3C standard backed by Google, Microsoft, universities and many government agencies
22. JSON-LD: @id ➔ Identifies the node ➔ The ID is an IRI (URIs and URLs are IRIs) ➔ A single JSON-LD document can contain many nodes: collections, embedded relations… ➔ Allows referencing a specific resource (even inside a document): Linked Data ➔ Prevents data duplication (use a reference instead of copying), even in the same document ➔ Good internet-wide identifier: same references across different webapps/APIs ➔ Makes it easy to create smart client-side caches { "@id": "https://my-sylius.com/products/basic-t-shirt", //... "offers": { "@id": "https://my-sylius.com/products/basic-t-shirt/offer", //... } }
23. JSON-LD: @type ➔ Specifies the type of the Node ➔ Types are IRIs (URIs and URLs are IRIs) ➔ Allows to uniquely identify the type, and to reuse it across webapps and APIs ➔ Perfect for internet-scale interoperability ➔ Somewhat similar to PHP’s Fully Qualified Class Names ➔ A single Node can have multiple types { "@type": "https://schema.org/Product", //... "offers": { "@type": "https://schema.org/Offer", //... } }
24. JSON-LD: @context ➔ Maps plain old JSON properties with RDF types (IRIs) ◆ name => https://schema.org/name ◆ price => https://schema.org/price ➔ Allows mapping existing documents ➔ Allows keeping the JSON document readable and easy to use ➔ Creates “shortcuts”: ◆ Default vocabulary: @vocab => https://schema.org/ ◆ IRI prefixes: hydra => http://www.w3.org/ns/hydra/core# ➔ Entirely optional, but practical { "@context": "https://schema.org", "@type": "Product", "name": "Everyday white basic T-Shirt", //... "offers": { "@type": "Offer", //… "price": "55.00", "priceCurrency": "EUR" } }
25. JSON-LD in API Platform: Natively Supported
26. 03 01 At the heart of API Platform: JSON-LD JSON-LD: use cases 02 04 API Platform: the API-first framework Using JSON-LD with Sylius
27. Solid PHP
28. SEO: Rich Snippets
29. Google: Rich Snippets
30. SEO: Rich Snippets
32. Rich Snippets ➔ Dozens of types ➔ Supported by ◆ Google ◆ Bing ◆ Yandex ◆ many others! ➔ RDF ➔ JSON-LD ➔ Schema.org
33. Other Usage: Email Markup
34. 03 01 Using JSON-LD with Sylius 02 04 At the heart of API Platform: JSON-LD API Platform: the API-first framework JSON-LD: use cases
35. Schema.org and API Platorm ➔ Add the mapping with #[ApiProperty(types: ["..."])] ➔ Customize the JSON-LD context using ContextBuilderInterface ➔ Copy the API response in your HTML: <script type="application/ld+json"> ➔ Headless mode: it’s done by default by clients generated by API Platform Create Client (Next, Nuxt) #[ApiResource( types: "https://schema.org/Product" )] class Product { #[ApiProperty(types: "https://schema.org/name")] public string $name; #[ApiProperty(types: "https://schema.org/image")] public string $image; #[ApiProperty(types: "https://schema.org/offers")] public Offer $offer; }
36. Schema.org and Sylius ➔ Core Sylius classes ◆ Schema.org mapping not done yet ◆ But 1 property is already mapped! ◆ Should be quite easy to do ◆ Good news: it’s an easy pick ➔ Sylius theme: ◆ Embed the JSON-LD response ◆ Also an easy pick ➔ Contribute to add native support! ➔ In the meantime, use: ◆ custom resources ◆ custom JSON-LD context builders
37. Thanks for your attention! ➔ Any questions ? dunglas.dev @dunglas