PHP小码农

Appearance

meta 描述与关键词 ​

<meta name="description"> 用于提供页面的文字描述，是搜索引擎结果中展示的摘要文本的重要来源。<meta name="keywords"> 曾用于声明页面关键词，但如今其 SEO 价值已大幅下降。

前置知识

阅读本节前，建议先了解：meta 视口设置

基础概念 ​

meta description 的作用 ​

<meta name="description"> 为搜索引擎和社交媒体提供页面的简要描述。它不直接影响搜索排名，但通过影响搜索结果的点击率（CTR）间接影响 SEO 效果。

html
<head>
  <meta name="description" content="本教程详细讲解 HTML5 文档结构，包括 DOCTYPE、head、body 等核心元素的用法。">
</head>

搜索引擎结果中，description 通常显示在标题下方作为摘要：

HTML5 文档结构详解 - 前端学习指南
https://example.com/html/structure
本教程详细讲解 HTML5 文档结构，包括 DOCTYPE、head、body 等核心元素的用法。

meta keywords 的历史与现状 ​

<meta name="keywords"> 在早期搜索引擎时代是 SEO 的核心手段，但后来被大量滥用（关键词堆砌），导致主流搜索引擎已不再将其作为排名因素。

html
<!-- 过去的重要 SEO 手段，现在已基本无效 -->
<meta name="keywords" content="HTML, HTML5, 教程, 前端, Web开发">
搜索引擎是否使用 keywords说明
Google否2009 年宣布不再使用
百度作用极小可能作为参考，但权重极低
Bing基本不用官方明确表示不作为排名信号
Yahoo否使用 Bing 搜索技术

语法 ​

meta description 语法 ​

html
<meta name="description" content="页面的简要描述文本">

meta keywords 语法 ​

html
<meta name="keywords" content="关键词1, 关键词2, 关键词3">

详细说明 ​

meta description 详解 ​

长度建议 ​

平台推荐长度最大显示长度超出处理
Google 桌面150~160 字符~920px 宽度截断并显示"..."
Google 移动~120 字符~680px 宽度截断并显示"..."
百度70~80 中文字78 个中文字截断并显示"..."
html
<!-- 推荐：简洁有力的描述 -->
<meta name="description" content="学习 HTML5 文档结构的完整教程，涵盖 DOCTYPE、head、body、meta 等核心知识。">

<!-- 不推荐：太短，信息量不足 -->
<meta name="description" content="HTML教程">

<!-- 不推荐：太长，会被截断 -->
<meta name="description" content="这是一个非常详细的HTML5教程，涵盖了HTML5的所有知识点，包括文档结构、文本排版、列表、表格、表单、多媒体、Canvas绘图、Web存储、地理位置API等等，适合从零开始学习的前端开发者。">

description 编写原则 ​

  1. 准确描述页面内容：不要夸大或误导
  2. 包含核心关键词：自然地融入 1~2 个目标关键词
  3. 有吸引力：写出让用户想点击的文字
  4. 每个页面独特：避免所有页面使用相同描述
  5. 行动导向：可以包含"学习"、"了解"、"获取"等动词

搜索引擎可能不使用 description 的情况 ​

即使设置了 description，搜索引擎也可能选择不使用它，而是从页面内容中自动提取摘要。这种情况发生在：

  • description 与页面内容不相关
  • description 是关键词堆砌
  • description 过短或过长
  • 用户搜索的关键词在页面其他地方有更好的匹配片段

meta keywords 详解 ​

为什么 keywords 已过时 ​

  1. 被严重滥用：早期 SEO 从业者在 keywords 中堆砌大量不相关的热门关键词
  2. 搜索引擎更智能：现代搜索引擎通过分析页面内容本身来判断主题
  3. 零排名权重：Google 官方明确声明 keywords 不是排名因素
html
<!-- 过去的典型滥用（堆砌关键词） -->
<!-- 不推荐！ -->
<meta name="keywords" content="HTML, HTML5, HTML教程, HTML学习, HTML入门, HTML基础, HTML视频, HTML下载, HTML手册, HTML参考, HTML标签, HTML属性">

