The web as we know it is a collection of poorly structured documents. We need to rely heavily on context to determine what’s on a page, whether it’s a job, a recipe, or another object. Structured data adds structure to web content and links objects. However, like any metadata, it adds abstraction and overhead that isn’t intuitive for end users. Blocks, as abstract units for organising and composing content, turn out to be an ideal UX in this regard. They give us a way to structure content and derive structured data from it. Let's add a web of objects on top of the web of documents, and unlock countless possibilities. Let’s look at the future!

1. The promise of
Structured data & blocks

2. @OmarReiss

4. “We think of a
dictionary as the
repository of all
meaning, but it
defines words
only in terms of
other words”
-Tim Berners Lee, ForEveryone.net

5. Illustration taken from ForEveryone.net (documentary)

7. Intertextuality is the shaping of a
text's meaning by another text

8. World Wide Web (1989)

9. Web 1.0 - Intertextuality

13. Web 2.0 - Interactivity

15. In order to make information
interactive, we need to be able to
identify it. We need some way to
structure & formalize information.

16. Interaction on the web takes place
through the transformation
of data.

18. Where does the data live?

19. Structured data

20. Data vocabularies are the names
we give to data structures.

21. Schema’s are blueprints that
describe the shape / structure of a
particular data vocabulary.

22. Schema.org is a taxonomy of all the
things (on the web).

23. In fact, the most generic data
vocabulary in Schema.org is thing.

26. <!-- John and Steve like an article. -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "LikeAction",
"agent": {
"@type": "Person",
"name": "John"
},
"object": {
"@type": "ScholarlyArticle",
"name": "We found out that P = NP!"
},
"participant": {
"@type": "Person",
"name": "Steve"
}
}
</script>

27. Web 3.0 - Interobjectivity

28. Giant Global Graph

29. {
"@context":"https://schema.org",
"@graph":[
{
"@type":"Organization",
"@id":"https://yoast.com/#organization"
},
{
"@type":"WebSite",
"@id":"https://yoast.com/#website",
"publisher":{
"@id":"https://yoast.com/#organization"
},
}
]
}

30. What if?

31. Web of things?

32. <script type="application/ld+json">
{
"@context": "http://schema.org",
"@type" : "Racing broom",
"name" : "Nimbus 2000",
"description" : "The Nimbus 2000 is a broom produced by the Nimbus Racing Broom
Company as part of their successful line of racing brooms.",
"image" : "nimbus.png",
"color" : "Mahogany",
"vehicleEngine" : {
"@type": "EngineSpecification",
"name" : "Straight twigs"
}
}
</script>

33. Findability & open data

36. It’s “easy” to add structured data
for the site and content types, but
what about the things on a page?

37. "recipeIngredient": [
"1 14-ounce can of chickpeas"
,"2 cloves garlic"
,"¼ cup tahini sauce"
,"2 tablespoons lemon juice"
,"1 teaspoon cumin"
,"½ teaspoon red pepper flakes"
,"½ teaspoon salt"
,"½ teaspoon black pepper"
,"2 tablespoons extra virgin olive oil"
,"2-4 tablespoons water"
,"Parsley, chopped, to serve"
],

38. "recipeIngredient": [
"1 14-ounce can of chickpeas"
,"2 cloves garlic"
,"¼ cup tahini sauce"
,"2 tablespoons lemon juice"
,"1 teaspoon cumin"
,"½ teaspoon red pepper flakes"
,"½ teaspoon salt"
,"½ teaspoon black pepper"
,"2 tablespoons extra virgin olive oil"
,"2-4 tablespoons water"
,"Parsley, chopped, to serve"
],

39. Blocks allow us to
encapsulate things on
a webpage. They
provide WYSIWYG
for things

40. Back to you!

41. Thank you!