seo-article-writing

适用场景

• 为 SEO 搭建博客板块
• 撰写博客文章以获取自然流量
• 创建对比／评测内容
• 打造内容营销素材
• 任何需要基于文件的博客 CMS 的项目

前置条件

撰写文章前，请确保：

1. 博客基础设施已搭建（参见博客基础设施搭建）
2. 已具备 AI 图片生成能力
3. 已在打包工具中配置 MDX 支持

---

快速开始

# 1. Set up blog infrastructure (first time only)
# Copy assets from this skill to your project

# 2. Create article folder
mkdir -p src/content/blog/{slug}

# 3. Generate unique article image using AI
# See Image Generation section below

# 4. Write article using template
# Use assets/templates/article.mdx as base

---

工作流概览

┌─────────────────────────────────────────────────────────────────┐
│  1. SETUP (One-time)                                            │
│     └─> Blog infrastructure                                     │
├─────────────────────────────────────────────────────────────────┤
│  2. RESEARCH                                                    │
│     └─> Keywords → Competitors → Content gaps                   │
├─────────────────────────────────────────────────────────────────┤
│  3. OUTLINE                                                     │
│     └─> Structure → Tables → FAQs                               │
├─────────────────────────────────────────────────────────────────┤
│  4. IMAGE GENERATION                                            │
│     └─> AI-generate unique image for article content            │
├─────────────────────────────────────────────────────────────────┤
│  5. WRITE                                                       │
│     └─> Draft → Optimize → Review                               │
├─────────────────────────────────────────────────────────────────┤
│  6. PUBLISH                                                     │
│     └─> MDX file → Sitemap → Verify                             │
└─────────────────────────────────────────────────────────────────┘

---

图片生成（至关重要）

理念

每篇文章都必须配有独特且契合内容的图片。 不要使用通用的图案背景。请生成自定义图片，使其：

1. 在视觉上体现文章主题
2. 带有相关文字／标题叠层
3. 采用一致的品牌风格（深色主题、橙色点缀）
4. 尺寸为 1200x630 像素，适用于 OG 分享

图片生成流程

为每篇文章使用以下模板进行 AI 图片生成：

