Schema Markup

Structured data markup is a form of SEO that allows websites to have engaging widgets in search results known as rich results

Schemas

Schema Docs — Schema Search
Schema Docs — Full schema hierarchy
Google Search Central — Supported Structured data markup

Formats


JSON-LD	JSON object in the `<head>`	Recommended
Microdata	HTML tags in `<body>` by WHATWG
RDFa	HTML tags in `<body>` by W3C

Google Search Central — Structured data · Supported formats

JSON-LD

JSON-LD · JSON for Linking Data

<script type="application/ld+json">                        
Place a  JSON-LD <script> in your <head>
{
    "@context": "https://schema.org",         
The  "@context" points to  Schema.org 
    "@type": "VideoGame",        
The  "@type" is a  Schema Markup schema 

 Schema Docs —  Schema Search 
 Full schema hierarchy 
Example — 11 collapsed lines
    "gamePlatform": "Minecraft: Java Edition", 
    "gameServer": {
        "@type": "GameServer",            
Nested objects are specified with  "@type"
        "playersOnline": 115,
        "serverStatus": "https://schema.org/Online"                                      
 Enumerations should be specified by URL 
    },
    "playMode": "MultiPlayer",                       
Alternatlvely,  Enumerations can be specified by name
    "url": "https://zombiecraft.net",
    "name": "Zombiecraft",
    "creator": "Stephcraft",
    "version": "Alpha" 
}
</script>

JSON-LD
Wikipedia — JSON-LD

Microdata

Microdata works with 3 HTML tags

itemscope

itemtype

itemprop

<div itemscope itemtype="https://schema.org/VideoGame">          
 Schemas are identified with
itemscope and itemtype
    <h1 itemprop="name">Zombiecraft</h1>            
 Properties are identified with itemprop  by name, and content value
    <a itemprop="url" href="https://zombiecraft.net">Website</a>
    <p>
        A <span itemprop="gamePlatform">Minecraft: Java Edition</span> server
        made by <span itemprop="creator">Stephcraft</span>,
        currently in <span itemprop="version">Alpha</span>                               
 Properties can be under sub-elements
    </p>
Advanced — 6 collapsed lines
    <time itemprop="datePublished" datetime="2020-07-01">July 1st, 2020</time>        
 Date Properties can be represented with
<time/> labelled with datetime
    <link itemprop="playMode" href="https://schema.org/MultiPlayer">Play Multiplayer!</link>       
 Enum Properties can be represented with
<link/> labelled with href
    <div itemprop="gameServer" itemscope itemtype="https://schema.org/GameServer">                                    
Nested  Schemas can be identified with all 3
itemprop, itemscope and itemtype
        <span itemprop="playersOnline">115</span> Online
        <meta itemprop="serverStatus" content="https://schema.org/Online"/>           
Image/Implicit  Properties can be represented with <meta/> instead of visible elements 
    </div> 
</div>

Schema Docs — Getting started using Microdata
Wikipedia — HTML Microdata

RDFa

RDFa works with 3 HTML tags

vocab

typeof

property

<div vocab="http://schema.org" typeof="VideoGame">        
 Schemas are identified with
vocab and typeof
    <h1 property="name">Zombiecraft</h1>            
 Properties are identified with property by name, and content value
    <a property="url" href="https://zombiecraft.net">Website</a>
    <p>
        A <span property="gamePlatform">Minecraft: Java Edition</span> server
        made by <span property="creator">Stephcraft</span>,
        currently in <span property="version">Alpha</span>                               
 Properties can be under sub-elements
    </p>
Advanced — 6 collapsed lines
    <time property="datePublished" datetime="2020-07-01">July 1st, 2020</time>        
 Date Properties can be represented with <time/> labelled with datetime  
    <link property="playMode" href="https://schema.org/MultiPlayer">Play Multiplayer!</link>
    <div property="gameServer" typeof="GameServer">    Nested  Schemas can be identified with both property and typeof
        <span property="playersOnline">115</span> Online
        <meta property="serverStatus" content="https://schema.org/Online"/>           
Image/Implicit  Properties can be represented with <meta/> instead of visible elements 
    </div> 
</div>

RDFa Docs
Wikipedia — RDFa

Generate JSON-LD

JSON-LD is Recommended because it can be generated independently from the site’s content

`schema-dts`	1.2K	2.7M	2.0.0	7 years	Types
`react-schemaorg`	520	142K	2.0.0	7 years	React
`astro-seo-schema`	608	18K	7.0.0	4 years	Astro

import type { VideoGame, CreativeWork, WithContext } from 'schema-dts'
2 collapsed lines
import { playersOnline, serverStatus } from '@/realtime' 
import { url, name, author, version } from '@/consts' 

export const schemaMarkup: WithContext<VideoGame> = {
    '@context': 'https://schema.org',
    '@type': 'VideoGame',
Example — 9 collapsed lines
    'gamePlatform': 'Minecraft: Java Edition', 
    'gameServer': {
        "playersOnline": playersOnline,
        "serverStatus": `https://schema.org/${serverStatus}`
    },
    'playMode': 'MultiPlayer',

    /** @see CreativeWork */
    url, name, author, version 
}

<script type="application/ld+json">
    {JSON.stringify(schemaMarkup)}
</script>

Tools

Editors

JSON-LD — Playground
Schema Markup Generator
Google — Structured Data Markup Helper

Validators

Schema.org — Validator
Google — Rich Results Test

Resources

Schema.org
Google Search Central — Structured data
Schema Markup Usage Statistics

Frameworks

Astro Docs — JSON-LD
Next.js Docs — JSON-LD
TanStack Start Docs — JSON-LD