howto-section-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Components: HowTo Section

组件：HowTo区块

Guides HowTo as an in-page section: a block of ordered steps (and optional HowTo JSON-LD) embedded inside article, documentation, tool, or landing pages. Not a standalone page type—parent page structure and templates come from article-page-generator, docs-page-generator, tools-page-generator, landing-page-generator, etc. Distinct from FAQ (Q&A → FAQPage) and from full article body drafting alone (article-content). schema-markup remains the source for exhaustive Schema.org property rules and type-wide tables; this skill owns section-level placement, copy, HTML, and HowTo-vs-FAQ decisions.

When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

本指南介绍作为页面内区块的HowTo：嵌入在文章、文档、工具或落地页中的有序步骤区块（可附带可选的HowTo JSON-LD）。并非独立页面类型——父页面的结构和模板由article-page-generator、docs-page-generator、tools-page-generator、landing-page-generator等提供。与FAQ（问答→FAQPage）及仅起草完整文章正文（article-content）的场景有所区别。schema-markup仍是Schema.org属性规则及全类型表格的权威来源；本技能负责区块级的布局、内容、HTML代码，以及区分HowTo与FAQ的决策。

调用时机：首次使用时，如有必要，先用1-2句话说明本技能的覆盖范围及其重要性，再提供主要输出。后续使用或用户要求跳过说明时，直接提供主要输出。

HowTo Section vs FAQ Section

HowTo区块 vs FAQ区块

Dimension	HowTo section	FAQ section
Intent	User follows ordered steps to complete a task	User reads Q&A pairs for doubts
Structure	Steps (1→2→3), optional tools/time/supplies	Question → answer per item
Schema	HowTo (Schema.org)	FAQPage
UI	Often horizontal tabs for steps; or numbered list in flow	Often vertical accordion
Skill	howto-section-generator (this)	faq-page-generator

Do not mark FAQ content as HowTo or vice versa; schema must match visible content.

维度	HowTo区块	FAQ区块
意图	用户遵循有序步骤完成任务	用户阅读问答对解决疑问
结构	步骤（1→2→3），可附带工具/时间/物料说明	每个条目为问题→答案
Schema类型	HowTo（Schema.org）	FAQPage
UI样式	通常为步骤式横向标签页；或流式编号列表	通常为垂直折叠面板
对应技能	howto-section-generator（本技能）	faq-page-generator

请勿将FAQ内容标记为HowTo，反之亦然——Schema类型必须与可见内容匹配。

Placement Within the Parent Page

在父页面中的布局位置

This section is always part of a larger page. Typical positions:

Location	When
After intro (and optional TL;DR / Key Takeaways)	Article: context first, then solution = steps
As the main middle of the page	Tutorial-heavy article where the HowTo block carries most of the value
After product/tool context	Tool or LP: short context → How to use steps → FAQ/CTA

Narrative: Align with PAS for how-to articles—Problem in intro; Agitation in brief context; Solution = the HowTo section. Answer-first still applies per step (see below).

Parent page vs URL split: Whether the parent is one article URL or a separate doc/tool URL is decided by content-strategy, article-page-generator, docs-page-generator, or tools-page-generator. This skill only defines the HowTo block; if each tab were a different ranking topic, use separate URLs (pillar/cluster). If all steps are one task, keep one page with one HowTo section (or multiple sections only if clearly separated).

本区块始终是更大页面的一部分。典型位置如下：

位置	适用场景
引言之后（可附带TL;DR/关键要点）	文章：先提供背景信息，再给出解决方案=步骤
页面中部核心区域	以教程为主的文章，HowTo区块为核心价值载体
产品/工具背景介绍之后	工具页、落地页的英雄区之后：简短背景→使用步骤→FAQ/行动召唤按钮

叙事逻辑：HowTo类文章遵循PAS框架——引言提出问题；简短背景中强化痛点；解决方案即HowTo区块。先给出答案的原则仍适用于每个步骤（见下文）。

父页面与URL拆分：父页面是单篇文章URL还是独立的文档/工具URL，由content-strategy、article-page-generator、docs-page-generator或tools-page-generator决定。本技能仅定义HowTo区块；若每个标签页对应不同的排名主题，请使用独立URL（支柱/集群模式）。若所有步骤属于同一任务，则保留在单个页面中，包含一个HowTo区块（仅当内容明确分离时可使用多个区块）。

