iFluxArt Docs

Hey，同学！想让你的博客更容易被搜索引擎找到吗？这一篇全面介绍 SEO 优化技巧～ 🚀

🤔 什么是 SEO？

SEO (Search Engine Optimization) = 搜索引擎优化。简单说就是：

让你的网站在搜索结果中排名更靠前，获取更多免费流量！

💡 想象一下：当用户搜索「React 教程」时，你的文章能排在第一页，那就是 SEO 做得好！

🏗️ iFluxArt 的 SEO 架构

1. Meta 标签

每个页面都会自动生成：

html

<title>文章标题 | 我的博客</title>
<meta name="description" content="文章摘要...">
<meta name="keywords" content="React, Next.js, 教程">

2. Open Graph

社交媒体分享时显示的内容：

html

<meta property="og:title" content="文章标题">
<meta property="og:description" content="文章摘要">
<meta property="og:image" content="封面图 URL">
<meta property="og:url" content="文章 URL">

3. Twitter Card

Twitter 分享时的展示：

html

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="文章标题">
<meta name="twitter:image" content="封面图 URL">

4. 结构化数据

使用 JSON-LD 格式的 Schema：

json

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文章标题",
  "image": ["封面图"],
  "datePublished": "2024-01-15"
}

⚙️ 配置步骤

1. 站点基础信息

在 packages/config/src/env.ts 或环境变量中配置：

txt

NEXT_PUBLIC_SITE_NAME=我的技术博客
NEXT_PUBLIC_SITE_DESCRIPTION=分享前端技术和个人思考
NEXT_PUBLIC_SITE_URL=https://myblog.com
NEXT_PUBLIC_DEFAULT_OG_IMAGE=https://myblog.com/og.png

2. 文章级别配置

在文章 Frontmatter 中设置：

markdown

---
title: React Hooks 完整指南
description: 深入理解 useState、useEffect 等常用 Hook
seo:
  title: React Hooks 教程 2024
  keywords: React, Hooks, useState, useEffect
---

🔧 具体优化技巧

1. 标题优化

✅ 推荐	❌ 避免
包含关键词	标题太长或太短
突出价值	只有通用词
简洁有力	堆砌关键词

2. 描述优化

150 字左右
包含核心关键词
描述文章价值
附带行动号召

3. 图片优化

typescript

// 使用 next/image 自动优化
<Image
  src={cover}
  alt="文章封面图"
  width={1200}
  height={630}
/>

好处：

自动生成 WebP/AVIF
懒加载
适配不同屏幕

4. 内部链接

相关文章互相链接
列表页链接到详情页
导航链接到重要页面

5. URL 结构

text

/posts/react-hooks-guide  # 清晰简短
/posts/2024/01/15/how-to-learn-react  # 太长

📊 Sitemap

iFluxArt 会自动生成 Sitemap：

文件	地址
主 Sitemap	`/sitemap.xml`
文章 Sitemap	`/sitemap-posts.xml`
分类 Sitemap	`/sitemap-categories.xml`

提交到搜索引擎

在 Google Search Console 中：

添加站点验证
提交 Sitemap URL
查看索引状态

📈 性能与 SEO

页面速度

Google 会惩罚加载慢的页面！

优化建议：

使用 next/image 优化图片
减少客户端 JavaScript
启用静态生成/ISR
配置 CDN

Core Web Vitals

Google 关注的三个指标：

指标	要求	说明
LCP	< 2.5s	最大内容绘制
FID	< 100ms	首次输入延迟
CLS	< 0.1	累积布局偏移

iFluxArt 默认会尽量满足这些指标！

移动友好

响应式设计
触摸友好
字体可读

🔍 搜索可见性

1. 防止被索引

如果是「草稿」或「私密」文章：

markdown

---
index: false  # 不索引
---

2. 规范链接

防止重复内容问题：

html

<link rel="canonical" href="https://myblog.com/posts/xxx">

3. nofollow

对于外链：

html

<a href="https://external.com" rel="nofollow">外链</a>

📋 检查清单

发布文章前检查：

标题包含关键词
Meta 描述已设置
封面图已添加
图片有 alt 描述
URL 简洁
内部链接已添加
页面加载速度正常

🔗 下一步

部署配置 —— 上线后提交搜索引擎
监控告警 —— 用 Sentry 监控错误
CDN 配置 —— 提升访问速度

🔍 SEO 做得好，流量自然来！虽然不是一朝一夕的事，但坚持优化一定能看到效果～

