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!
   

   View Slide

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
   

   View Slide

3. Kévin Dunglas
   ➔ Creator of API Platform
   ➔ Symfony Core Team
   ➔ Sylius user and occasional contributor
   @dunglas
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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…
   

   View Slide

8. The Engine of Sylius eCommerce
   

   View Slide

9. View Slide

10. API Platform Embraces the Web Platform
    REST
    HTTP
    RDF
    JSON-LD
    Hydra, Schema.org
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

17. RDF: N-Triples
    "55.00" .
    
    "EUR" .
    
    .
    
    "Everyday white basic T-Shirt" .
    
    .
    
    .
    

    View Slide

18. RDF: Tabular Representation
    

    View Slide

19. RDF: Visual Representation
    

    View Slide

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"
    }
    }
    

    View Slide

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
    

    View Slide

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",
    //...
    }
    }
    

    View Slide

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",
    //...
    }
    }
    

    View Slide

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"
    }
    }
    

    View Slide

25. JSON-LD in API Platform: Natively Supported
    

    View Slide

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
    

    View Slide

27. Solid PHP
    

    View Slide

28. SEO: Rich Snippets
    

    View Slide

29. Google: Rich Snippets
    

    View Slide

30. SEO: Rich Snippets
    

    View Slide

31. View Slide

32. Rich Snippets
    ➔ Dozens of types
    ➔ Supported by
    ◆ Google
    ◆ Bing
    ◆ Yandex
    ◆ many others!
    ➔ RDF
    ➔ JSON-LD
    ➔ Schema.org
    

    View Slide

33. Other Usage: Email Markup
    

    View Slide

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
    

    View Slide

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:
    <br/>➔ Headless mode: it’s done by default by clients<br/>generated by<br/>API Platform Create Client (Next, Nuxt)<br/>#[ApiResource(<br/>types: "https://schema.org/Product"<br/>)]<br/>class Product<br/>{<br/>#[ApiProperty(types: "https://schema.org/name")]<br/>public string $name;<br/>#[ApiProperty(types: "https://schema.org/image")]<br/>public string $image;<br/>#[ApiProperty(types: "https://schema.org/offers")]<br/>public Offer $offer;<br/>}<br/>

    View Slide

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
    

    View Slide

37. Thanks for your
    attention!
    ➔ Any questions ?
    dunglas.dev
    @dunglas
    

    View Slide