Content Structure

内容结构

Headings and lists

标题与列表

Section title (H2)

区块标题（H2）

Headings should describe the topic or purpose (WCAG 2.4.6)—not just decorate. Prefer one primary H2 for the procedure; match page type and search intent.

Pattern	Best for	Examples
Outcome / task (default)	Blog posts, guides, most informational “how to …” queries	“How to [verb] [outcome]”, “[Task] step by step”
Product or tool	Tool pages, LP blocks after hero	“How to use [Product]”, “Using [Tool]”
Quick start / walkthrough	Docs, onboarding	“Quick start”, “Walkthrough”, “Get started with [X]”
Numbered hook (“In 3 steps …”, “3 simple steps to …”)	Short LP/tool copy when simplicity is the message	Use only if the visible `<ol>` (and HowTo JSON-LD `step` list) has exactly that many steps

Rules

Avoid a bare “Steps” or “Instructions” as the only H2 text when you can name the outcome—screen reader and scan users lose context.
Count in the title: If you use “3 steps” / “In 4 steps” in the H2, tabs, or subheads, the on-page list and HowTo schema must show the same number of steps (no extra steps only in JSON-LD).
Volatile UIs: If step count may change with releases, prefer non-count titles (“How to …”) and put “three main steps” in body copy if needed.
Language: Mirror the query (e.g. “How to …” for EN informational intent); localized pages: same intent in
```
inLanguage
```
as the visible heading.
Steps: Use semantic ordered list
```
<ol>
```
with
```
<li>
```
per step; bold the step title inside the
```
<li>
```
if needed.
Sub-steps: Nested
```
<ol>
```
or H3 under a step when the step is long.
Avoid: Fake lists built only with
```
<div>
```
—hurts extraction and accessibility.

标题应描述主题或目标（符合WCAG 2.4.6标准）——而非仅作为装饰。优先为流程设置一个主H2标题，使其匹配页面类型与搜索意图。

模式	最佳适用场景	示例
成果/任务（默认）	博客文章、指南、大多数“如何……”类信息查询	“How to [动词] [成果]”、“[任务] 分步指南”
产品或工具	工具页、落地页英雄区之后的区块	“How to use [Product]”、“Using [Tool]”
快速入门/演练	文档、新用户引导	“Quick start”、“Walkthrough”、“Get started with [X]”
数字钩子（“In 3 steps …”、“3 simple steps to …”）	简短的落地页/工具文案，核心传递简洁性信息	仅当可见的 `<ol>` 列表（及HowTo JSON-LD的 `step` 列表）恰好包含指定数量的步骤时使用

规则

若可以明确成果，避免仅使用“Steps”或“Instructions”作为H2标题——屏幕阅读器用户和快速浏览用户会失去上下文。
标题中的数字：若在H2、标签页或子标题中使用“3 steps”/“In 4 steps”，页面上的列表和HowTo Schema必须显示完全相同的步骤数（不得仅在JSON-LD中添加额外步骤）。
动态UI场景：若步骤数可能随版本更新而变化，优先使用不含数字的标题（如“How to …”），必要时可在正文中提及“三个主要步骤”。
语言适配：匹配用户查询（例如英文信息类查询使用“How to …”）；多语言页面中，
```
inLanguage
```
需与可见标题的语言一致。
步骤：使用语义化有序列表
```
<ol>
```
，每个步骤对应一个
```
<li>
```
；必要时可在
```
<li>
```
内加粗步骤标题。
子步骤：当步骤内容较长时，使用嵌套
```
<ol>
```
或步骤下的H3标题。
避免：仅用
```
<div>
```
构建伪列表——这会影响内容提取和可访问性。

Answer-first per step

每个步骤先给出答案

In each step (or immediately under each step heading), give a direct answer in ~40–60 words—what to do—then tools, screenshots, edge cases.
Matches featured-snippet list patterns and article-content QAE (Question → short Answer → Evidence).

在每个步骤中（或步骤标题下方），先用40-60字左右直接给出答案——即具体操作，再补充工具、截图、边缘情况说明。
此模式匹配精选摘要的列表格式及article-content的QAE框架（问题→简短答案→依据）。

Word count (article context)

字数要求（文章场景）

