- [Instructor] JSON-LD has a variety of uses.
Perhaps the most common way that many of us consume
JSON-LD content is on the web where JSON-LD snippets
may be displayed as part of search results.
Adding JSON-LD to a webpage uses the same script tags
that are used for JavaScript.
However, while the JavaScript file type
is application/javascript, the type for JSON-LD
is application/ld+json.
An HTML document contains two main sections,
the head and the body.
The head contains information about the page,
while the body section includes the content that is rendered
by a browser, or other user agent,
and presented to the user.
The JSON-LD goes in the head section.
The snippet.jsonld file, for this video,
contains a snippet for the H+ Sport Company.
I want to add this to the product page
for the company website, so search engines
can use the information when indexing the site.
So opening up the products.html file, at the very top
of the file, I have a DOCTYPE on line one
followed by the opening HTML tag,
and then the opening head tag on line three.
Several lines later, on line nine, is the closing head tag,
which includes a slash before the word head.
My first step is to add a script tag,
for my JSON-LD snippet,
anywhere between the start and end head tags.
I'm going to do that at the very end of the head section.
So I'm going to add a new line, below line eight,
just before that closing head tag.
And I'm going to type script type=,
and then in quotes, "application/ld+json".
Close the quotes, close my angle brackets,
and then my editor immediately adds the closing tag for me,
so I don't forget to type it.
I'll press Enter, and I'll press Enter one more time.
And now I can go up to the blank line, I can indent
and now I'm ready to add my snippet.
So I'll switch to the snippet.jsonld file,
I'll select everything and I'll copy to the clipboard.
And then, back in the products file,
I will paste that in between those script tags.
I got an extra blank line on line 23,
so I'm going to take that out.
The indent makes it clear that all of this content
occurs between the opening and closing script tags.
I will save those changes and now my web page includes
a JSON-LD snippet, summarizing basic facts
about the company, which can help search engines
index the page.
It's common for tools, that generate JSON-LD,
to include the opening and closing script tags,
automatically, in the code they generate.
This let's you, simply, copy the generated snippet
and paste it into the head section of an HTML document.