HowTo Step-by-Step Schema Markup (JSON-LD)
Detailed instructional structured data containing step sequences, required tools, materials, and estimated duration.
Displayed below main page header or above the tool container. • Zero CLS Container
Production JSON-LD Code Block
Embed this structured data block directly into your HTML <head> or framework layout template.
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to Generate an Open Graph Image Safe Zone Preview",
"description": "Learn how to format social share images so critical text and logos avoid cropping on mobile feeds.",
"totalTime": "PT5M",
"estimatedCost": {
"@type": "MonetaryAmount",
"currency": "USD",
"value": "0"
},
"tool": [
{
"@type": "HowToTool",
"name": "OmniSEO OG Image Safe Zone Previewer"
}
],
"step": [
{
"@type": "HowToStep",
"name": "Upload Social Image",
"text": "Drag and drop your 1200x630px social image into the canvas viewport.",
"url": "https://omniseotools.com/tools/open-graph-image-safe-zone#step1"
},
{
"@type": "HowToStep",
"name": "Check Safe Margins",
"text": "Toggle the 60px padding safe-zone overlay to confirm text and logos remain within the central 1080x510px zone.",
"url": "https://omniseotools.com/tools/open-graph-image-safe-zone#step2"
},
{
"@type": "HowToStep",
"name": "Export Optimized WebP",
"text": "Click 'Export 1200x630 WebP' to download the compressed, high-performance asset.",
"url": "https://omniseotools.com/tools/open-graph-image-safe-zone#step3"
}
]
}Typed Properties Specification (7 Fields)
Key Schema.org properties and sub-objects required to qualify for rich snippet treatment in Google Search.
| Property | Expected Type | Status | Description & Example |
|---|---|---|---|
| name | Text | Required | Title of the tutorial starting with 'How to...' e.g. How to Generate an Open Graph Image Safe Zone Preview |
| step | Array<HowToStep> | Required | Ordered sequence of discrete actionable steps. e.g. [{ "@type": "HowToStep", ... }] |
| totalTime | Duration (ISO 8601) | Recommended | Total duration in ISO 8601 duration format (e.g. PT5M for 5 minutes). e.g. PT5M |
| tool | Array<HowToTool> | Recommended | Tools or software utilities required to complete the task. e.g. [{ "@type": "HowToTool", "name": "..." }] |
| estimatedCost | MonetaryAmount | Recommended | Estimated cost of materials/tools. e.g. { "@type": "MonetaryAmount", "currency": "USD", "value": "0" } |
| supply | Array<HowToSupply> | Recommended | Consumable materials required to complete the procedure. e.g. [{ "@type": "HowToSupply", "name": "Source Image File" }] |
| inLanguage | Text | Recommended | Language code for tutorial copy. e.g. en-US |
Google Search Console Pitfalls & Critical Warnings
Avoid these 3 common validation traps, parser errors, and algorithmic policy penalties when deploying HowTo schema.
Invalid ISO 8601 Duration Format
Writing '5 minutes' instead of 'PT5M' causes schema validation errors in Google Search Console.
Use strict ISO 8601 duration syntax like 'PT30M' or 'PT1H'.
Single Giant Step Containing Whole Tutorial
Collapsing all instructions into a single HowToStep undermines step-by-step display.
Break instructions into 3 to 7 distinct HowToStep objects.
Applying HowTo to Non-Procedural Content
Using HowTo on general essays, reviews, or promotional sales pitches.
Only apply to step-by-step procedures with clear beginning and end.
Recommended Implementation Scenarios
Related Schema Blueprints
Explore complementary structured data blueprints across the Technical SEO cluster.
Displayed below main page header or above the tool container. • Zero CLS Container