编辑“︁Next.js SEO基础”︁（章节）

== 核心优化技术 ==

=== 1. 元标签管理 ===
元标签（Meta Tags）是搜索引擎理解页面内容的关键。Next.js通过`next/head`组件动态管理元标签。

<syntaxhighlight lang="javascript">
import Head from 'next/head';

function ProductPage({ product }) {
  return (
    <>
      <Head>
        <title>{product.name} | 我的商店</title>
        <meta name="description" content={product.description} />
        <meta property="og:title" content={`购买 ${product.name}`} />
        <meta property="og:description" content={product.description} />
        <meta property="og:image" content={product.imageUrl} />
      </Head>
      {/* 页面内容 */}
    </>
  );
}
</syntaxhighlight>

'''关键元标签说明：'''
* `<title>`: 页面标题（50-60字符为佳）
* `<meta name="description">`: 页面描述（150-160字符）
* Open Graph标签（`og:`）: 用于社交媒体分享时的富媒体展示

=== 2. 语义化HTML结构 ===
Next.js自动生成语义化HTML，但开发者仍需注意：

<syntaxhighlight lang="javascript">
// 正确示例：使用语义化标签
export default function ArticlePage() {
  return (
    <article>
      <header>
        <h1>文章标题</h1>
      </header>
      <section>
        <p>正文内容...</p>
      </section>
      <footer>
        <p>作者信息</p>
      </footer>
    </article>
  );
}
</syntaxhighlight>

=== 3. 路由优化 ===
Next.js的文件系统路由自动生成SEO友好的URL：

<mermaid>
graph LR
  pages/
    index.js --> /
    products/
      index.js --> /products
      [id].js --> /products/1
</mermaid>

'''最佳实践：'''
* 使用小写字母和连字符（如`/blog/seo-tips`）
* 避免动态参数泛滥（如`/products?id=123` → `/products/123`）

=== 4. 性能优化 ===
性能是SEO排名因素之一。Next.js内置优化工具：

<syntaxhighlight lang="javascript">
import Image from 'next/image';

function OptimizedImage() {
  return (
    <Image
      src="/product.jpg"
      alt="产品展示"
      width={800}
      height={600}
      priority // 关键图片预加载
      blurDataURL="data:image/png;base64..." // 占位符
    />
  );
}
</syntaxhighlight>

'''性能指标改善：'''
* LCP（最大内容绘制）: 使用`priority`属性优化首屏图片
* CLS（布局偏移）: 始终定义图片尺寸
* TTI（可交互时间）: 代码拆分自动处理