meta 标签与 SEO

head 里的 meta 标签虽然不显示在页面上,但决定网页在搜索引擎和社交分享中的命运。这一章讲清所有常用 meta、视口、Open Graph,以及如何让你的网页被搜索引擎和社交平台正确收录。

1. head 标签完整示例

先看一个"生产级"head 标签长什么样:

<head>
  <!-- 必写三件套 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题 - 网站名</title>

  <!-- SEO 基础 -->
  <meta name="description" content="一段 50-150 字的页面摘要">
  <meta name="keywords" content="关键词1, 关键词2, 关键词3">
  <meta name="author" content="作者名">
  <link rel="canonical" href="https://example.com/article/">

  <!-- Open Graph:社交分享(微信/Facebook/Twitter) -->
  <meta property="og:title" content="文章标题">
  <meta property="og:description" content="分享卡片上的摘要">
  <meta property="og:image" content="https://example.com/cover.jpg">
  <meta property="og:url" content="https://example.com/article/">
  <meta property="og:type" content="article">

  <!-- Twitter 卡片 -->
  <meta name="twitter:card" content="summary_large_image">

  <!-- 网站图标 -->
  <link rel="icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- 引入 CSS -->
  <link rel="stylesheet" href="/style.css">
</head>

下面逐个讲清楚每一项的作用。

2. charset 字符编码

<meta charset="UTF-8"> 声明字符编码。必须放在 head 第一行(甚至在 title 之前),否则可能因编码识别错误导致乱码。永远用 UTF-8。

3. viewport 视口

viewport 是移动端必备,告诉浏览器"按设备宽度渲染,别按桌面宽度缩小":

<!-- 移动端必备:视口设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 完整属性 -->
<meta name="viewport"
      content="width=device-width,    <!-- 宽度=设备宽度 -->
              initial-scale=1.0,       <!-- 初始缩放比例 -->
              maximum-scale=5.0,       <!-- 最大缩放 -->
              user-scalable=yes">      <!-- 允许用户缩放 -->

<!-- 没写这行会怎样? -->
<!-- 移动端会把页面按 980px 宽渲染,再缩小塞进手机屏,
     字会非常小,用户体验极差。所以必写! -->

没写这行,移动端会把页面按 980px 宽渲染再强行缩小塞进手机屏,字小到看不清——这是新手最容易忘的一项。所有网页必写。

4. title 页面标题

title 是 SEO 中最重要的标签,没有之一:

显示在浏览器标签上。
是搜索结果中最大、最显眼的字。
是社交分享卡片的标题。

写好 title 的原则:

长度 30 ~ 60 字(中文),太长会被截断。
包含核心关键词,放在前 30 字效果最好。
每个页面 title 唯一,不要全站用一个。
写品牌名:通常是"页面主题 - 网站名"。

5. description 描述

meta description 是搜索结果中标题下方的摘要:

<head>
  <!-- 必写三件套 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题 - 网站名</title>

  <!-- SEO 基础 -->
  <meta name="description" content="一段 50-150 字的页面摘要">
  <meta name="keywords" content="关键词1, 关键词2, 关键词3">
  <meta name="author" content="作者名">
  <link rel="canonical" href="https://example.com/article/">

  <!-- Open Graph:社交分享(微信/Facebook/Twitter) -->
  <meta property="og:title" content="文章标题">
  <meta property="og:description" content="分享卡片上的摘要">
  <meta property="og:image" content="https://example.com/cover.jpg">
  <meta property="og:url" content="https://example.com/article/">
  <meta property="og:type" content="article">

  <!-- Twitter 卡片 -->
  <meta name="twitter:card" content="summary_large_image">

  <!-- 网站图标 -->
  <link rel="icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- 引入 CSS -->
  <link rel="stylesheet" href="/style.css">
</head>

原则:

长度 50 ~ 150 字,太短浪费,太长被截断。
自然语言,不要堆关键词。
引导点击:写出"为什么用户该点你的链接"。
每个页面唯一,通用描述没意义。

注意:搜索引擎可能不采用你的 description,会根据搜索词自动从页面内容里抓取片段——但仍然强烈建议写。

6. keywords 关键词(已弱化)

早年 SEO 流行堆 keywords,现在 Google 早就不看这个标签了(因为被滥用太严重)。百度可能还略看一眼。写了不亏,但别花太多精力,更不要堆砌。1 ~ 5 个核心词足够。

7. canonical 权威链接

同一篇文章常常有多个 URL 能访问(带各种参数、移动版、www 与非 www),搜索引擎会以为是重复内容从而降权。canonical 告诉它"权威版本是这个":

<!-- canonical:声明"权威版本",避免重复内容惩罚 -->
<link rel="canonical" href="https://example.com/article/123">

<!-- 场景:同一篇文章有多个 URL 都能访问
     https://example.com/article/123
     https://example.com/article/123?utm_source=wechat
     https://www.example.com/article/123
     搜索引擎会以为是 3 篇重复内容,降权处理。
     在所有这些页面的 head 里都写同一个 canonical URL,
     告诉搜索引擎"权威版本是这个",避免重复内容惩罚。 -->

这是 SEO 中常被忽略但很重要的一项。每个页面都要写自己的 canonical URL。

8. Open Graph 社交分享

当你在微信、QQ、Facebook 分享链接时,会看到一张"卡片"——标题、描述、配图。这些就靠 Open Graph 标签控制:

