Sistine Starter

元数据 & SEO

配置 SEO 元数据和社交分享优化

元数据 & SEO

Sistine Starter 提供完整的元数据和 SEO 配置系统，帮助你优化搜索引擎排名和社交媒体分享效果。

核心系统

元数据系统由以下关键文件组成：

1. SEO 配置文件

位置: messages/seo.en.json 和 messages/seo.zh.json

这些文件包含所有页面的 SEO 元数据：

{
  "home": {
    "title": "Sistine Starter - AI 对话即开发,零代码构建生产级 SaaS",
    "description": "首个让你仅通过与 AI 对话，无需编写一行代码，就能构建专业生产级 SaaS 产品的开发框架",
    "ogImage": "https://yourdomain.com/og-home.png"
  },
  "blog": {
    "title": "博客 | Sistine Starter",
    "description": "关于 AI SaaS 开发的文章和技巧",
    "ogImage": "https://yourdomain.com/og-blog.png"
  },
  "pricing": {
    "title": "定价 | Sistine Starter",
    "description": "灵活的定价计划，适合任何规模的团队",
    "ogImage": "https://yourdomain.com/og-pricing.png"
  }
}

2. 网站配置

位置: constants/website.ts

定义全局的网站信息和社交链接：

export const WEBSITE_CONFIG = {
  name: "Sistine Starter",
  title: "AI 对话即开发,零代码构建生产级 SaaS",
  description: "首个让你仅通过与 AI 对话，无需编写一行代码，就能构建专业生产级 SaaS 产品的开发框架",

  // 社交链接
  social: {
    github: "https://github.com/your-org/sistine-starter",
    twitter: "https://twitter.com/your-handle",
    discord: "https://discord.gg/your-server",
  },

  // 分析工具配置
  analytics: {
    googleAnalyticsId: "G-XXXXXXXXXX",
    clarityProjectId: "your-clarity-id",
  },
};

3. Next.js 图片配置

位置: next.config.mjs

const nextConfig = {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "images.unsplash.com" },
      { protocol: "https", hostname: "lh3.googleusercontent.com" },
      // 添加更多允许的图片源
    ]
  }
};

页面元数据配置

动态生成 Metadata

在每个页面中使用 generateMetadata 函数生成动态元数据：

// app/[locale]/(marketing)/blog/page.tsx
import { getTranslations } from 'next-intl/server';
import { Metadata } from 'next';

export async function generateMetadata({
  params
}: {
  params: { locale: string }
}): Promise<Metadata> {
  const t = await getTranslations({ locale: params.locale, namespace: 'seo' });

  return {
    title: t('blog.title'),
    description: t('blog.description'),
    openGraph: {
      type: 'website',
      locale: params.locale === 'zh' ? 'zh_CN' : 'en_US',
      url: `https://yourdomain.com/${params.locale}/blog`,
      siteName: 'Sistine Starter',
      images: [
        {
          url: t('blog.ogImage'),
          width: 1200,
          height: 630,
          alt: t('blog.title'),
        }
      ]
    },
    twitter: {
      card: 'summary_large_image',
      title: t('blog.title'),
      description: t('blog.description'),
      images: [t('blog.ogImage')],
    }
  };
}

文章页面的 Metadata

// app/[locale]/(marketing)/blog/[slug]/page.tsx
export async function generateMetadata({
  params
}): Promise<Metadata> {
  const { locale, slug } = await params;
  const blog = await getBlogModule(slug, locale);

  return {
    title: `${blog.title} | Sistine Starter`,
    description: blog.description,
    authors: [{ name: blog.author.name }],
    publishedTime: new Date(blog.date),
    openGraph: {
      type: 'article',
      title: blog.title,
      description: blog.description,
      url: `https://yourdomain.com/${locale}/blog/${slug}`,
      authors: [blog.author.name],
      publishedTime: blog.date,
      images: [
        {
          url: blog.image,
          width: 1200,
          height: 630,
          alt: blog.title,
        }
      ]
    },
    twitter: {
      card: 'summary_large_image',
      title: blog.title,
      description: blog.description,
      images: [blog.image],
    }
  };
}

SEO 最佳实践

1. 标题优化

✅ 推荐:

  • 长度 50-60 字符
  • 包含主关键词
  • 包含品牌名称
// 好的标题示例
title: "AI SaaS 脚手架 | Sistine Starter - 快速启动你的产品"

❌ 避免:

  • 过长或过短
  • 关键词堆砌
  • 过于泛泛而谈

2. 描述优化

✅ 推荐:

  • 长度 150-160 字符
  • 自然语言，包含关键词
  • 清晰描述页面内容
