IndieShow 图标IndieShow 使用文档

SEO 配置

IndieShow 项目内置 SEO 优化功能，包括基础和动态 Meta 标签设置、结构化数据配置，以及如何自定义与配置 SEO 设置，提高网站在搜索引擎中的排名

SEO 优化是提高网站可见性的关键。IndieShow-Starter-Nuxt 提供了完整的 SEO 配置系统，支持多语言 SEO、动态 Meta 标签和结构化数据。

配置文件结构

SEO 相关文件位于：

seo.ts
useSeo.ts

SEO 配置类型

基础配置

types/config/seo.d.ts
export interface SEOConfig {
  defaults: {
    titleTemplate: string
    author: string
    ogImage: string
  }
  social: {
    twitter: {
      card: string
      creator: string
      site: string
    }
    facebook: {
      appId: string
    }
  }
  pages: string[]
}

Meta 配置类型

types/config/seo.d.ts
export interface SEOMeta {
  title?: string
  description?: string
  keywords?: string
  image?: string
  type?: string
}

全局 SEO 配置

在 config/seo.ts 中配置全站默认 SEO 设置：

config/seo.ts
export const seoConfig: SEOConfig = {
  // 默认 SEO 配置
  defaults: {
    titleTemplate: `%s - ${process.env.NUXT_PUBLIC_SITE_NAME}`,
    author: "IndieShow Team",
    ogImage: "/images/social/og-image.svg",
  },
  
  // 社交媒体配置
  social: {
    twitter: {
      card: "summary_large_image", 
      creator: "@IndieShow",
      site: "@IndieShow",
    },
    facebook: {
      appId: "",
    },
  },
  
  // 预定义的页面名称
  pages: ["home", "privacy", "terms", "group", "sales"],
}

多语言 SEO 配置

中文配置

i18n/locales/zh/seo.json
{
  "defaults": {
    "title": "IndieShow",
    "description": "为独立开发者打造的产品展示模板",
    "keywords": "独立开发者, 产品展示, 网站模板"
  },
  "home": {
    "title": "首页",
    "description": "IndieShow - 为独立开发者打造的产品展示模板",
    "keywords": "独立开发者, 产品展示, 网站模板"
  }
}

英文配置

i18n/locales/en/seo.json
{
  "defaults": {
    "title": "IndieShow",
    "description": "Product showcase template for indie developers",
    "keywords": "indie developers, product showcase, website template"
  },
  "home": {
    "title": "Home",
    "description": "IndieShow - Product showcase template for indie developers",
    "keywords": "indie developers, product showcase, website template"
  }
}

使用方法

基本页面 SEO

在页面组件中使用 updatePageSeo 方法：

pages/index.vue
<script setup lang="ts">
import { useSeo } from "~/composables/useSeo"
 
// 更新页面 SEO 信息
const { updatePageSeo } = useSeo()
updatePageSeo("home") // 使用 config/seo.ts 中预定义的页面名称
</script>

动态 SEO 配置

对于需要动态 SEO 内容的页面：

pages/showcase.vue
<script setup lang="ts">
import { useSeo } from "~/composables/useSeo"
 
const { updateSeoMeta } = useSeo()
 
// 动态更新 SEO 信息
updateSeoMeta({
  title: "作品展示",
  description: "查看我的最新作品集",
  keywords: "作品展示, 项目案例, 作品集",
  image: "/images/showcase/cover.jpg"
})
</script>

SEO 最佳实践

配置验证

使用浏览器开发者工具检查以下内容，可以使用 AITDK 插件：

检查项说明期望结果
<title> 标签页面标题每个页面都有独特的标题
<meta description>页面描述包含关键词的简短描述
<meta keywords>关键词相关的关键词列表
Open Graph 标签社交媒体分享信息完整的 og 标签集
规范链接canonical URL正确的规范 URL

下一步

国际化配置

配置多语言支持

法律条款

配置网站的法律相关页面

社交配置

配置网站的社交媒体链接

数据统计

集成各类数据统计工具

目录