Standard how-to articles often land ~1,000–1,500 words total for a single topic; the HowTo section is often the bulk of “actionable” depth. See article-content for full ranges by type.

标准HowTo类文章单主题总字数通常为1000-1500字；HowTo区块通常是“可操作”内容的核心部分。完整字数范围请参考article-content。

Featured Snippets & SERP

精选摘要与搜索结果页（SERP）

Format	Role
List snippet (~19% of snippet formats)	How-to, steps, options—use `<ol>` / `<ul>`
Schema	FAQPage, HowTo, Article support identifying extractable blocks; not required for Featured Snippets
HowTo ↔ snippet	HowTo maps to list-style position-zero; desktop support historically stronger; mobile may be limited

See featured-snippet, serp-features.

格式	作用
列表摘要（约占摘要格式的19%）	适用于HowTo、步骤、选项——使用 `<ol>` / `<ul>`
Schema标记	FAQPage、HowTo、Article类型有助于识别可提取的区块；并非获取精选摘要的必需条件
HowTo与摘要的关联	HowTo对应列表式首位排名；桌面端支持历史更完善；移动端支持有限/依赖场景。2023-2024年Google可能已弃用或缩减HowTo富结果；但Schema.org仍定义HowTo类型；Bing及AI系统可能仍会读取该标记。

详情请参考featured-snippet、serp-features。

Schema.org: HowTo (JSON-LD)

Schema.org：HowTo（JSON-LD）

Use case: Tutorials, procedural guides, visible step sequences in this section.

Principles (detail in schema-markup):

JSON-LD in
```
<script type="application/ld+json">
```
; properties must match visible content—no hidden-only steps.
Google: HowTo was high-impact for rich results on desktop; mobile support is limited/context-dependent. Google may have deprecated or reduced HowTo rich results (2023–2024); Schema.org still defines HowTo; Bing and AI systems may still consume it.
GEO: HowTo is among types that help AI cite structured procedures (generative-engine-optimization).

Where the section lives (parent page type)

Parent page type	Typical embedding
Blog / guide	HowTo section inside the article body
Documentation	Guides/tutorials—often TechArticle + HowTo per docs-page-generator
Free tool / calculator	SoftwareApplication + HowTo for “how to use” per tools-page-generator

Multilingual:

inLanguage

on HowTo (and related types) aligned with hreflang; localize step text in JSON-LD. See schema-markup.

Validation: Rich Results Test, Schema.org Validator.

适用场景：教程、流程指南、本区块内的可见步骤序列。

原则（细节请参考schema-markup）：

将JSON-LD放置在
```
<script type="application/ld+json">
```
标签中；属性必须与可见内容匹配——不得存在仅隐藏的步骤。
Google说明：HowTo曾对桌面端富结果有高影响力；移动端支持有限/依赖场景。2023-2024年Google可能已弃用或缩减HowTo富结果；但Schema.org仍定义HowTo类型；Bing及AI系统可能仍会读取该标记。
生成式引擎优化（GEO）：HowTo是帮助AI引用结构化流程的类型之一（generative-engine-optimization）。

父页面类型对应的嵌入方式

父页面类型	典型嵌入方式
博客/指南	HowTo区块嵌入文章正文
技术文档	指南/教程——通常结合TechArticle与HowTo类型，遵循docs-page-generator规范
免费工具/计算器	结合SoftwareApplication与HowTo类型，提供“使用方法”说明，遵循tools-page-generator规范

多语言适配：HowTo（及相关类型）的

inLanguage

需与hreflang标签对齐；JSON-LD中的步骤文本需本地化。详情请参考schema-markup。

验证工具：Rich Results Test、Schema.org Validator。

UI: Tabs, accordions, and crawlability

UI：标签页、折叠面板与可爬取性

Pattern	Guidance
Horizontal tabs	Good for Step 1 \| Step 2 \| Step 3 when all steps are one topic; see tab-accordion
DOM	All step content must be in the initial HTML—no AJAX load on tab click
Default open	First tab or first step visible by default
Primary vs secondary	If the HowTo is the page’s main value, avoid burying all steps in low-priority hidden UI; crawlers index hidden content, but primary intent should be clear

Vertical accordion for steps is less common than for FAQ; if used, same rules: server-rendered, first item expanded, content in DOM at load (rendering-strategies).