A sophisticated hero image for "[ARTICLE TITLE]" blog article.
[DESCRIBE VISUAL CONCEPT THAT MATCHES CONTENT]
Dark background (#0f172a or #1e293b) with orange (#f97316) accents.
Modern, minimalist, professional SaaS style like Linear or Vercel.
Include text overlay: "[TITLE]" and optional subtitle.
1200x630 pixels.

按文章类型划分的提示词示例

对比文章

A sophisticated hero image for "Sunsama Alternatives" comparison article.
Modern minimalist design with floating app icons and comparison cards.
Deep navy background (#0f172a) with orange (#f97316) gradient accents.
Show multiple tools being compared with visual hierarchy.
Include title text overlay. Professional SaaS marketing style.
1200x630 pixels.

指南／教程文章

A sophisticated hero image for "Time Blocking Guide" tutorial article.
Modern minimalist design showing calendar grid with colorful time blocks.
Dark slate background (#1e293b) with vibrant orange (#f97316) blocks.
Clean 3D floating elements suggesting productivity and organization.
Include title: "TIME BLOCKING GUIDE" and subtitle "Master Your Day".
1200x630 pixels.

对决／对比文章

A sophisticated hero image for "Time Blocking vs To-Do Lists" comparison.
Split design: left side shows organized calendar blocks, right side shows
scattered checklist items. Visual contrast between order and chaos.
Dark background with orange (#f97316) and blue (#3b82f6) accents.
Include title text. Editorial style. 1200x630 pixels.

自托管／技术文章

A sophisticated hero image for "Self-Hosted Productivity Apps" article.
Server/cloud icon with data flowing to personal devices.
Emphasizes privacy and control with lock/shield symbols.
Dark navy background with green (#22c55e) security accents and orange highlights.
Include title and tagline about privacy/control. 1200x630 pixels.

日常／习惯文章

A sophisticated hero image for "Daily Planning Routine" habit article.
Morning scene with coffee, notebook, and digital calendar interface.
Soft gradient from deep purple to warm orange (#f97316).
Floating UI elements showing checklist items.
Calm, productive, aspirational mood. Include title. 1200x630 pixels.

图片命名规范

使用描述性名称保存图片：

public/blog-{slug}.png

Examples:
- blog-sunsama-alternatives.png
- blog-time-blocking-guide.png
- blog-self-hosted.png
- blog-daily-planning-routine.png

更新 Frontmatter

生成图片后，更新文章的 frontmatter：

export const frontmatter = {
  // ...other fields
  image: "/blog-{slug}.png"
};

---

博客基础设施搭建

必需文件

将这些文件从 assets/ 复制到项目中：

your-project/
├── src/
│   ├── content/
│   │   └── blog/           # MDX articles go here
│   │       └── {slug}/
│   │           └── index.mdx
│   ├── types/
│   │   └── blog.ts         # Copy from assets/templates/
│   ├── lib/
│   │   └── blog.ts         # Copy from assets/templates/
│   ├── components/
│   │   └── blog/
│   │       ├── blog-card.tsx
│   │       └── blog-layout.tsx
│   └── routes/
│       ├── blog.tsx        # Blog listing
│       └── blog.$slug.tsx  # Individual post
└── public/
    └── blog-{slug}.png     # Generated images per article

Vite/React 配置

对于 Vite 项目，使用 import.meta.glob 加载 MDX 文件：

// src/lib/blog.ts
const modules = import.meta.glob('../content/blog/*/index.mdx', { eager: true });

Next.js 配置

对于 Next.js 项目，使用 @next/mdx 或 contentlayer：

// next.config.js
import mdx from '@next/mdx';
const withMDX = mdx({ extension: /\.mdx?$/ });
export default withMDX({ pageExtensions: ['ts', 'tsx', 'mdx'] });

---

关键词研究

第 1 步：选择主要关键词

使用网页搜索研究主题：

Search queries to run:
- "[topic] 2026"
- "best [topic]"
- "[topic] alternative"
- "[topic] vs [competitor]"

第 2 步：判断搜索意图

意图	指标	内容类型	优先级
交易型	“最佳”“替代方案”“购买”	对比、评测	高
信息型	“如何”“什么是”“指南”	教程、说明文	中
导航型	品牌名称、特定工具	功能页面	低

子 Agent 提示词：关键词研究

You are an SEO expert. Research keywords for [TOPIC].

Use web search to find:
1. Primary keyword with highest search intent
2. 5 secondary keywords (long-tail variations)
3. Top 5 competitor URLs for analysis
4. Content gaps competitors are missing

Return:
- Prioritized keyword list with intent classification
- Recommended content angle
- Estimated search volume (HIGH/MEDIUM/LOW)

---

文章结构

Frontmatter 模板

export const frontmatter = {
  title: "SEO Title Under 60 Characters with Primary Keyword",
  description: "Meta description 150-160 chars with keyword and compelling hook.",
  date: "2026-01-30",
  author: "Team Name",
  tags: ["primary-tag", "secondary-tag", "category"],
  readingTime: 10,
  image: "/blog-your-article-slug.png"  // UNIQUE image per article!
};

文章大纲模板

# [Primary Keyword in H1 Title]

## Introduction
- Hook with statistic or pain point
- What reader will learn
- Establish credibility (1-2 paragraphs)

## [Section 2: Definition/Background]
- What is [topic]?
- Why it matters (2-3 paragraphs)

## [Section 3: Core Content / How-To]
- Main value proposition
- Step-by-step if tutorial
- Numbered list for scanability

## [Section 4: Comparison Table]

| Feature | Option A | Option B | Option C |
|---------|----------|----------|----------|
| Price   | Free     | $10/mo   | $25/mo   |
| Feature | ✅       | ✅       | ❌       |

## [Section 5: Detailed Analysis]
- 3-4 paragraphs per option
- Pros and cons
- Best use cases

## Frequently Asked Questions

### What is [primary keyword]?
[2-3 sentence answer targeting featured snippet]

### Is [option A] better than [option B]?
[Honest comparison with recommendation]

## Conclusion
- Summary of key points
- Clear CTA with link to action

---

写作指南

SEO 最佳实践

要素	指南
标题	包含主要关键词，少于 60 个字符
Meta 描述	150-160 个字符，包含关键词和吸引人的钩子
H2 标题	自然地包含次要关键词
关键词密度	主要关键词占 1-2%
内部链接	添加 2-3 个指向相关页面的链接
外部链接	添加 1-2 个指向权威来源的链接

字数目标

内容类型	最少字数	最佳字数
对比／评测	2,000	2,500
完整指南	2,500	3,500
操作教程	1,500	2,000
思想领导力文章	1,800	2,200

---

完整文章创作工作流

第 1 步：研究

Use keyword research agent to identify:
- Primary keyword
- Secondary keywords  
- Top 5 competitors
- Content gaps

第 2 步：生成图片

Use AI image generation with article-specific prompt.
Save to public/blog-{slug}.png

第 3 步：创建文章文件夹

mkdir -p src/content/blog/{slug}
touch src/content/blog/{slug}/index.mdx

第 4 步：撰写内容

Use article writer agent with:
- Keyword targets
- Word count requirement
- Comparison tables
- FAQ section

第 5 步：更新 Frontmatter

export const frontmatter = {
  title: "...",
  description: "...",
  date: "YYYY-MM-DD",
  author: "Team Name",
  tags: ["..."],
  readingTime: X,
  image: "/blog-{slug}.png"  // Your generated image
};

第 6 步：添加到站点地图

<url>
  <loc>https://yoursite.com/blog/{slug}</loc>
  <lastmod>{date}</lastmod>
  <changefreq>monthly</changefreq>
  <priority>0.8</priority>
</url>

第 7 步：验证

• 图片在博客列表中正常显示
• 文章正常呈现
• 所有链接均可使用
• 站点地图有效

---

子 Agent 提示词

图片生成 Agent

Generate a unique blog hero image for: "[ARTICLE TITLE]"

Topic: [brief description]
Style: Dark background, orange accents, modern SaaS aesthetic
Include: Title text overlay, relevant visual elements
Size: 1200x630 pixels

Save as: blog-{slug}.png

文章撰写 Agent

Write a [WORD_COUNT]+ word SEO article on [TOPIC].

Primary keyword: [KEYWORD]
Secondary keywords: [KEYWORD_LIST]

Include:
1. Frontmatter with all required fields
2. Introduction with hook/statistic
3. Comparison table with 4+ options
4. Detailed breakdown (3-4 paragraphs per option)
5. FAQ section with 5+ questions using h3 headers
6. Conclusion with CTA linking to [PAGE]

Image has been generated at: /blog-{slug}.png
Include this in frontmatter.

FAQ 撰写 Agent

Write 7 FAQ questions for article about [TOPIC].

Target keywords:
- [keyword 1]
- [keyword 2]
- [keyword 3]

Use h3 headers (###) for each question.
Each answer should be 2-3 sentences.
Target featured snippet format (direct, concise).

---

发布检查清单

• 已为这篇文章生成独特图片
• 图片已保存至 public/blog-{slug}.png
• Frontmatter 中的图片路径与文件匹配
• 标题中包含主要关键词
• Meta 描述已优化（150-160 个字符）
• 至少有 1 个对比表格
• 至少有 5 个 FAQ 问题
• 已添加内部链接（2-3 个）
• 已计算阅读时间
• 已分配标签（2-4 个）
• 日期设置正确
• 文章已添加到 sitemap.xml

---

文件引用

请参阅 assets/ 文件夹：

文件	用途
templates/blog-types.ts	TypeScript 接口
templates/blog-utils.ts	用于加载 MDX 的实用函数
templates/article.mdx	文章模板
components/blog-card.tsx	用于列表展示的卡片组件
components/blog-layout.tsx	单篇文章的布局
scripts/setup-blog.sh	快速设置脚本

---

更新

• v1.1（2026-01-31）：更新要求每篇文章使用独特的 AI 生成图片
• v1.0（2026-01-30）：初始版本，包含完整工作流