Web Page Metadata - Json-Ld syntax

What is JSON-LD

https://json-ld.org/ is a web metadata format that you can add in the head section of a web page in a JSON format as a html data block.

Example

Organization

With the ld+json data block:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "url": "http://www.example.com",
  "name": "Unlimited Ball Bearings Corp.",
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+1-401-555-1212",
    "contactType": "Customer service"
  }
}
</script>

where:

Article

see Web Page Metadata - Article Page Type

How-to

https://developers.google.com/search/docs/data-types/how-to

Course

https://developers.google.com/search/docs/data-types/course

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Course",
  "name": "Introduction to Computer Science and Programming",
  "description": "Introductory CS course laying out the basics.",
  "provider": {
    "@type": "Organization",
    "name": "University of Technology - Eureka",
    "sameAs": "http://www.ut-eureka.edu"
  }
}
</script>

where:

Q&A

https://developers.google.com/search/docs/data-types/qapage

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "QAPage",
    "mainEntity": {
      "@type": "Question",
      "name": "How many ounces are there in a pound?",
      "text": "I have taken up a new interest in baking and keep running across directions in ounces and pounds. I have to translate between them and was wondering how many ounces are in a pound?",
      "answerCount": 3,
      "upvoteCount": 26,
      "dateCreated": "2016-07-23T21:11Z",
      "author": {
        "@type": "Person",
        "name": "New Baking User"
      },
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "1 pound (lb) is equal to 16 ounces (oz).",
        "dateCreated": "2016-11-02T21:11Z",
        "upvoteCount": 1337,
        "url": "https://example.com/question1#acceptedAnswer",
        "author": {
          "@type": "Person",
          "name": "SomeUser"
        }
      },
      "suggestedAnswer": [
        {
          "@type": "Answer",
          "text": "Are you looking for ounces or fluid ounces? If you are looking for fluid ounces there are 15.34 fluid ounces in a pound of water.",
          "dateCreated": "2016-11-02T21:11Z",
          "upvoteCount": 42,
          "url": "https://example.com/question1#suggestedAnswer1",
          "author": {
            "@type": "Person",
            "name": "AnotherUser"
          }
        }, {
          "@type": "Answer",
          "text": " I can't remember exactly, but I think 18 ounces in a lb. You might want to double check that.",
          "dateCreated": "2016-11-06T21:11Z",
          "upvoteCount": 0,
          "url": "https://example.com/question1#suggestedAnswer2",
          "author": {
            "@type": "Person",
            "name": "ConfusedUser"
          }
        }
      ]
    }
  }
</script>

Javascript

Library

https://github.com/digitalbazaar/jsonld.js

How to add json-ld programmatically

1)

fetch('https://api.example.com/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = structuredDataText;
  document.head.appendChild(script);
});

Documentation / Reference





Discover More
HTML - Data Block

data block are a way to embed data in a html document. The well known is ld-json data block Inject json data in pre-rendered HTML Static pre-generated by the server (ie pre-rendering), the...
HTML - Document

An HTML document is a well-formed HTML string (ie that contains the html root element). web page The HTML textual representation can be stored: in a string in a file or in the body of an HTTP...
Metadata

HTML element HTML link tag for relation between document and the canonical url PageMaps: invisible blocks of XML that add metadata to pages. Microformats: tags used to mark up visible page content...
Schema.org

You define a type of your page. See the full list at Full vocabulary can be used with many different encodings, including: RDFa, ...
Search Engine - How to advertise your website engine

If you want to advertise your internal search engine (search engine of your website), you can do it: via and via Check the dedicated page: Search Action is a potentialAction ld+json metadata...
Rich Result
Search Engine - Rich Result (Rich Snippet)

A rich result is a rich result that is styled and contains graphical elements, including review stars, thumbnail images, or some kind of visual enhancement. To display Rich Snippets, Search Engine looks...
Google Search Breadcrumb
UI - Breadcrumb

A breadcrumb trail on a page indicates the page's position in the site hierarchy. It permits to categorize the information. A Example in More ... ...
Web Page Metadata - Article Page Type

article An article web page is a schema.org property value that represent an article (blog, newspaper,..) The example comes from this page article...



Share this page:
Follow us:
Task Runner