Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How can JSON-LD help you sell more?

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.

Kévin Dunglas

October 27, 2022

More Decks by Kévin Dunglas

Other Decks in Programming


  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 🌎 ➔ [email protected] 💌 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. 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
  9. 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
  10. « 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
  11. ➔ 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
  12. ➔ 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
  13. ➔ Abstract model to represent any set of data ➔

    Directed graph ➔ Basic unit: semantic triple ◆ subject ◆ predicate ◆ object Resource Description Format (RDF) SUBJECT OBJECT predicate
  14. 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> .
  15. 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" } }
  16. 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
  17. 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", //... } }
  18. 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", //... } }
  19. 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" } }
  20. 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
  21. Rich Snippets ➔ Dozens of types ➔ Supported by ◆

    Google ◆ Bing ◆ Yandex ◆ many others! ➔ RDF ➔ JSON-LD ➔ Schema.org
  22. 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
  23. 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; }
  24. 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