What's a `<script type='application/ld+json'>{jsonObj}</script>` in a `head` section do?

Question

I got this link but didn't understand well. Saw:

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "http://website.com",
    "name": "wbs",
    "description": "Web Studio"
}
</script>

in a source code.

How a code snippet like above in my website header help me or my site?

Froth

What do you not understand about this? – Danialah

I never saw type="application/ld+json" anywhere else. I know it's for robots, but don't know what it's really do. I mean crawlers can get these data from meta tags, right? If you know more about this, please share your knowledge. @Danialah – Froth

Answer 1

In your example, the script element is used as data block, which contains JSON-LD (type="application/ld+json").

JSON-LD is a RDF serialization. It allows you to publish Linked Data (or structured data) using JSON. In your example, the vocabulary Schema.org is used ("@context": "http://schema.org").

This structured data can be used by any interested consumer. Prominent consumers are the search engines Bing, Google, Yahoo, and Yandex, which support structured data that uses the vocabulary Schema.org. One use case they have is displaying more details in their result snippets.

Your example probably doesn’t lead to such an enhanced snippet. You have to check the search engine’s documentation if you want to know what features they offer and which structured data you have to provide for these. For example, Google uses the WebSite type (that’s used in your example) for their Sitelinks Search Box, but you would have to add a potentialAction in addition (for the search function).

Danialah

Answer 2

It gives Google and other crawlers structured data about a website. This is used for rich snippets and knowledge graph panels among others. Have a look at this site for more information: https://developers.google.com/search/docs/guides/intro-structured-data

Selfdrive

Answer 3

That's one way to include structured data in your site which helps any kind of users/crawlers use the information on the site in an efficient way. The most popular example is Google news cards:

This kind of card data are actually coming from structured data.

Other ways to include structured data is through Microdata

And the time of asking this question, I have no idea about these. Now I worked on structured data for some publishers.

Froth

Answer 4

The snippet you got is a script containing JSON-LD data format, a method of encoding Linked Data using JSON. Schema.org vocabulary is used to mark up web contents so that they can be understood by majors search engines (Google, Microsoft, Yandex and Yahoo!). Search engines use this information to display to display relevant .contents to users. For instance, you a website with a well-known term as it’s brand name e.g. Coder. Search engines will interpret it as someone who writes code for softwares. To help search engines interpret this better, you need to provide the data using Schema.org vocabulary. e.g.

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "https://coder.com",
    "name": “Coder”,
    "description": “Platform to learn code”
}
</script>

Delora

Answer 5

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "http://website.com",
    "name": "wbs",
    "description": "Web Studio"
}
</script>

The snippet above is a JSON-LD based Structured Data Island (or Block) embedded in HTML that provides data to User Agents (Software Apps) for additional processing. This data can take the form of Metadata that informs said User Agents about the nature of the host document.

For instance, you can inform a User Agent such as Google's Crawler about the identity of a person associated with a document by embedding the following structured data island:

## JSON-LD Start ##  
{
    "@context": "https://schema.org",
    "@type": "Person",
    "@id": "https://stackexchange.com/users/74272/kingsley-uyi-idehen#me",
    "mainEntityOfPage": "https://stackexchange.com/users/74272/kingsley-uyi-idehen",
    "sameAs": "https://stackexchange.com/users/74272/kingsley-uyi-idehen",
    "name": "Kingsley Uyi Idehen",
    "description": "@kidehen Identified at Web, relatively"
}
## JSON-LD End ##

This is possible because the semantics that underly the schema:sameAs property deem it to be uniquely identifying.

You can also add a browser extension (e.g., our Structured Data Sniffer) to your existing browser(s) that understands the power of structured data islands deployed using , producing what's depicted in the attached screenshot.

Raeraeann

Is ## JSON-LD Start ## literal part of the script, a comment pragma indicating start of a data island? Are you describing another method of embedding a “data island” into contents? JSON proper doesn't allows comments, your example isn't something that can be put into a <script type="application/json"> node… but then, application/ld+json is a different MIME type... but then, why comment pragmas when HTML is already structured?… You've given perhaps the most complex and interesting example, but metasyntax—_embedding_ the example into document—escapes me. I'd appreciate a clarification! – Disable

Answer 6

I wrote this JavaScript code for users to write your brand name on Google. The search form will be displayed to users. Users only need to type in your brand name to display this search and it is most commonly used on the homepage. To use this code copy the JavaScript and paste it at the bottom of the last line of the main content, and don't worry the JavaScript code will not be displayed to users and will only appear in Google results.

<script type="application/Id+json"> { 
    "@context": "schema.org", 
    "@type": "WebSite", "url": "coolernew.com", "potentialAction": { 
        "@type": "SearchAction", "target": "query.example.com/search?q={search_term_string}", "query-input": "required name=search_term_string" 
        } 
    } </script>

Flank