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
Tweet

More Decks by Kévin Dunglas

Other Decks in Programming

Transcript

  1. How can
    JSON-LD
    help you
    sell more?
    Meet JSON-LD, the format at
    the heart of API Platform!

    View full-size 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 full-size slide

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

    View full-size slide

  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

    View full-size 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 full-size 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 full-size 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 full-size slide

  8. The Engine of Sylius eCommerce

    View full-size slide

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

    View full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

  12. « 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 full-size slide

  13. ➔ 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 full-size slide

  14. ➔ 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 full-size slide

  15. ➔ 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 full-size slide

  16. RDF: N-Triples
    "55.00" .

    "EUR" .

    .

    "Everyday white basic T-Shirt" .

    .

    .

    View full-size slide

  17. RDF: Tabular Representation

    View full-size slide

  18. RDF: Visual Representation

    View full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

  24. JSON-LD in API Platform: Natively Supported

    View full-size slide

  25. 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 full-size slide

  26. SEO: Rich Snippets

    View full-size slide

  27. Google: Rich Snippets

    View full-size slide

  28. SEO: Rich Snippets

    View full-size slide

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

    View full-size slide

  30. Other Usage: Email Markup

    View full-size slide

  31. 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 full-size slide

  32. 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 full-size slide

  33. 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 full-size slide

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

    View full-size slide