<!-- Open Graph:Facebook 发明的,微信/QQ/微博等也普遍支持 -->
<meta property="og:title" content="如何 30 分钟入门 HTML">
<meta property="og:description" content="零基础也能学的 HTML 入门教程">
<meta property="og:image" content="https://example.com/cover.jpg">
<!-- 图片建议 1200x630 像素,小于 8MB -->
<meta property="og:url" content="https://example.com/html-intro">
<meta property="og:type" content="article">
<!-- type 还可以是 website/video/music/website 等 -->
<meta property="og:site_name" content="我的网站">
<meta property="og:locale" content="zh_CN">

<!-- Twitter 卡片(国外) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="如何 30 分钟入门 HTML">
<meta name="twitter:image" content="https://example.com/cover.jpg">

关键属性:

og:title:卡片标题。
og:description:卡片摘要。
og:image:卡片配图。建议 1200x630 像素,小于 8MB,绝对 URL。
og:url:权威 URL。
og:type:内容类型(article/website/video)。
og:site_name:网站名。

没写这些,分享时只会显示一个干瘪的标题或 URL,点击率大打折扣。

9. 网站图标 favicon

浏览器标签上的小图标:

<head>
  <!-- 必写三件套 -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题 - 网站名</title>

  <!-- SEO 基础 -->
  <meta name="description" content="一段 50-150 字的页面摘要">
  <meta name="keywords" content="关键词1, 关键词2, 关键词3">
  <meta name="author" content="作者名">
  <link rel="canonical" href="https://example.com/article/">

  <!-- Open Graph:社交分享(微信/Facebook/Twitter) -->
  <meta property="og:title" content="文章标题">
  <meta property="og:description" content="分享卡片上的摘要">
  <meta property="og:image" content="https://example.com/cover.jpg">
  <meta property="og:url" content="https://example.com/article/">
  <meta property="og:type" content="article">

  <!-- Twitter 卡片 -->
  <meta name="twitter:card" content="summary_large_image">

  <!-- 网站图标 -->
  <link rel="icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- 引入 CSS -->
  <link rel="stylesheet" href="/style.css">
</head>

favicon.ico:传统图标,16x16 或 32x32。
apple-touch-icon.png:iOS 添加到主屏幕时用的图标,180x180。
现代浏览器还支持 PNG/SVG 格式的 favicon。

10. 其他常用 meta

meta http-equiv="refresh" content="5;url=/":5 秒后跳转到首页(慎用,影响体验)。
meta name="robots" content="noindex":告诉搜索引擎不要索引本页(后台、隐私页用)。
meta name="theme-color" content="#4f8cff":浏览器地址栏背景色(移动端)。
meta http-equiv="Content-Security-Policy":CSP 安全策略。
meta name="format-detection" content="telephone=no":禁止 iOS 自动识别电话号。

11. 结构化数据 JSON-LD

结构化数据是用 JSON 告诉搜索引擎"这是一篇文章""这是一款产品""这是一个 FAQ",可以争取富摘要(在搜索结果中显示评分、价格、面包屑等)。用 script 配合特定类型写:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "如何 30 分钟入门 HTML",
  "author": {
    "@type": "Person",
    "name": "张三"
  },
  "datePublished": "2026-08-01",
  "image": "https://example.com/cover.jpg",
  "publisher": {
    "@type": "Organization",
    "name": "我的网站"
  }
}
</script>
<!-- 放在 head 或 body 内均可,搜索引擎会识别 -->

schema.org 上有完整的类型定义。常见类型:Article、Product、Recipe、FAQPage、BreadcrumbList。Google Search Console 有"富结果测试工具"可以验证。

12. SEO 核心实战建议

内容为王:再好的 SEO 技巧,也比不上真正有价值的内容。原创、深度、定期更新。
关键词研究:用百度指数、Google Trends 找用户搜什么词,围绕这些词做内容。
合理的标题层级:每个页面一个 h1,按层次用 h2/h3。
URL 友好:用语义化的英文 slug(如 /coding/html/intro/),不要用 ?id=123。
页面速度快:压缩图片、用 CDN、少加载第三方脚本。Google 把速度作为排名因素。
移动友好:必须响应式,Google 是移动优先索引。
外链建设:让别的网站链接到你,这是排名最重要的外部信号。
用 Search Console:提交 sitemap、查看索引情况、监控关键词排名。

13. 不要做的事(黑帽 SEO)

不要堆关键词:keywords 标签里塞几十个词,description 重复关键词——会被惩罚。
不要隐藏文字:背景色写字、字号 0、绝对定位到屏幕外——被搜索引擎识别直接封站。
不要买链接:用外链买卖提升排名,被发现就是降权甚至 K 站。
不要复制内容:抄袭别人内容,搜索引擎会判定重复内容降权。

SEO 是长期工程,踏踏实实做内容和体验,排名自然会上来。

14. SEO 检查清单

每个页面有唯一的 title、description、canonical。
每个页面一个 h1,标题层级合理。
所有图片有 alt 文字。
viewport 写好。
Open Graph 写好(用于社交分享)。
有 sitemap.xml 并提交到 Search Console。
有 robots.txt 控制爬虫。
使用 HTTPS。
页面速度快(Core Web Vitals 达标)。
移动端体验好。

小结

这一章你掌握了 head 里所有重要的 meta 标签:charset、viewport、title、description、canonical、Open Graph,以及 SEO 的核心原则。记住:SEO 不是技巧,是认真做内容 + 用对标签。到这里 HTML 系列就完整讲完了,你已经能写出结构清晰、SEO 友好、体验良好的网页。

← 上一篇音视频与嵌入

返回 HTML 教程目录

✈️💬