JsonLD.ioJsonLD.io

HTML / Static Sites

Adding JsonLD.io to a static HTML website is straightforward.

Installation

Add the script tag to your HTML file's <head> section:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>

    <!-- JsonLD.io Script -->
    <script async src="https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js"></script>
</head>
<body>
    <!-- Your content -->
</body>
</html>

Multiple Pages

For sites with multiple HTML files, add the script to each page's <head> section. The script automatically detects the current page URL and injects the appropriate schema.

Using Includes

If you use server-side includes or a templating system, add the script to your shared header file:

<!-- header.html or header.php -->
<head>
    <!-- Other head elements -->
    <script async src="https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js"></script>
</head>

Static Site Generators

For static site generators like Jekyll, Hugo, or Eleventy, add the script to your base layout template:

Jekyll

<!-- _layouts/default.html -->
<head>
    {{ "{% include head.html " }}%}
    <script async src="https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js"></script>
</head>

Hugo

<!-- layouts/partials/head.html -->
<script async src="https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js"></script>

Eleventy

<!-- _includes/base.njk -->
<head>
    <script async src="https://jsonld.io/api/jsonld/YOUR_TOKEN?format=js"></script>
</head>

Verification

After adding the script:

  1. Open your page in a browser
  2. Right-click and select "View Page Source"
  3. Search for application/ld+json to confirm the schema is injected
OverviewWordPress