模式	指导原则
横向标签页	适用于“Step 1
DOM结构	所有步骤内容必须包含在初始HTML中——不得在点击标签页时通过AJAX加载
默认展开	默认显示第一个标签页或第一个步骤
主次内容区分	若HowTo是页面的核心价值，避免将所有步骤隐藏在低优先级的UI中；爬虫会索引隐藏内容，但核心意图需清晰可见

步骤使用垂直折叠面板的情况比FAQ少；若使用，需遵循相同规则：服务端渲染，默认展开第一个条目，内容在页面加载时已存在于DOM中（rendering-strategies）。

GEO

生成式引擎优化（GEO）

Clear steps, self-contained paragraphs per step, and HowTo JSON-LD help models cite procedures.
Layer with TL;DR / Key Takeaways at article level when appropriate (article-content, generative-engine-optimization).

清晰的步骤、每个步骤独立的段落，以及HowTo JSON-LD有助于AI模型引用流程。
必要时可在文章层级添加TL;DR/关键要点（article-content、generative-engine-optimization）。

Zero-click

零点击搜索

Informational queries (“how to …”) often zero-click; optimize for citation in AI Overviews as well as CTR (serp-features).

信息类查询（“how to …”）常出现零点击结果；需同时优化AI概述中的引用率和搜索结果的点击率（serp-features）。

Best Practices Checklist

最佳实践检查清单

One primary H2 (or clear section) for the procedure; wording matches page type (outcome vs quick start vs counted steps)
If the title mentions a step count, it matches <ol>
length and HowTo
```
step
```
items
<ol>
steps with concise, answer-first lines per step
HowTo JSON-LD aligned with visible steps (and
```
totalTime
```
/
```
tool
```
/
```
supply
```
if shown on page)
Not confused with FAQPage for Q&A lists
Tabs/accordions: full content in DOM; first panel visible
Validated with Rich Results Test / Schema.org Validator

为流程设置一个主H2标题（或清晰的区块）；措辞匹配页面类型（成果导向/快速入门/带数字的步骤）
若标题提及步骤数量，需与
```
<ol>
```
列表长度及HowTo的
```
step
```
条目数一致
使用
```
<ol>
```
列表展示步骤，每个步骤包含简洁的先给出答案的内容
HowTo JSON-LD与可见步骤对齐（若页面显示
```
totalTime
```
/
```
tool
```
/
```
supply
```
，需同步包含在Schema中）
未与FAQPage混淆（FAQ为问答列表）
标签页/折叠面板：所有内容在DOM中，默认展开第一个面板
已通过Rich Results Test/Schema.org Validator验证

Output Format

输出格式

Placement of the section within the parent page (after intro, mid-body, before FAQ, etc.)
Outline: H2 structure, ordered list, optional sub-steps
Section title rationale: Why this H2 pattern (outcome vs quick start vs “In N steps”) fits the parent page and query
Copy notes: answer-first per step; length targets
HowTo JSON-LD outline (required properties for your case)
UI note (tabs vs inline list) and crawlability requirements
Differentiation from FAQ on the same page if both exist
Explicit: This output is a section block, not a full page wireframe—defer page chrome to article-page-generator / docs-page-generator / tools-page-generator as appropriate

区块在父页面中的布局位置（引言之后、正文中部、FAQ之前等）
大纲：H2结构、有序列表、可选子步骤
区块标题说明：说明选择该H2模式（成果导向/快速入门/“In N steps”）的原因，匹配父页面类型与用户查询
内容说明：每个步骤先给出答案；字数目标
HowTo JSON-LD大纲（符合场景的必填属性）
UI说明（标签页 vs 内联列表）及可爬取性要求
与同页面FAQ的区分（若同时存在）
明确说明：本输出为区块内容，而非完整页面线框图——页面框架请根据情况委托给article-page-generator/docs-page-generator/tools-page-generator

Related Skills

References

参考资料

Schema.org: HowTo
Understanding 2.4.6 Headings and Labels (WCAG 2.2) (descriptive headings)
Google: Structured data intro (verify current supported types in Search Gallery)
Featured snippets overview (content structure)

Schema.org: HowTo
Understanding 2.4.6 Headings and Labels (WCAG 2.2)（描述性标题）
Google: Structured data intro（请在搜索结果库中确认当前支持的类型）
Featured snippets overview（内容结构）",