Hey，同学！想让你的博客更容易被搜索引擎找到吗？这一篇全面介绍 SEO 优化技巧～ 🚀

🤔 什么是 SEO？

SEO (Search Engine Optimization) = 搜索引擎优化。简单说就是：

让你的网站在搜索结果中排名更靠前，获取更多免费流量！

💡 想象一下：当用户搜索「React 教程」时，你的文章能排在第一页，那就是 SEO 做得好！

🏗️ iFluxArt 的 SEO 架构

1. Meta 标签

每个页面都会自动生成：

html

<title>文章标题 | 我的博客</title>
<meta name="description" content="文章摘要...">
<meta name="keywords" content="React, Next.js, 教程">

2. Open Graph

社交媒体分享时显示的内容：

html

<meta property="og:title" content="文章标题">
<meta property="og:description" content="文章摘要">
<meta property="og:image" content="封面图 URL">
<meta property="og:url" content="文章 URL">

3. Twitter Card

Twitter 分享时的展示：

html

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="文章标题">
<meta name="twitter:image" content="封面图 URL">

4. 结构化数据

使用 JSON-LD 格式的 Schema：

json

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文章标题",
  "image": ["封面图"],
  "datePublished": "2024-01-15"
}

⚙️ 配置步骤

1. 站点基础信息

在 packages/config/src/env.ts 或环境变量中配置：

txt

NEXT_PUBLIC_SITE_NAME=我的技术博客
NEXT_PUBLIC_SITE_DESCRIPTION=分享前端技术和个人思考
NEXT_PUBLIC_SITE_URL=https://myblog.com
NEXT_PUBLIC_DEFAULT_OG_IMAGE=https://myblog.com/og.png

2. 文章级别配置

在文章 Frontmatter 中设置：

markdown

---
title: React Hooks 完整指南
description: 深入理解 useState、useEffect 等常用 Hook
seo:
  title: React Hooks 教程 2024
  keywords: React, Hooks, useState, useEffect
---

🔧 具体优化技巧

1. 标题优化

✅ 推荐	❌ 避免
包含关键词	标题太长或太短
突出价值	只有通用词
简洁有力	堆砌关键词

2. 描述优化

150 字左右
包含核心关键词
描述文章价值
附带行动号召

3. 图片优化

typescript

// 使用 next/image 自动优化
<Image
  src={cover}
  alt="文章封面图"
  width={1200}
  height={630}
/>

好处：

自动生成 WebP/AVIF
懒加载
适配不同屏幕

4. 内部链接

相关文章互相链接
列表页链接到详情页
导航链接到重要页面

5. URL 结构

text

/posts/react-hooks-guide  # 清晰简短
/posts/2024/01/15/how-to-learn-react  # 太长

📊 Sitemap

iFluxArt 会自动生成 Sitemap：

文件	地址
主 Sitemap	`/sitemap.xml`
文章 Sitemap	`/sitemap-posts.xml`
分类 Sitemap	`/sitemap-categories.xml`

提交到搜索引擎

在 Google Search Console 中：

添加站点验证
提交 Sitemap URL
查看索引状态

📈 性能与 SEO

页面速度

Google 会惩罚加载慢的页面！

优化建议：

使用 next/image 优化图片
减少客户端 JavaScript
启用静态生成/ISR
配置 CDN

Core Web Vitals

Google 关注的三个指标：

指标	要求	说明
LCP	< 2.5s	最大内容绘制
FID	< 100ms	首次输入延迟
CLS	< 0.1	累积布局偏移

iFluxArt 默认会尽量满足这些指标！

移动友好

响应式设计
触摸友好
字体可读

🔍 搜索可见性

1. 防止被索引

如果是「草稿」或「私密」文章：

markdown

---
index: false  # 不索引
---

2. 规范链接

防止重复内容问题：

html

<link rel="canonical" href="https://myblog.com/posts/xxx">

3. nofollow

对于外链：

html

<a href="https://external.com" rel="nofollow">外链</a>

📋 检查清单

发布文章前检查：

标题包含关键词
Meta 描述已设置
封面图已添加
图片有 alt 描述
URL 简洁
内部链接已添加
页面加载速度正常

🔗 下一步

部署配置 —— 上线后提交搜索引擎
监控告警 —— 用 Sentry 监控错误
CDN 配置 —— 提升访问速度

🔍 SEO 做得好，流量自然来！虽然不是一朝一夕的事，但坚持优化一定能看到效果～