Creating How-To content is an excellent way to provide valuable instructions to your users. With Schema.org markup, you can help search engines better understand your content structure and potentially get rich results in search.
The defineHowTo function creates HowTo Schema whilst handling relations for you.
Note that some fields may already be inferred, see Schema.org Params
import { defineHowTo, useSchemaOrg } from '@unhead/schema-org/typescript'
useSchemaOrg([
defineHowTo({
name: 'How to Build a Desk',
description: 'A step-by-step guide to building a home office desk.',
image: '/images/desk-building.jpg',
estimatedCost: {
currency: 'USD',
value: '100'
},
supply: [
'Wood panels',
'Screws',
'Hammer',
'Nails'
],
tool: [
'Screwdriver',
'Power drill',
'Tape measure'
],
step: [
{
name: 'Gather materials',
text: 'Collect all necessary supplies and tools.',
image: '/images/desk-materials.jpg',
url: '/how-to-build-desk/materials'
},
{
name: 'Cut wood panels',
text: 'Cut the wood panels to the proper dimensions.',
image: '/images/cutting-panels.jpg',
url: '/how-to-build-desk/cutting'
},
{
name: 'Assemble desk frame',
text: 'Connect the panels to form the desk frame.',
image: '/images/desk-frame.jpg',
url: '/how-to-build-desk/assembly'
},
{
name: 'Attach desk top',
text: 'Secure the desk top to the frame.',
image: '/images/desk-top.jpg',
url: '/how-to-build-desk/finishing'
}
]
})
])
For more complex How-To guides, you can define detailed steps using the HowToStep type.
import { defineHowTo, useSchemaOrg } from '@unhead/schema-org/typescript'
useSchemaOrg([
defineHowTo({
name: 'How to Change a Flat Tire',
description: 'A comprehensive guide to safely changing a flat tire.',
step: [
{
'@type': 'HowToStep',
'name': 'Prepare your vehicle',
'itemListElement': [
{
'@type': 'HowToDirection',
'text': 'Park your car on flat, stable ground'
},
{
'@type': 'HowToDirection',
'text': 'Apply the parking brake'
},
{
'@type': 'HowToDirection',
'text': 'Turn on hazard lights'
}
]
},
{
'@type': 'HowToStep',
'name': 'Remove the flat tire',
'itemListElement': [
{
'@type': 'HowToDirection',
'text': 'Loosen lug nuts with a lug wrench'
},
{
'@type': 'HowToDirection',
'text': 'Use a jack to lift the vehicle'
},
{
'@type': 'HowToDirection',
'text': 'Remove the lug nuts completely'
},
{
'@type': 'HowToDirection',
'text': 'Remove the flat tire'
}
]
}
]
})
])
For How-To guides, you can specify how long each step takes or the total time required:
import { defineHowTo, useSchemaOrg } from '@unhead/schema-org/typescript'
useSchemaOrg([
defineHowTo({
name: 'How to Make Pancakes',
totalTime: 'PT30M', // 30 minutes in ISO 8601 duration format
step: [
{
name: 'Mix ingredients',
text: 'Combine flour, milk, eggs, and sugar in a bowl.',
performTime: 'PT5M' // 5 minutes
},
{
name: 'Cook pancakes',
text: 'Pour batter onto hot griddle and flip when bubbles form.',
performTime: 'PT15M' // 15 minutes
}
]
})
])
For the best user experience, your HTML structure should match your schema. Here's an example of how you might structure your How-To content:
<div>
<h1>How to Build a Desk</h1>
<p>A step-by-step guide to building a home office desk.</p>
<div>
<h2>What You'll Need</h2>
<ul>
<li>Wood panels</li>
<li>Screws</li>
<li>Hammer</li>
<li>Nails</li>
</ul>
<h2>Tools</h2>
<ul>
<li>Screwdriver</li>
<li>Power drill</li>
<li>Tape measure</li>
</ul>
</div>
<div>
<h2>Steps</h2>
<div>
<h3>1. Gather materials</h3>
<img src="/images/desk-materials.jpg" alt="Materials for desk building" />
<p>Collect all necessary supplies and tools.</p>
</div>
<div>
<h3>2. Cut wood panels</h3>
<img src="/images/cutting-panels.jpg" alt="Cutting wood panels" />
<p>Cut the wood panels to the proper dimensions.</p>
</div>
<!-- Additional steps... -->
</div>
</div>