schema-markup — schema markup optimization schema-markup, pkgs, gracefullight, community, schema markup optimization, ai agent skill, ide skills, agent automation, rich results implementation, JSON-LD structured data, Angular SEO, React schema integration

v1.0.0
GitHub

About this Skill

Perfect for SEO Agents needing advanced schema markup and structured data optimization. schema-markup is a technique for adding structured data to websites using schema.org markup, enhancing search engine understanding and display of rich snippets.

Features

Implements schema.org markup for rich results
Supports JSON-LD format for structured data
Optimizes FAQ schema, product schema, review schema, and breadcrumb schema
Works with Angular, React, and TypeScript frameworks
Utilizes Git for version control and CLI for command-line interface
Enables rich snippets for enhanced search display

# Core Topics

gracefullight gracefullight
[4]
[0]
Updated: 2/24/2026

Quality Score

Top 5%
62
Excellent
Based on code quality & docs
Installation
SYS Universal Install (Auto-Detect)
> npx killer-skills add gracefullight/pkgs/schema-markup
Supports 19+ Platforms
Cursor
Windsurf
VS Code
Trae
Claude
OpenClaw
+12 more

Agent Capability Analysis

The schema-markup skill by gracefullight is an open-source community AI agent skill for Claude Code and other IDE workflows, helping agents execute tasks with better context, repeatability, and domain-specific guidance. Optimized for schema markup optimization, rich results implementation, JSON-LD structured data.

Ideal Agent Persona

Perfect for SEO Agents needing advanced schema markup and structured data optimization.

Core Value

Empowers agents to implement schema.org markup, enhancing search engine understanding and enabling rich results in search using JSON-LD, rich snippets, and schema.org protocols.

Capabilities Granted for schema-markup

Optimizing website content for search engine crawlers
Generating schema markup for product pages and articles
Debugging rich snippet issues in search engine results

! Prerequisites & Limits

  • Requires knowledge of JSON-LD and schema.org vocabulary
  • Limited to websites with existing content and structure
SKILL.md
Readonly

Schema Markup

You are an expert in structured data and schema markup. Your goal is to implement schema.org markup that helps search engines understand content and enables rich results in search.

Initial Assessment

Check for product marketing context first: If .claude/product-marketing-context.md exists, read it before asking questions. Use that context and only ask for information not already covered or specific to this task.

Before implementing schema, understand:

  1. Page Type - What kind of page? What's the primary content? What rich results are possible?

  2. Current State - Any existing schema? Errors in implementation? Which rich results already appearing?

  3. Goals - Which rich results are you targeting? What's the business value?


Core Principles

1. Accuracy First

  • Schema must accurately represent page content
  • Don't markup content that doesn't exist
  • Keep updated when content changes

2. Use JSON-LD

  • Google recommends JSON-LD format
  • Easier to implement and maintain
  • Place in <head> or end of <body>

3. Follow Google's Guidelines

  • Only use markup Google supports
  • Avoid spam tactics
  • Review eligibility requirements

4. Validate Everything

  • Test before deploying
  • Monitor Search Console
  • Fix errors promptly

Common Schema Types

TypeUse ForRequired Properties
OrganizationCompany homepage/aboutname, url
WebSiteHomepage (search box)name, url
ArticleBlog posts, newsheadline, image, datePublished, author
ProductProduct pagesname, image, offers
SoftwareApplicationSaaS/app pagesname, offers
FAQPageFAQ contentmainEntity (Q&A array)
HowToTutorialsname, step
BreadcrumbListAny page with breadcrumbsitemListElement
LocalBusinessLocal business pagesname, address
EventEvents, webinarsname, startDate, location

For complete JSON-LD examples: See references/schema-examples.md


Quick Reference

Organization (Company Page)

Required: name, url Recommended: logo, sameAs (social profiles), contactPoint

Article/BlogPosting

Required: headline, image, datePublished, author Recommended: dateModified, publisher, description

Product

Required: name, image, offers (price + availability) Recommended: sku, brand, aggregateRating, review

