⚡

SEO基础 seo-fundamentals

SEO基础技能用于提升网页在搜索引擎中的可见性和排名，通过优化元标签、语义HTML结构、开放图谱标签等关键元素，适用于前端开发和数字营销，帮助改善用户可访问性和搜索性能。关键词：SEO、搜索引擎优化、元标签、语义HTML、开放图谱、前端优化、数字营销。

SEO/SEM 0 次安装 0 次浏览 更新于 3/8/2026

name: seo-fundamentals description: 回顾SEO包括元标签、语义HTML和开放图谱。适用于构建面向公众的页面、添加标题/描述标签或优化搜索引擎。

SEO基础回顾

“好的SEO就是好的用户体验。如果搜索引擎无法理解你的页面，用户可能找不到它。”

适用场景

激活此技能时：

  • 审查HTML <head>部分
  • 在代码中看到元标签
  • Next.js/Remix页面组件
  • 带有标题的HTML结构
  • 任何应被索引的页面

SEO检查清单

必须拥有（每个页面）

  • [ ] 标题标签 — 50-60个字符，每个页面唯一
  • [ ] 元描述 — 150-160个字符，有吸引力
  • [ ] 单个H1标签 — 每页一个，描述主要内容
  • [ ] 逻辑标题层次 — H1 → H2 → H3（不跳过）
  • [ ] 语义HTML — <header>、<main>、<nav>、<article>、<footer>
  • [ ] 图片替代文本 — 描述性，不是“image1.jpg”

应该拥有（营销页面）

  • [ ] 开放图谱标签 — og:title、og:description、og:image
  • [ ] Twitter卡片 — twitter:card、twitter:title
  • [ ] 规范URL — 防止重复内容问题
  • [ ] 结构化数据 — JSON-LD用于丰富摘要

性能（影响SEO）

  • [ ] 核心网页指标意识
    • LCP（最大内容绘制）< 2.5秒
    • FID（首次输入延迟）< 100毫秒
    • CLS（累计布局偏移）< 0.1

常见错误（反模式）

1. 多个H1标签

<!-- ❌ 错误：多个H1让搜索引擎困惑 -->
<h1>欢迎</h1>
<h1>我们的产品</h1>
<h1>联系我们</h1>

<!-- ✅ 正确：一个H1，逻辑层次 -->
<h1>欢迎来到我们的商店</h1>
<h2>我们的产品</h2>
<h2>联系我们</h2>

2. 缺少替代文本

<!-- ❌ 错误：空或无用的替代文本 -->
<img src="hero.jpg" alt="">
<img src="team.jpg" alt="图片">

<!-- ✅ 正确：描述性替代文本 -->
<img src="hero.jpg" alt="软件工程师在笔记本电脑上工作">
<img src="team.jpg" alt="我们的5名工程师创始团队">

3. Div汤（无语义HTML）

<!-- ❌ 错误：无语义含义 -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">...</div>
<div class="footer">...</div>

<!-- ✅ 正确：语义HTML -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

4. 跳过标题级别

<!-- ❌ 错误：从H1跳到H4 -->
<h1>页面标题</h1>
<h4>某个部分</h4>

<!-- ✅ 正确：顺序层次 -->
<h1>页面标题</h1>
<h2>主要部分</h2>
<h3>子部分</h3>

5. 通用标题标签

<!-- ❌ 错误：不具描述性 -->
<title>首页</title>
<title>页面</title>

<!-- ✅ 正确：包含关键词的描述性 -->
<title>Daniel Lamb - 全栈开发者作品集</title>
<title>联系我们 | Acme软件解决方案</title>

苏格拉底式问题

用这些问题代替给出答案：

  1. 标题：“如果有人在Google结果中看到这个标题，他们会点击吗？”
  2. H1：“这个页面有多少个H1标签？如果有多个，会发生什么？”
  3. 替代文本：“如果图片不加载，会丢失什么信息？”
  4. 语义HTML：“屏幕阅读器能理解这个页面的结构吗？”
  5. 元描述：“这个描述能让你想点击吗？”

堆栈特定指导

Next.js（应用路由器）

// 模式：元数据导出
export const metadata = {
  title: '页面标题',
  description: '页面描述',
  // 您的实现会有所不同
};

Next.js（页面路由器）

// 模式：Next Head
import Head from 'next/head';

<Head>
  <title>您的标题在这里</title>
  <meta name="description" content="您的描述" />
</Head>

纯HTML/React

<!-- 在index.html中或通过react-helmet -->
<head>
  <title>标题在这里</title>
  <meta name="description" content="描述在这里">
</head>

需要指出的危险信号

信号 问题
缺少标题标签 “这个页面在搜索结果中会显示什么？”
多个H1 “哪个标题是主要主题？搜索引擎困惑了。”
无元描述 “Google会如何总结这个页面？”
空替代文本 “如果图片不加载呢？会丢失什么信息？”
全是div，无语义 “屏幕阅读器能导航这个页面吗？”
标题超过60个字符 “这在搜索结果中会被截断。能缩短吗？”

开放图谱模板

<!-- 最小可行开放图谱 -->
<meta property="og:title" content="您的页面标题">
<meta property="og:description" content="您的页面描述">
<meta property="og:image" content="https://yoursite.com/og-image.jpg">
<meta property="og:url" content="https://yoursite.com/page">
<meta property="og:type" content="网站">

面试连接

“我实施了SEO最佳实践，包括语义HTML、正确的标题层次和元标签，提高了我们页面的可发现性。”

审查他们的代码时：

  • “您对这个页面的SEO策略是什么？”
  • “Google会如何理解这个页面的内容？”
  • “给我看您的标题结构”

MCP使用

Context7 - 框架文档

获取：Next.js元数据文档
获取：语义HTML最佳实践

Octocode - 真实示例

搜索：Next.js仓库中的"metadata" + "title" + "description"
搜索：开放图谱实现模式