- [Instructor] Common vocabularies exist
for many popular types of data,
and JSON-LD supports tagging data using vocabularies
from a variety of sources.
To specify a vocabulary for a JSON object,
you use the special @context key name.
Each vocabulary has its own namespace identifier,
which is a URI.
This is a string that looks like a URL
but may not correspond to an actual live resource
on the web.
However, the identifier is unique,
and can be used programmatically
to correlate multiple pieces of JSON-LD data
that use a common vocabulary.
The start files for this video
contain a JSON object containing basic information
about the h+ Sport company,
and that's stored in the snippet.json file.
I want to convert this to a JSON-LD snippet,
using a public context.
Schema.org defines contexts
for a number of generic types of data.
I noticed the thing section here
includes an organization section.
So I'll select that to explore it.
Schema.org vocabularies can require
a little familiarization.
There's a lot of information here.
In general, schema.org vocabularies start
with a list and description of key names
that are specific to the category you selected.
Here organization.
Then they may be followed by a list
of other relevant key names from the parent category
that are relevant.
Here, the organization vocabulary uses keys like name
and image from the more generic thing category.
To build a schema from scratch,
it can be useful to start with a model.
The JSON-LD Playground is provided
by the organization that maintains the JSON-LD standard.
And it gives examples for a number of common categories.
It doesn't show organization
but I'm going to select person.
And at the top of the window,
I have JSON-LD Input, a model to build on.
I see the context is simply http://schema.org.
Then there's an @type key
that indicates the vocabulary within schema.org
that's used here.
After that, the keys match the names
in the schema.org documentation for a person.
So I'm going to try this out with my code.
First, I'm going to select all of my JSON from snippet.json.
I'm going to copy it to the clipboard,
and then over in snippet.jsonld,
I'm going to paste it in as a starting point.
The JSON-LD file extension lets the editor know
that it should parse the contents as JSON-LD.
On the JSON-LD Playground, in the JSON-LD Input box,
I can see at the top
that I need a couple special JSON-LD keys.
First is @context,
which is going to be the same as what's shown for the example.
That schema.org URL.
So I'm going to insert that at the top.
@context: http://schema.org.
And make sure to include that final slash.
Without that, the context value isn't valid.
Then I need to put a comma at the end.
And the next key I need is type.
And that's an @type.
Now, I'm not defining a person
but an organization.
And back in my browser, if I go back to the schema.org page
for organization, I can see right at the top,
it says organization, a schema.org type.
So I know I can use the word organization
as my type value here.
So I'll go back to my code,
and use Organization for my type name.
Next, I need to make sure the data
I'm providing uses keys defined by the organization type.
First, company.
So I'll switch over to the organization list.
And I can see that's not in the list.
But I've spent some time looking at this,
and if I actually scroll down
to the properties from things section,
there's a name key,
and that's the same as for the person type.
So in my snippet,
I can simply replace company with name.
Next, I have website.
And back in the list of keys
for the organization schema type,
I can see this isn't listed either
but it's a common type of data
for both a person and an organization.
And so again, if I scroll down,
I can see that the URL value is again listed
in the thing section for organization.
So in my snippet,
I'll replace website with url.
Next, I have image.
And it's important to understand just what this image is.
And in this case, it's the company logo.
Back on the schema.org page,
if I look through the list of keys,
I can see that there is a logo value.
And its description matches what I have.
So back in my code,
I'll replace image with logo.
And finally, I have overview.
This is a summary of information about the company,
what it does.
Again, a pretty common type of data for a number
of types of information,
not just an organization.
And so I'll look at that thing section again,
and there's a description key.
And that seems to match what I need.
So back in my code,
I'll replace overview with description.
And I'll save that.
Now I've converted my organization overview
to use the public schema.org organization type,
and I've implemented key names for my data
that are specified for this type.
I could share this data on my website
or with other companies,
and it would be clear from the information provided here
that I'm specifying the company name,
URL, logo image and a company description.
No need for anyone to guess what this data means.