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.

Transcript

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