SEO 图片生成

技能文档

---
name: seo-image-gen
title: SEO 图片生成
category: 内容创作
description: "生成面向 SEO 场景的图片资源，包括 OG 社交预览图、博客主图、Schema 结构化图片、产品摄影图、信息图等。当用户需要为网页内容生成 SEO 优化图片、社交分享封面、文章配图、产品图或信息图时触发。触发词：SEO图片、OG图、社交预览图、博客配图、产品图、信息图"
---

# SEO 图片生成

为 SEO 场景生成可直接上线的图片资源，覆盖 OG 社交预览、博客主图、Schema 结构化图片、产品摄影、信息图等常见用途。自动匹配最佳宽高比、分辨率和风格参数。

## 适用场景

- 生成 OG 社交预览图、博客主图、Schema 可视化素材、信息图等 SEO 资产
- 图片生成是 SEO 优化或内容发布流程的一部分
- 需要为网页内容快速产出符合搜索引擎规范的图片

## 技能工作流

### 步骤1：识别用途

根据用户指令或上下文判断图片用途类型：

| 用途 | 宽高比 | 分辨率 | 风格模式 | 说明 |
|------|--------|--------|----------|------|
| **OG/社交预览图** | `16:9` | `1K` | 产品或 UI/Web | 简洁专业，适合叠加文字 |
| **博客主图** | `16:9` | `2K` | 电影或编辑风格 | 戏剧性、氛围感、编辑级画质 |
| **Schema 图片** | `4:3` | `1K` | 产品 | 干净、描述性强 |
| **社交方形图** | `1:1` | `1K` | UI/Web | 平台优化的正方形 |
| **产品摄影** | `4:3` | `2K` | 产品 | 白色背景、棚拍光效 |
| **信息图** | `2:3` | `4K` | 信息图 | 数据密集、纵向布局 |
| **图标/Favicon** | `1:1` | `512` | Logo | 极简、可缩放、高辨识度 |
| **Pinterest 长图** | `2:3` | `2K` | 编辑风格 | 竖版卡片 |

### 步骤2：设置参数

根据步骤1确定的用途，从表格中读取预设的宽高比、分辨率和风格模式，作为生成参数。

### 步骤3：构建生成提示

根据用户描述和 SEO 用途，构建详细的图片生成提示词：

- 明确主体、风格、场景、光线、构图
- 针对 SEO 用途强调清晰度和专业感
- 如果涉及品牌元素，加载品牌预设作为默认参数

### 步骤4：生成图片

使用内置 ImageGen 生成图片，应用步骤2确定的参数。

### 步骤5：输出 SEO 优化建议

生成完成后，提供以下优化指引：

1. **Alt 文本**：为图片撰写包含关键词的描述性 alt 文本
2. **文件命名**：重命名为 SEO 友好格式 `关键词-描述-宽x高.webp`
3. **WebP 转换**：转换为 WebP 格式以优化页面加载速度：
   ```bash
   magick output.png -quality 85 output.webp
   ```
4. **文件大小**：主图控制在 200KB 以内，缩略图控制在 100KB 以内
5. **Schema 标记**：建议添加 `ImageObject` 结构化数据：
   ```json
   {
     "@type": "ImageObject",
     "url": "https://example.com/images/keyword-description.webp",
     "width": 1200,
     "height": 630,
     "caption": "包含目标关键词的描述性标题"
   }
   ```
6. **OG 元标签**：社交预览图需添加：
   ```html
   <meta property="og:image" content="https://example.com/images/og-image.webp" />
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="630" />
   <meta property="og:image:alt" content="描述性 alt 文本" />
   ```

## 指令格式

| 指令 | 功能 |
|------|------|
| `seo-image-gen og <描述>` | 生成 OG/社交预览图（1200x630 风格） |
| `seo-image-gen hero <描述>` | 博客主图（宽屏、戏剧性） |
| `seo-image-gen product <描述>` | 产品摄影图（干净、白底） |
| `seo-image-gen infographic <描述>` | 信息图（纵向、数据密集） |
| `seo-image-gen custom <描述>` | 自定义图片 |
| `seo-image-gen batch <描述> [N]` | 批量生成 N 张变体（默认 3 张） |

## 输出规范

每次生成完成后，始终提供以下信息：

1. **图片路径**：保存位置
2. **生成提示词**：展示发送给 API 的提示词（便于学习和复用）
3. **参数设置**：模型、宽高比、分辨率
4. **SEO 检查清单**：alt 文本建议、文件命名、WebP 转换提示
5. **Schema 片段**：适用的 ImageObject 或 og:image 标记代码

## 错误处理

| 错误 | 解决方式 |
|------|----------|
| 图片生成服务不可用 | 检查 ImageGen 是否已连接 |
| 触发安全过滤 | 调整提示词措辞，避免敏感内容 |
| 生成质量不佳 | 细化提示词描述，增加构图和风格细节 |
| 分辨率不足 | 提升分辨率参数重新生成 |

## 限制

- 仅在与上述场景匹配时使用本技能
- 生成结果不能替代针对具体环境的验证、测试或专业审核
- 缺少必要输入、权限或安全边界时，停下来向用户确认

使用说明

# SEO 图片生成

为 SEO 场景一键生成符合搜索引擎规范的图片资源，覆盖 OG 社交预览图、博客主图、产品图、信息图等 8 种常见用途。

## 使用

生成 OG 社交预览图：

```
seo-image-gen og 科技博客文章封面，蓝色渐变背景，简洁现代风格
```

生成博客主图：

```
seo-image-gen hero 人工智能主题，深色科技感，未来城市天际线
```

批量生成产品图变体：

```
seo-image-gen batch 无线耳机产品图，白底棚拍 4
```

## 工作原理

1. 根据指令识别图片用途（OG/主图/产品/信息图等）
2. 自动匹配最佳宽高比、分辨率和风格参数
3. 构建 SEO 优化的生成提示词并调用内置 ImageGen 生成
4. 输出图片并提供完整的 SEO 优化建议（alt 文本、文件命名、WebP 转换、Schema 标记）

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。