How to add JSON-LD to HTML

1. 01

   Identify the visible entity

   Choose the entity the page actually represents.

2. 02

   Choose the most specific accurate type

   Use a subtype only when the entity meets the definition.

3. 03

   Collect supported properties

   Use information visible on the page or consistently supported by the site.

4. 04

   Serialize valid JSON

   Use a JSON encoder and avoid string concatenation.

5. 05

   Place the script

   Add the application/ld+json script in the head or body.

6. 06

   Validate and compare

   Check syntax, vocabulary, visible consistency, and rendered output.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "@id": "https://example.com/guide/#webpage",
  "url": "https://example.com/guide/",
  "name": "Example Guide",
  "isPartOf": {"@id": "https://example.com/#website"}
}
</script>

• Define the purpose and expected result of json-ld to html.
• Capture the current state using visible entities, page purpose, JSON-LD graphs, identifiers, relationships, required properties, and consumer-specific eligibility.
• Identify the source template, component, plugin, content owner, and release path that controls the output.
• Prepare a test case, approval path, backup or rollback method, and post-release verification plan.

• Parse the deployed json-ld, validate the graph, compare it with visible content, and test any target consumer requirements.
• Check representative page types and edge cases instead of confirming only the example used during implementation.
• Confirm the change did not create publishing properties that are unsupported, hidden, stale, or inconsistent with visible content.
• Record the implementation date, owner, release reference, evidence, and next review trigger.