SEO元标签（title/meta/robots/canonical等）
元标签位于<head>内，向搜索引擎和浏览器提供页面元信息。
Title标签
基本语法
HTML
<title>页面标题 - 网站名称</title>
编写规范
| 要素 | 要求 | 示例 |
|---|---|---|
| 长度 | 50-60字符 | 超出会被截断 |
| 关键词 | 核心词前置 | "HTML教程 - 入门到精通" |
| 分隔符 | 竖线或连字符 | "标题 |
| 唯一性 | 每页不同 | 避免重复标题 |
HTML
<!-- 好的标题 -->
<title>语义化HTML指南 - 前端开发教程</title>
<title>iPhone 15 Pro - Apple官网</title>
<!-- 差的标题 -->
<title>首页</title>
<title>文章详情</title>
<title>这是一个非常长的标题超过了60个字符会被搜索引擎截断显示不完整</title>
Meta Description
基本语法
HTML
<meta name="description" content="页面描述内容，建议150-160字符。">
编写要点
HTML
<meta name="description" content="学习语义化HTML的核心概念和最佳实践，掌握header、nav、main、article等标签的正确用法，提升页面SEO表现。">
| 要素 | 要求 |
|---|---|
| 长度 | 150-160字符 |
| 内容 | 概括页面核心内容 |
| 关键词 | 自然融入，不堆砌 |
| 唯一性 | 每页独立描述 |
注意：description不直接影响排名，但影响搜索结果点击率。
Robots Meta
基本语法
HTML
<meta name="robots" content="index, follow">
指令说明
| 指令 | 含义 | 使用场景 |
|---|---|---|
| index | 允许索引 | 默认值 |
| noindex | 禁止索引 | 感谢页、后台页 |
| follow | 跟踪链接 | 默认值 |
| nofollow | 不跟踪链接 | 用户生成内容 |
| noarchive | 不显示快照 | 内容敏感页面 |
HTML
<!-- 禁止索引和跟踪 -->
<meta name="robots" content="noindex, nofollow">
<!-- 允许索引但不跟踪链接 -->
<meta name="robots" content="index, nofollow">
Canonical标签
基本语法
HTML
<link rel="canonical" href="https://example.com/article/semantic-html">
使用场景
HTML
<!-- 相同内容多URL -->
<link rel="canonical" href="https://example.com/products/shoes">
<!-- 分页内容 -->
<link rel="canonical" href="https://example.com/articles?page=1">
<!-- HTTP与HTTPS -->
<link rel="canonical" href="https://example.com/page">
| 场景 | Canonical指向 |
|---|---|
| 参数URL | 无参数版本 |
| 移动/PC | 主域名版本 |
| 分页 | 当前页（非首页） |
| 打印版 | 标准页面 |
其他重要Meta标签
Viewport
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Charset
HTML
<meta charset="UTF-8">
Open Graph（社交分享）
HTML
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
Twitter Card
HTML
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="页面标题">
<meta name="twitter:description" content="页面描述">
<meta name="twitter:image" content="https://example.com/image.jpg">
完整Head示例
HTML
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化HTML指南 - 前端教程</title>
<meta name="description" content="学习语义化HTML的核心概念和最佳实践，掌握SEO友好的页面结构设计。">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/html/semantic-guide">
<meta property="og:title" content="语义化HTML指南">
<meta property="og:description" content="学习语义化HTML的核心概念">
<meta property="og:image" content="https://example.com/og-image.jpg">
</head>
要点总结
- Title包含核心关键词，长度50-60字符
- Description概括页面内容，长度150-160字符
- Robots控制索引和跟踪行为
- Canonical指定规范URL，避免重复内容
- Open Graph优化社交分享展示
📝 发现内容有误？点击此处直接编辑