// 好的描述示例
description: "Sistine Starter 是首个 AI 原生 SaaS 脚手架，让你仅通过与 AI 对话，无需编写一行代码，就能构建专业生产级 SaaS 产品。支持认证、支付、积分系统、AI 功能集成等。"

3. Open Graph 图片

推荐规格:

  • 尺寸: 1200 × 630 像素
  • 格式: PNG 或 JPG
  • 文件大小: < 500KB
  • 内容: 清晰的品牌标识 + 页面标题

位置: 放在 public/og/ 目录下

openGraph: {
  images: [
    {
      url: "https://yourdomain.com/og/blog-1.png",
      width: 1200,
      height: 630,
      alt: "Article title",
      type: "image/png",
    }
  ]
}

4. Canonical URLs

防止重复内容问题：

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: "...",
    description: "...",
    canonical: "https://yourdomain.com/en/blog/article-slug",
  };
}

5. 结构化数据 (Schema.org)

对于博客文章添加 JSON-LD 结构化数据：

// lib/schema.ts
export function generateArticleSchema(blog: Blog, locale: string) {
  return {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    headline: blog.title,
    description: blog.description,
    image: blog.image,
    datePublished: blog.date,
    author: {
      "@type": "Person",
      name: blog.author.name,
    },
    publisher: {
      "@type": "Organization",
      name: "Sistine Starter",
      logo: "https://yourdomain.com/logo.png",
    }
  };
}

在页面中使用：

import { generateArticleSchema } from '@/lib/schema';

export default function BlogPost({ blog }) {
  const schema = generateArticleSchema(blog, locale);

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
      />
      {/* 页面内容 */}
    </>
  );
}

国际化元数据

多语言 Hreflang

对于支持多语言的页面，添加 hreflang 标签：

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: "...",
    alternates: {
      canonical: "https://yourdomain.com/en/blog",
      languages: {
        'zh': 'https://yourdomain.com/zh/blog',
        'en': 'https://yourdomain.com/en/blog',
      }
    }
  };
}

动态构建多语言 Meta 标签

// lib/metadata.ts
import { getTranslations } from 'next-intl/server';

export async function getLocalizedMetadata(
  locale: string,
  page: string
): Promise<Metadata> {
  const t = await getTranslations({ locale, namespace: 'seo' });

  return {
    title: t(`${page}.title`),
    description: t(`${page}.description`),
    openGraph: {
      url: `https://yourdomain.com/${locale}/${page}`,
      images: [t(`${page}.ogImage`)],
      locale: locale === 'zh' ? 'zh_CN' : 'en_US',
    }
  };
}

常见问题

1. OG 图片未显示

原因:

  • 图片 URL 不可访问
  • 图片太小（< 200×200px）
  • 图片类型不支持

解决:

  1. 确认图片 URL 可在浏览器中访问
  2. 检查尺寸至少为 1200×630px
  3. 使用支持的格式 (PNG, JPG, GIF, WebP)

2. 元数据不更新

原因:

  • 构建缓存问题
  • Next.js ISR 需要重新验证
  • 浏览器缓存

解决:

# 清除构建缓存
rm -rf .next

# 重新构建
npm run build

# 或强制重新生成（ISR）
fetch('https://yourdomain.com/revalidate?secret=YOUR_SECRET&path=/blog')

3. Twitter 卡片显示错误

确保包含所有必需字段：

twitter: {
  card: 'summary_large_image',  // 必需
  title: "...",                  // 必需
  description: "...",            // 必需
  images: ["https://..."],       // 必需
  creator: "@your_twitter",      // 可选
}

测试工具

1. Open Graph Debugger

2. 模式验证

3. SEO 检查

部署清单

  • 所有页面都有唯一的 title 和 description
  • OG 图片尺寸正确 (1200×630px)
  • 所有外部 URL 都指向 https
  • Hreflang 标签配置正确
  • Schema.org 结构化数据有效
  • 在 Google Search Console 中验证
  • 在 Bing Webmaster Tools 中验证
  • 使用开发者工具测试社交分享

下一步

定时任务

Sistine Starter 定时任务配置和管理完整指南

主题系统

自定义网站外观和颜色主题

On this page

元数据 & SEO核心系统1. SEO 配置文件2. 网站配置3. Next.js 图片配置页面元数据配置动态生成 Metadata文章页面的 MetadataSEO 最佳实践1. 标题优化2. 描述优化3. Open Graph 图片4. Canonical URLs5. 结构化数据 (Schema.org)国际化元数据多语言 Hreflang动态构建多语言 Meta 标签常见问题1. OG 图片未显示2. 元数据不更新3. Twitter 卡片显示错误测试工具1. Open Graph Debugger2. 模式验证3. SEO 检查部署清单下一步