HappyShip Logo

HappyShip

使用文档

SEO优化

HappyShip内置强大的SEO优化功能，帮助您的AI网站在搜索引擎中获得更好的排名和曝光。通过完善的技术SEO架构和灵活的配置选项，让您的网站更容易被搜索引擎发现和索引。

1
SEO 架构概览

HappyShip 采用现代化的 SEO 架构，确保您的网站具备优秀的搜索引擎优化基础。

📁 SEO 文件结构

templates/your-template/
├── src/app/[locale]/
│ ├── layout.tsx ← 全局 SEO 配置
│ └── page.tsx ← 页面级 SEO 配置
├── messages/
│ ├── en.json ← 英文 SEO 内容
│ └── zh.json ← 中文 SEO 内容
├── public/
│ ├── favicon.ico ← 网站图标
│ ├── apple-touch-icon.png
│ └── site.webmanifest ← PWA 配置
└── next.config.ts ← 优化配置

✅ 内置 SEO 功能

动态元数据生成
多语言 SEO 支持
Canonical URL 管理
Hreflang 标签支持
Google Analytics 集成
图片优化支持

📸 架构展示

下图展示了 HappyShip 完整的 SEO 技术架构：

HappyShip SEO 架构图

SEO 架构和文件结构的完整展示

2
配置页面元数据

通过修改 messages 文件来自定义每个页面的 SEO 信息。

🔧 SEO 内容配置步骤

第1步：编辑英文 SEO 内容

在 messages/en.json 中配置页面的英文 SEO 信息：

// messages/en.json
{
"seo": {
"home": {
"title": "AI Video Generator - Create Amazing Videos in Seconds",
"description": "Transform your ideas into stunning, high-quality AI-generated videos with our powerful video generation tool. No design skills required."
}
}
}
第2步：编辑中文 SEO 内容

在 messages/zh.json 中配置对应的中文 SEO 信息：

// messages/zh.json
{
"seo": {
"home": {
"title": "AI视频生成器 - 几秒钟内创建惊艳视频",
"description": "使用我们强大的AI视频生成工具，将您的创意转化为高质量视频。无需设计技能，立即免费开始创作。"
}
}
}
第3步：页面自动应用 SEO 配置

系统会自动从 messages 文件读取并应用 SEO 配置：

// page.tsx 中的元数据生成
export async function generateMetadata() {
const messages = await getMessages({ locale });
const seo = messages.seo?.home;
return {
title: seo?.title,
description: seo?.description
};
}

💡 SEO 写作技巧：

  • 标题控制在50-60个字符以内，包含主要关键词
  • 描述控制在150-160个字符，简洁明了地说明页面价值
  • 避免关键词堆砌，保持内容自然流畅
  • 每个页面的标题和描述都应该是唯一的

📸 配置演示

下图展示了如何在 messages 文件中配置 SEO 元数据：

SEO 元数据配置示例

messages 文件中的 SEO 配置和自动生成效果

3
多语言 SEO 配置

HappyShip 自动处理多语言网站的 SEO 技术要求，包括 hreflang 标签和 canonical URL。

🌍 自动生成的多语言 SEO 标签

Hreflang 标签

告诉搜索引擎每个语言版本的页面关系：

<!-- 在页面头部自动生成 -->
<link rel="alternate" hreflang="en" href="https://yoursite.com/" />
<link rel="alternate" hreflang="zh" href="https://yoursite.com/zh" />
Canonical URL

每个语言版本都有正确的 canonical 标签：

<!-- 英文版 -->
<link rel="canonical" href="https://yoursite.com/" />
<!-- 中文版 -->
<link rel="canonical" href="https://yoursite.com/zh" />
自定义域名配置

如果您有自定义域名，可以在 SEO 配置中指定：

// messages/en.json
{
"seo": {
"home": {
"title": "Your Title",
"description": "Your Description",
"canonicalUrl": "https://yourdomain.com"
}
}
}

📸 多语言 SEO 效果

下图展示了多语言网站的 SEO 标签和 URL 结构：

多语言 SEO 配置效果

hreflang 标签和 canonical URL 的自动生成效果

4
技术 SEO 特性

HappyShip 提供完善的技术 SEO 基础设施，确保网站的技术性能满足搜索引擎要求。