<!-- 现在的合理使用（仅作为内部参考） -->
<meta name="keywords" content="HTML, 文档结构, meta标签">

keywords 的残留价值 ​

虽然 keywords 对 SEO 基本无效，但仍有一些参考价值：

  • 内部搜索系统：网站内部的站内搜索可能使用 keywords
  • 内容管理：帮助内容管理系统分类和标记页面
  • 竞争对手分析：可以查看竞争对手使用了哪些关键词（虽然他们可能也是随便写的）

OG 标签预告 ​

Open Graph（OG）标签是 Facebook 提出的元数据协议，用于控制页面在社交媒体分享时的展示方式。og:description 是 OG 标签的重要组成部分：

html
<!-- OG 标签用于社交媒体分享 -->
<meta property="og:title" content="文章标题">
<meta property="og:description" content="用于社交媒体分享的描述，可以比 meta description 更长。">
<meta property="og:image" content="https://example.com/share-image.jpg">
<meta property="og:url" content="https://example.com/article">
<meta property="og:type" content="article">
<meta property="og:site_name" content="网站名称">

<!-- Twitter Card 标签 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="文章标题">
<meta name="twitter:description" content="Twitter 分享描述">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">

OG 标签和 Twitter Card 将在后续章节中详细讲解。

实战示例 ​

不同页面的 description 写法 ​

html
<!DOCTYPE html>
<!-- 首页 -->
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端学习指南 - 从零开始学 Web 开发</title>
  <meta name="description" content="前端学习指南提供 HTML、CSS、JavaScript 等前端技术的系统教程，从基础到进阶，助你成为合格的前端开发者。">
  <meta name="keywords" content="前端, HTML, CSS, JavaScript, 教程">
</head>
<body>
  <h1>前端学习指南</h1>
</body>
</html>
html
<!-- 文章页 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Flexbox 完全指南 - 前端学习指南</title>
  <meta name="description" content="深入浅出地讲解 CSS Flexbox 布局，涵盖 flex 容器属性、flex 项目属性、常见布局模式和实战案例。">
  <meta name="keywords" content="CSS, Flexbox, 弹性盒子, 布局">
</head>
<body>
  <article>
    <h1>CSS Flexbox 完全指南</h1>
    <p>文章内容...</p>
  </article>
</body>
</html>
html
<!-- 产品页 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MacBook Pro 16 英寸 - 苹果官网</title>
  <meta name="description" content="全新 MacBook Pro 16 英寸，搭载 M3 芯片，拥有卓越性能与超长续航。在线购买享受免费送货。">
  <meta name="keywords" content="MacBook Pro, 苹果, 笔记本电脑, M3芯片">
</head>
<body>
  <h1>MacBook Pro 16 英寸</h1>
</body>
</html>

