知识库 / 阶段 1 · SEO 基础概念 / 搜索引擎优化（SEO） ↗ / 第 070 节

🧭 TDK 的配置位置

🧭 一、TDK 的配置位置#

TDK 都写在网页的 <head> 区域，是 HTML 元数据的一部分。
搜索引擎在抓取网页时，会首先读取这些内容来判断页面主题与展示内容。

一个标准页面的 TDK 格式如下：

<head>

<title>SEO优化教程 - 零基础入门指南</title>

<meta name="description" content="全面讲解SEO优化基础知识、关键词研究、站内外优化与数据分析，助你快速入门白帽SEO。">

<meta name="keywords" content="SEO优化,白帽SEO,网站优化,关键词研究">

</head>

📌 文件路径：

  • 对静态网站：每个 HTML 文件单独配置；

  • 对动态网站或 CMS 系统（如 WordPress、Shopify、Discuz）：通常在后台模板或SEO插件中设置模板变量。

⚙️ 二、不同环境下的配置方法#

1️⃣ 静态 HTML 页面#

手动编辑每个 HTML 文件的 <head> 部分：

<title>公司介绍 - 某某科技有限公司</title>

<meta name="description" content="某某科技是一家专注AI研发的高新企业，提供智能算法与数据分析服务。">

<meta name="keywords" content="AI公司,数据分析,智能算法">

👉 适合企业官网、小型静态站点。

2️⃣ CMS 内容管理系统#

使用系统自带或插件方式批量配置。

✅ WordPress#

  • 使用 Yoast SEO 或 Rank Math 插件；

  • 在后台编辑文章时自动显示 TDK 输入框；

支持模板变量：

Title 模板：%%title%% - %%sitename%%

Description 模板：%%excerpt%% 或 %%category%%

  • 可针对首页、分类页、文章页分别配置。

✅ Shopify / Wix / Notion 等建站系统#

  • 后台 → “SEO 设置” 或 “页面设置”；

  • 每个页面都有 Title 与 Description 输入框；

  • Keywords 通常可省略。

✅ Discuz / DedeCMS / ZBlog 等国内系统#

通常在模板文件（如 header.htm 或 head.html）中设置：

<title>{dede:field name='title'/}</title>

<meta name="description" content="{dede:field name='description'/}">

<meta name="keywords" content="{dede:field name='keywords'/}">

  • 通过数据库字段或模板变量自动生成。

3️⃣ 框架项目（前端动态网站）#

如 React / Vue / Next.js 等SPA项目，可用以下方案：

使用 react-helmet 或 next/head 动态设置：

import Head from 'next/head'

export default function Page() {

return (

<Head>

  <title>SEO优化教程 - 入门指南</title>

  <meta name="description" content="这是关于SEO基础优化的详细教程。"/>

  <meta name="keywords" content="SEO,白帽SEO,网站优化"/>

</Head>

)

}

Vue 可使用 vue-meta 或 Nuxt.js 自带 head 配置：

export default {

head() {

return {

  title: 'SEO优化教程',

  meta: [

    { name: 'description', content: 'SEO优化基础入门课程' },

    { name: 'keywords', content: 'SEO,优化,搜索引擎' }

  ]

}

}

}

4️⃣ 大型网站（自动化配置）#

对于有大量文章或产品页面的网站，通常会：

  • 在数据库中设置 title、desc、keywords 字段；

  • 使用模板变量自动生成；

  • 可根据规则批量定义模板：

📄 示例规则表：

页面类型 Title 模板 Description 模板
产品页 {{产品名称}} - {{品牌名称}} 了解{{产品名称}}规格、价格及应用场景。
分类页 {{分类名称}} - {{网站名}} 浏览{{分类名称}}下的最新产品与技术内容。

这样即使有上千个页面，也能自动生成唯一的 TDK。

🧩 三、TDK 优化配置要点#

要素 建议配置规则
Title 含主要关键词，≤60字符；每页唯一；首页可加品牌名。
Description 120~160字符，简洁、有关键词、有吸引力。
Keywords 2~5个相关关键词，避免堆砌。
动态生成 使用模板变量（如标题、分类、摘要）自动填充。
多语言网站 按语言分别设置 TDK，并用 hreflang 标记。
更新维护 定期检查重复、过长、空白的 TDK。

📊 四、TDK 配置效果验证#

  1. ✅ 查看源代码（浏览器右键 → 查看网页源代码）；

  2. ✅ 使用 SEO 工具检测：

    • Screaming Frog（批量抓取网页TDK）

    • Ahrefs / SEMrush（关键词标题检测）

    • Google Search Console → “HTML改进”；

  3. ✅ 检查是否重复或缺失：

    • Title重复、Description缺失、关键词堆砌；

    • 每个页面应有唯一TDK。

✅ 五、总结一句话#

TDK配置 = SEO的基础信号 + 点击率核心文案。
 Title 让搜索引擎“懂你是谁”，
Description 让用户“想点进来”，
Keywords 帮助算法“理解主题”。