第17篇：元数据与 SEO 基础
第17篇：元数据与 SEO 基础
网页内容再精彩，如果搜索引擎找不到、看不懂，就等于白写。本篇学习
<head>中的各类元数据标签，让你的网页在搜索结果中脱颖而出。
学习目标
- 掌握
<meta>标签的各类用法（字符编码、视口、描述、关键词等） - 理解 Open Graph（OG）标签的作用和写法
- 学会设置 favicon、主题色等浏览器元数据
- 了解语义化 HTML 与 SEO 的关系
- 能够编写一个 SEO 友好的
<head>区块
核心知识点
一、<head>标签的作用
<head>是 HTML 文档的"大脑"，存放不直接显示在页面上但对浏览器、搜索引擎至关重要的信息。
<!DOCTYPEhtml><htmllang="zh-CN"><head><!-- 这里放元数据 --><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>页面标题</title><metaname="description"content="页面描述"><linkrel="stylesheet"href="style.css"></head><body><!-- 这里放可见内容 --></body></html>二、必备<meta>标签
1. 字符编码：charset
<metacharset="UTF-8">- 必须是
<head>的第一个子元素（或至少在<title>之前） - UTF-8 支持全世界所有语言字符
- 不写或位置错误会导致中文乱码
2. 视口设置：viewport
<metaname="viewport"content="width=device-width, initial-scale=1.0">| 值 | 含义 |
|---|---|
width=device-width | 视口宽度 = 设备屏幕宽度 |
initial-scale=1.0 | 初始缩放比例 = 1（不缩放） |
maximum-scale=1.0 | 最大缩放比例（可选，不推荐设置，影响可访问性） |
user-scalable=no | 禁止用户缩放（❌ 不推荐，影响视障用户） |
3. 页面描述：description
<metaname="description"content="本文介绍 HTML 元数据标签的使用方法，包括 meta、Open Graph、favicon 等，帮助你的网站在搜索引擎中获得更好的展示效果。">- 搜索引擎结果页（SERP）中显示在标题下方的文字
- 建议长度：150-160 个字符
- 每个页面应该有独特的描述
搜索结果展示： ┌────────────────────────────────────────┐ │ 页面标题 - 网站名 │ ← <title> │ 本文介绍 HTML 元数据标签的使用方法... │ ← meta description │ example.com > html > meta │ └────────────────────────────────────────┘4. 关键词：keywords
<metaname="keywords"content="HTML, meta标签, SEO, 网站优化">⚠️注意：Google 官方已声明不使用keywords meta 标签进行排名。但部分国内搜索引擎（如百度）可能仍会参考。建议写上，但不要过度优化。
5. 作者信息
<metaname="author"content="张三"><metaname="generator"content="VS Code">6. 禁止搜索引擎索引
<!-- 不让搜索引擎索引此页面 --><metaname="robots"content="noindex"><!-- 不让搜索引擎跟踪页面上的链接 --><metaname="robots"content="nofollow"><!-- 两者都禁止 --><metaname="robots"content="noindex, nofollow">| 值 | 含义 |
|---|---|
index/noindex | 允许/禁止索引 |
follow/nofollow | 允许/禁止跟踪链接 |
noarchive | 不缓存快照 |
三、Open Graph（OG）标签
Open Graph 是 Facebook 提出的协议，让你的网页在社交分享时展示更丰富的信息。现在已被 Twitter、微信、LinkedIn 等平台广泛支持。
<!-- Open Graph 基本标签 --><metaproperty="og:title"content="HTML 元数据与 SEO 基础"><metaproperty="og:description"content="学习 meta 标签、Open Graph 和 favicon，让网页在搜索和社交中脱颖而出"><metaproperty="og:type"content="article"><metaproperty="og:url"content="https://example.com/html-meta-seo"><metaproperty="og:image"content="https://example.com/images/og-cover.jpg"><metaproperty="og:site_name"content="前端技术博客"><!-- 可选：文章专用 --><metaproperty="article:author"content="张三"><metaproperty="article:published_time"content="2024-06-01T10:00:00+08:00">OG 标签效果
分享到微信/微博时： ┌─────────────────────────────┐ │ │ │ [封面图片] │ ← og:image │ │ │ HTML 元数据与 SEO 基础 │ ← og:title │ │ │ 学习 meta 标签、Open Graph... │ ← og:description │ │ │ 前端技术博客 │ ← og:site_name └─────────────────────────────┘常用 OG 类型
og:type | 用途 |
|---|---|
website | 网站首页 |
article | 文章/博客 |
product | 产品页面 |
profile | 个人主页 |
Twitter Card 标签
Twitter 有自己的分享卡片格式：
<metaname="twitter:card"content="summary_large_image"><metaname="twitter:title"content="HTML 元数据与 SEO 基础"><metaname="twitter:description"content="学习 meta 标签..."><metaname="twitter:image"content="https://example.com/images/twitter-card.jpg">twitter:card | 效果 |
|---|---|
summary | 小图 + 标题 + 描述 |
summary_large_image | 大图 + 标题 + 描述 |
app | 应用下载卡片 |
四、页面图标：favicon
favicon 是显示在浏览器标签页、书签栏和收藏夹中的小图标。
<!-- 标准 favicon --><linkrel="icon"type="image/x-icon"href="/favicon.ico"><!-- PNG 格式（推荐，支持透明）--><linkrel="icon"type="image/png"sizes="32x32"href="/favicon-32x32.png"><linkrel="icon"type="image/png"sizes="16x16"href="/favicon-16x16.png"><!-- Apple Touch Icon（iOS 设备添加到主屏幕时显示）--><linkrel="apple-touch-icon"sizes="180x180"href="/apple-touch-icon.png">推荐的 favicon 尺寸
| 尺寸 | 用途 |
|---|---|
| 16×16 | 浏览器标签页、收藏夹 |
| 32×32 | 任务栏、书签 |
| 180×180 | Apple Touch Icon |
| 192×192 | Android 主屏幕图标 |
| 512×512 | PWA 应用图标 |
💡工具推荐：使用 favicon.io 或 RealFaviconGenerator 一键生成全套 favicon。
五、浏览器主题色
<!-- Chrome、Firefox、Edge 等浏览器的地址栏/标题栏主题色 --><metaname="theme-color"content="#1976d2"><!-- Safari 标签页颜色（iOS 15+）--><metaname="apple-mobile-web-app-status-bar-style"content="black-translucent">效果展示
Chrome 浏览器： ┌─────────────────────────────────────┐ │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │ ← 地址栏显示 theme-color │ 🔒 example.com/html-meta-seo │ ├─────────────────────────────────────┤ │ │ │ 页面内容... │ │ │ └─────────────────────────────────────┘六、完整<head>模板
<head><!-- 字符编码：必须放最前面 --><metacharset="UTF-8"><!-- 视口设置 --><metaname="viewport"content="width=device-width, initial-scale=1.0"><!-- 页面标题（50-60 字符最佳）--><title>HTML 元数据与 SEO 基础 | 前端技术博客</title><!-- SEO 元数据 --><metaname="description"content="本文介绍 HTML 元数据标签的使用方法，包括 meta、Open Graph、favicon 等，帮助你的网站在搜索引擎中获得更好的展示效果。"><metaname="keywords"content="HTML, meta标签, SEO, Open Graph, favicon"><metaname="author"content="张三"><!-- Open Graph（社交分享）--><metaproperty="og:title"content="HTML 元数据与 SEO 基础"><metaproperty="og:description"content="学习 meta 标签、Open Graph 和 favicon..."><metaproperty="og:type"content="article"><metaproperty="og:url"content="https://example.com/html-meta-seo"><metaproperty="og:image"content="https://example.com/images/og-cover.jpg"><metaproperty="og:site_name"content="前端技术博客"><!-- Twitter Card --><metaname="twitter:card"content="summary_large_image"><metaname="twitter:title"content="HTML 元数据与 SEO 基础"><metaname="twitter:description"content="学习 meta 标签..."><metaname="twitter:image"content="https://example.com/images/twitter-card.jpg"><!-- Favicon --><linkrel="icon"type="image/png"sizes="32x32"href="/favicon-32x32.png"><linkrel="apple-touch-icon"sizes="180x180"href="/apple-touch-icon.png"><!-- 主题色 --><metaname="theme-color"content="#1976d2"><!-- CSS 样式表 --><linkrel="stylesheet"href="style.css"><!-- Canonical URL（防止重复内容）--><linkrel="canonical"href="https://example.com/html-meta-seo"></head>七、语义化与 SEO 的关系
| 语义化实践 | SEO 收益 |
|---|---|
正确使用h1-h6 | 搜索引擎理解内容层级和主题 |
使用article+time | 内容被识别为时效性文章 |
使用nav | 帮助发现网站的重要页面 |
使用main | 区分主要内容与广告/侧边栏 |
使用alt文本 | 图片搜索可以索引到 |
使用a+rel | 链接关系被正确理解 |
| 使用语义化表格 | 表格数据可能被用于 Featured Snippet |
动手练习
练习 1：编写完整 head 区块
为一个博客文章页面编写完整的<head>：
- 正确的字符编码和视口设置
- 长度合适的
<title>（包含文章名 + 网站名） - 150-160 字符的 description
- 完整的 Open Graph 标签
- Twitter Card 标签
- favicon 链接
- theme-color
练习 2：OG 标签验证
完成以下步骤：
- 为你当前的网页添加 Open Graph 标签
- 访问 Facebook Sharing Debugger（需翻墙）或 Open Graph Check
- 输入你的页面 URL，查看 OG 标签是否被正确解析
- 如果没有条件，可以使用微信发送链接给自己，观察卡片效果
练习 3：SEO 审计
选择你之前写的某个 HTML 页面，进行 SEO 自检：
- 是否有唯一的
<title>？ - 是否有
<meta name="description">？ h1是否只有一个？- 图片是否都有
alt？ - 链接是否都有意义（不是"点击这里"）？
- 是否使用了语义化标签？
常见误区 ⚠️
| 误区 | 真相 |
|---|---|
| “keywords 对 SEO 很重要” | Google不参考keywords，百度可能参考但权重很低 |
| “meta description 影响排名” | description不影响排名，但影响点击率（CTR） |
| “OG 标签只对 Facebook 有效” | 微信、微博、Twitter、LinkedIn 等都支持 OG |
| “favicon 可有可无” | 没有 favicon 的网站在标签页和书签中显得不专业 |
| “theme-color 只是装饰” | 它影响用户在浏览器中的品牌感知 |
| “一个 description 可以全站通用” | ❌ 每个页面应该有独特的 description |
| “title 越长越好” | Google 通常只显示 50-60 个字符，超出部分会被截断 |
| “robots noindex 可以保护隐私” | 只能防君子，不能防恶意爬虫 |
速查卡片 📋
<head>必备标签
<metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>页面标题 | 网站名</title><metaname="description"content="150-160字的页面描述"><linkrel="icon"href="/favicon.ico">Open Graph 核心标签
<metaproperty="og:title"content="标题"><metaproperty="og:description"content="描述"><metaproperty="og:type"content="article"><metaproperty="og:url"content="页面URL"><metaproperty="og:image"content="封面图URL"><head>标签顺序建议
1. charset 2. viewport 3. title 4. description / keywords / author 5. OG 标签 6. Twitter Card 7. favicon 8. theme-color 9. CSS 链接 10. canonicalSEO 基础 checklist
<title>唯一且包含关键词（50-60 字符）<meta description>独特且吸引人（150-160 字符）- 一个页面只有一个
h1 - 标题层级不跳跃
- 所有图片有
alt - 使用语义化标签
- OG 标签完整
- favicon 已设置
- 移动端 viewport 已配置
扩展阅读
- MDN: 中的元数据
- MDN: 元素
- Open Graph 协议（英文）
- Twitter Card 文档（英文）
- Google SEO 入门指南（英文）
📌下一步：网页不仅要被搜索引擎找到，还要能嵌入各种外部内容。进入 第18篇：嵌入外部内容，学习 iframe 的安全使用和第三方内容嵌入。