使用 JavaScript 读取和修改 description ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="原始描述文本。">
  <title>操作 meta description</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 600px;
      margin: 40px auto;
      padding: 0 20px;
      line-height: 1.6;
    }
    .info-box {
      background: #f5f5f5;
      padding: 15px;
      border-radius: 4px;
      margin: 15px 0;
      font-family: monospace;
      word-break: break-all;
    }
    textarea {
      width: 100%;
      height: 80px;
      padding: 10px;
      font-size: 14px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
      resize: vertical;
    }
    button {
      padding: 8px 16px;
      margin: 5px 5px 5px 0;
      cursor: pointer;
      background: #0066cc;
      color: white;
      border: none;
      border-radius: 4px;
    }
    .char-count {
      color: #666;
      font-size: 14px;
    }
    .char-count.over { color: red; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Meta Description 编辑器</h1>

  <p>当前 description：</p>
  <div class="info-box" id="current-desc">-</div>
  <p class="char-count" id="char-count">字符数: 0</p>

  <label for="new-desc">修改 description：</label>
  <textarea id="new-desc" placeholder="输入新的 description..." maxlength="300"></textarea>
  <br>
  <button id="update-btn">更新</button>
  <button id="reset-btn">重置</button>

  <script>
    var descEl = document.querySelector('meta[name="description"]');
    var currentDescEl = document.getElementById('current-desc');
    var charCountEl = document.getElementById('char-count');
    var newDescInput = document.getElementById('new-desc');

    function showInfo() {
      var desc = descEl ? descEl.getAttribute('content') : '未设置';
      currentDescEl.textContent = desc;
      var len = desc.length;
      charCountEl.textContent = '字符数: ' + len;
      charCountEl.classList.toggle('over', len > 160);
    }
    showInfo();

    // 实时统计字符数
    newDescInput.addEventListener('input', function() {
      var len = newDescInput.value.length;
      charCountEl.textContent = '字符数: ' + len + '（推荐 150~160 字符）';
      charCountEl.classList.toggle('over', len > 160);
    });

    // 更新 description
    document.getElementById('update-btn').addEventListener('click', function() {
      var newDesc = newDescInput.value.trim();
      if (newDesc) {
        if (descEl) {
          descEl.setAttribute('content', newDesc);
        } else {
          descEl = document.createElement('meta');
          descEl.name = 'description';
          descEl.content = newDesc;
          document.head.appendChild(descEl);
        }
        showInfo();
      }
    });

    // 重置
    document.getElementById('reset-btn').addEventListener('click', function() {
      descEl.setAttribute('content', '原始描述文本。');
      newDescInput.value = '';
      showInfo();
    });
  </script>
</body>
</html>

注意事项 ​

1. description 不要与页面内容不符 ​

html
<!-- 错误！描述与内容不匹配 -->
<meta name="description" content="购买最新款 iPhone，享受优惠价格！">
<!-- 但页面实际是一个 HTML 教程 -->

搜索引擎会降低描述不相关的页面的排名。

2. 不要在 description 中堆砌关键词 ​

html
<!-- 不推荐！关键词堆砌 -->
<meta name="description" content="HTML教程 CSS教程 JavaScript教程 前端教程 Web开发教程 编程教程 零基础入门">

<!-- 推荐：自然、准确的描述 -->
<meta name="description" content="系统化的前端开发教程，涵盖 HTML、CSS、JavaScript 三大核心技术，适合零基础学习者。">

3. 不要直接复制页面第一段作为 description ​

虽然搜索引擎可能自动提取页面内容作为摘要，但手动编写的 description 通常效果更好，因为可以更精炼、更有吸引力。

4. keywords 中的词不要太多 ​

html
<!-- 不推荐！关键词过多 -->
<meta name="keywords" content="a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p">

<!-- 合理：3~5 个核心关键词 -->
<meta name="keywords" content="HTML, 文档结构, meta标签, 教程">

最佳实践 ​

1. 为每个页面编写独特的 description ​

html
<!-- 首页 -->
<meta name="description" content="前端学习指南 - 系统化的 Web 开发教程平台">

<!-- 文章页 -->
<meta name="description" content="CSS Grid 布局完全指南，从基础概念到实战案例。">

<!-- 关于页 -->
<meta name="description" content="了解前端学习指南的团队、使命和联系方式。">

2. 控制 description 长度在 150~160 字符 ​

中文 description 建议在 70~80 个中文字左右。

3. description 中包含行动号召 ​

html
<!-- 推荐：包含行动号召 -->
<meta name="description" content="立即学习 HTML5 文档结构，掌握现代 Web 开发的基础技能。免费教程，从零开始。">

4. 同时设置 OG 描述 ​

html
<!-- 搜索引擎用 description -->
<meta name="description" content="HTML5 教程的简要描述（150字以内）。">

<!-- 社交媒体用 og:description -->
<meta property="og:description" content="HTML5 教程用于社交媒体分享的描述（可以更长更详细）。">

5. keywords 作为内部参考，不指望 SEO ​

html
<!-- 仅用于内部管理和参考，不作为 SEO 手段 -->
<meta name="keywords" content="HTML, 文档结构, meta, title">

下一节

继续学习：meta 其他属性

参考链接 ​