FAQPage

Required: mainEntity (array of Question/Answer pairs)

BreadcrumbList

Required: itemListElement (array with position, name, item)


Multiple Schema Types

You can combine multiple schema types on one page using @graph:

json
1{ 2 "@context": "https://schema.org", 3 "@graph": [ 4 { "@type": "Organization", ... }, 5 { "@type": "WebSite", ... }, 6 { "@type": "BreadcrumbList", ... } 7 ] 8}

Validation and Testing

Tools

Common Errors

Missing required properties - Check Google's documentation for required fields

Invalid values - Dates must be ISO 8601, URLs fully qualified, enumerations exact

Mismatch with page content - Schema doesn't match visible content


Implementation

Static Sites

  • Add JSON-LD directly in HTML template
  • Use includes/partials for reusable schema

Dynamic Sites (React, Next.js)

  • Component that renders schema
  • Server-side rendered for SEO
  • Serialize data to JSON-LD

CMS / WordPress

  • Plugins (Yoast, Rank Math, Schema Pro)
  • Theme modifications
  • Custom fields to structured data

Output Format

Schema Implementation

json
1// Full JSON-LD code block 2{ 3 "@context": "https://schema.org", 4 "@type": "...", 5 // Complete markup 6}

Testing Checklist

  • Validates in Rich Results Test
  • No errors or warnings
  • Matches page content
  • All required properties included

Task-Specific Questions

  1. What type of page is this?
  2. What rich results are you hoping to achieve?
  3. What data is available to populate the schema?
  4. Is there existing schema on the page?
  5. What's your tech stack?

Related Skills

  • seo-audit: For overall SEO including schema review
  • programmatic-seo: For templated schema at scale

FAQ & Installation Steps

These questions and steps mirror the structured data on this page for better search understanding.

? Frequently Asked Questions

What is schema-markup?

Perfect for SEO Agents needing advanced schema markup and structured data optimization. schema-markup is a technique for adding structured data to websites using schema.org markup, enhancing search engine understanding and display of rich snippets.

How do I install schema-markup?

Run the command: npx killer-skills add gracefullight/pkgs/schema-markup. It works with Cursor, Windsurf, VS Code, Claude Code, and 19+ other IDEs.

What are the use cases for schema-markup?

Key use cases include: Optimizing website content for search engine crawlers, Generating schema markup for product pages and articles, Debugging rich snippet issues in search engine results.

Which IDEs are compatible with schema-markup?

This skill is compatible with Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer. Use the Killer-Skills CLI for universal one-command installation.

Are there any limitations for schema-markup?

Requires knowledge of JSON-LD and schema.org vocabulary. Limited to websites with existing content and structure.

How To Install

  1. 1. Open your terminal

    Open the terminal or command line in your project directory.

  2. 2. Run the install command

    Run: npx killer-skills add gracefullight/pkgs/schema-markup. The CLI will automatically detect your IDE or AI agent and configure the skill.

  3. 3. Start using the skill

    The skill is now active. Your AI agent can use schema-markup immediately in the current project.

Related Skills

Looking for an alternative to schema-markup or another community skill for your workflow? Explore these related open-source skills.

View All

widget-generator

Logo of f
f

Generate customizable widget plugins for the prompts.chat feed system

149.6k
0
Design

linear

Logo of lobehub
lobehub

Linear issue management. MUST USE when: (1) user mentions LOBE-xxx issue IDs (e.g. LOBE-4540), (2) user says linear, linear issue, link linear, (3) creating PRs that reference Linear issues. Provides

73.4k
0
Communication

testing

Logo of lobehub
lobehub

Testing guide using Vitest. Use when writing tests (.test.ts, .test.tsx), fixing failing tests, improving test coverage, or debugging test issues. Triggers on test creation, test debugging, mock setup

73.3k
0
Communication

chat-sdk

Logo of lobehub
lobehub

chat-sdk is a unified TypeScript SDK for building chat bots across multiple platforms, providing a single interface for deploying bot logic.

73.0k
0
Communication