⚡ 性能优化

图片优化：自动压缩和格式转换，支持 WebP 格式
静态生成：Next.js 静态生成确保页面快速加载
字体优化：使用 Google Fonts 的 font-display 优化
代码分割：按需加载 JavaScript，减少首屏加载时间

🔧 技术配置

网站图标配置

完整的 favicon 和 PWA 图标配置：

// layout.tsx 中的图标配置
icons: {
apple: '/apple-touch-icon.png',
icon: [
{ url: '/favicon-32x32.png', sizes: '32x32' },
{ url: '/favicon-16x16.png', sizes: '16x16' }
]
}
语言标签配置

HTML lang 属性自动设置：

<!-- 英文页面 -->
<html lang="en">
<!-- 中文页面 -->
<html lang="zh">

📸 技术配置示例

下图展示了技术 SEO 的各项配置和性能优化效果：

技术 SEO 配置和性能优化

网站图标、性能优化和技术配置的完整展示

5
模块化组件，Heading友好

HappyShip 采用模块化的组件设计，每个 Section 都具备完善的 SEO 结构，自动优化 Heading 层级，提升搜索引擎理解能力。

🧩 组件化 SEO 架构

标准化 Section 组件

每个页面由多个独立的 Section 组件构成，确保内容结构清晰：

// 页面组件结构
<main>
<Header /> ← 导航和品牌信息
<Hero /> ← 主标题区域
<Features /> ← 功能特性展示
<HowItWorks /> ← 使用说明
<Pricing /> ← 价格方案
<FAQ /> ← 常见问题
<Footer /> ← 页脚信息
</main>
智能 Heading 层级

每个组件自动生成合理的 Heading 结构，遵循 SEO 最佳实践：

// Heading 层级示例
<h1>AI Video Generator</h1> ← 页面主标题
<section>
<h2>Features</h2> ← Section 标题
<h3>Fast Generation</h3> ← 功能标题
<h3>High Quality</h3> ← 功能标题
</section>
<section>
<h2>How It Works</h2> ← Section 标题
<h3>Step 1: Upload</h3> ← 步骤标题
<h3>Step 2: Generate</h3> ← 步骤标题
</section>

🎯 SEO 优化的组件特性

语义化标签：使用 section, article, nav 等语义化 HTML 标签
结构化内容：每个 Section 都有清晰的标题和描述
关键词优化：标题和内容包含相关关键词
内容丰富性：每个组件都包含详细的描述信息
用户体验：内容组织符合用户阅读习惯
移动优化：所有组件都适配移动端展示

🔧 实际组件示例

Hero 组件 SEO 结构
// Hero.tsx
<section className="hero">
<h1>{t('hero.title')}</h1>
<p className="subtitle">{t('hero.subtitle')}</p>
<button>{t('hero.cta')}</button>
</section>
Features 组件 SEO 结构
// Features.tsx
<section className="features">
<h2>{t('features.title')}</h2>
<p>{t('features.description')}</p>
{features.map(feature => (
<article key={feature.id}>
<h3>{feature.title}</h3>
<p>{feature.description}</p>
</article>
))}
</section>

💡 组件化 SEO 优势：

  • 每个组件都是独立的内容单元，便于搜索引擎理解
  • 标准化的 Heading 结构，确保页面内容层次清晰
  • 组件可复用，保证整站 SEO 结构的一致性
  • 支持多语言翻译，每个组件都有对应的翻译内容
  • 响应式设计，确保在各种设备上都有良好的用户体验

📸 组件化 SEO 效果

下图展示了模块化组件的 SEO 结构和 Heading 层级优化：

组件化 SEO 结构和 Heading 优化

模块化组件的 SEO 友好结构和智能 Heading 层级

🚀 SEO 配置完成！

您的 HappyShip 网站现在具备了完善的 SEO 基础设施。通过合理配置元数据和内容，您的网站将在搜索引擎中获得更好的表现。

📝 内容优化

编写高质量的标题和描述，包含相关关键词

🌐 多语言 SEO

为每种语言创建优质内容，提升国际化SEO表现

⚡ 性能监控

定期检查网站性能，确保快速加载和良好用户体验

🎯 您的网站已准备好征服搜索引擎了！

目录