Schema
How To
Schema.org HowTo
- Type:
defineHowTo(input?: HowTo)
Describes a HowTo guide, which contains a series of steps. - Component:
SchemaOrgHowTo
(see how components work)
Useful Links
Required properties
- name
string
A string describing the guide. This can be provided using route meta on thetitle
key, see defaults. - step
HowToStep[]
.
An array of objects describing the steps in the guide. Appends the HowToStep entries on to the HowTo. Completes@type
and resolvesurl
andimage
. - step.text The full instruction text of this step.
Examples
Minimal
defineHowTo({
name: 'How to tie a tie',
step: [
{
url: '#step-one',
text: 'Button your shirt how you\'d like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.',
image: '/1x1/photo.jpg',
},
{
url: '#step-two',
text: 'Cross the long end over the short end. This will form the basis for your knot.',
image: '/1x1/photo.jpg',
},
{
url: '#step-three',
text: 'Bring the long end back under the short end, then throw it back over the top of the short end in the other direction. ',
image: '/1x1/photo.jpg',
},
{
text: 'Now pull the long and through the loop near your neck, forming another loop near your neck.',
image: '/1x1/photo.jpg',
},
{
text: 'Pull the long end through that new loop and tighten to fit! ',
image: '/1x1/photo.jpg',
},
]
})
Defaults
- @type:
HowTo
- @id:
${canonicalUrl}#howTo
- name:
currentRouteMeta.title
(see: Schema.org Params) - image:
currentRouteMeta.image
(see: Schema.org Params) - description:
currentRouteMeta.description
(see: Schema.org Params) - inLanguage:
options.defaultLanguage
(see: user Config) - mainEntityOfPage: WebPage Reference
Types
/**
* Instructions that explain how to achieve a result by performing a sequence of steps.
*/
export interface HowToSimple extends Thing {
/**
* A string describing the guide.
*/
name: string
/**
* An array of howToStep objects
*/
step: NodeRelations<HowToStep | string>[]
/**
* The total time required to perform all instructions or directions (including time to prepare the supplies),
* in ISO 8601 duration format.
*/
totalTime?: string
/**
* Introduction or description content relating to the HowTo guide.
*/
description?: string
/**
* The language code for the guide; e.g., en-GB.
*/
inLanguage?: string
/**
* The estimated cost of the supplies consumed when performing instructions.
*/
estimatedCost?: string | unknown
/**
* Image of the completed how-to.
*/
image?: NodeRelations<ImageObject | string>
/**
* A supply consumed when performing instructions or a direction.
*/
supply?: string | unknown
/**
* An object used (but not consumed) when performing instructions or a direction.
*/
tool?: string | unknown
/**
* A video of the how-to. Follow the list of required and recommended Video properties.
* Mark steps of the video with hasPart.
*/
video?: NodeRelations<VideoObject | string>
}
export interface HowToStepSimple extends Thing {
/**
* A link to a fragment identifier (an 'ID anchor') of the individual step
* (e.g., https://www.example.com/example-page/#recipe-step-5).
*/
url?: string
/**
* The instruction string
* ("e.g., "Bake at 200*C for 40 minutes, or until golden-brown, stirring periodically throughout").
*/
text: string
/**
* The word or short phrase summarizing the step (for example, "Attach wires to post" or "Dig").
* Don't use non-descriptive text (for example, "Step 1: [text]") or other form of step number (for example, "1. [text]").
*/
name?: string
/**
* An image representing the step, referenced by ID.
*/
image?: NodeRelations<ImageObject | string>
/**
* A video for this step or a clip of the video.
*/
video?: NodeRelations<VideoObject | string>
/**
* A list of detailed substeps, including directions or tips.
*/
itemListElement?: NodeRelations<HowToDirection | string>[]
}