HtmlHow-ToBeginner · 3 min read

How to Add JSON-LD in HTML for Structured Data

To add json-ld in HTML, include a <script> tag with the attribute type="application/ld+json" inside the <head> or <body>. Inside this tag, place your JSON-LD data as plain JSON text. This helps search engines understand your page better.

📐

Syntax

Use a <script> tag with type="application/ld+json". Inside it, write your JSON-LD data as plain JSON text. This script is not run as JavaScript but read by search engines.

<script>: HTML tag to include scripts.
type="application/ld+json": Tells the browser and search engines this script contains JSON-LD data.
JSON-LD content: Structured data in JSON format describing your page.

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Thing",
  "name": "Example Name"
}
</script>

💻

Example

This example shows how to add JSON-LD describing a person with name and job title inside an HTML page. The JSON-LD is inside a <script> tag in the <head>. When you open this page in a browser, you see the normal page content. The JSON-LD is invisible but helps search engines understand the page.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JSON-LD Example</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "Jane Doe",
    "jobTitle": "Web Developer",
    "url": "https://janedoe.example.com"
  }
  </script>
</head>
<body>
  <h1>Welcome to Jane Doe's Website</h1>
  <p>This page includes JSON-LD structured data.</p>
</body>
</html>

Output

<h1>Welcome to Jane Doe's Website</h1> <p>This page includes JSON-LD structured data.</p>

⚠️

Common Pitfalls

Common mistakes when adding JSON-LD include:

Not using type="application/ld+json" in the <script> tag, so browsers treat it as JavaScript and cause errors.
Placing invalid JSON inside the script, like missing quotes or commas, which breaks parsing.
Putting JSON-LD outside a <script> tag or inside HTML comments, making it invisible to search engines.
Adding multiple conflicting JSON-LD blocks without clear structure.

Always validate your JSON-LD with tools like Google's Rich Results Test.

html

<!-- Wrong: Missing type attribute -->
<script>
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "John"
}
</script>

<!-- Right: Correct type attribute -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "John"
}
</script>

📊

Quick Reference

Remember these tips when adding JSON-LD:

Always use <script type="application/ld+json"> to wrap your JSON-LD.
Write valid JSON inside the script tag (use double quotes, commas, no trailing commas).
Place the script in the <head> or <body> of your HTML.
Validate your JSON-LD with online tools before publishing.

✅

Key Takeaways

Add JSON-LD inside a