HTML 元信息：SEO 基础
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
在这个实验中，你将学习 HTML 元信息，这对 SEO 和社交分享至关重要。
正确设置元数据能帮助搜索引擎理解页面内容，提升在搜索结果中的展示效果。
你将学到：
- 使用
<title>设置页面标题 - 使用
<meta>设置描述和关键词 - 设置 Open Graph 标签优化社交分享
- 设置 viewport 优化移动端显示
Intermediate⏱ 20-25 min
Learning Objectives
- 掌握 head 区域的结构
- 学会设置 SEO 相关 meta 标签
- 理解 Open Graph 协议
- 了解 viewport 设置
Scenario
你正在为一个博客文章页面设置 SEO 元信息。
需要设置：
- 页面标题和描述
- 社交分享卡片信息
- 移动端视口设置
Why Do This
- HTML determines semantics and accessibility — it is the foundation for CSS/JS maintainability.
- Clear structure matters more than visual effects; styling and interaction will both benefit later.
- Semantic tags improve SEO, readability, and team collaboration efficiency.
Hands-on Practice
- Restructure the page using semantic tags.
- Check that heading levels are sequential (h1 -> h2 -> h3).
- Add accessibility attributes to key elements.
Common Mistakes
- Using div for everything without semantic layering.
- Heading levels are chaotic, making the page structure unreadable.
- Forms and media elements missing required attributes.
Deliverable
A semantic page skeleton template (structural sections + heading hierarchy + a11y checklist).
My Progress
Completed Steps0 / 4
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
What was the most important semantic structure change you made?
What accessibility details did you add?
How reusable is this HTML structure?
Tags
HTML5MetaSEOOpen Graph