我甚至还没有发布PocketUI。产品还没准备好。但网站上线两天后，它已经出现在Google Search Console中，并开始在非品牌关键词上排名。

这个思路很简单：不要等到发布日才考虑SEO。提前做好预热，等产品准备好时，Google已经知道你的存在了。

我来详细介绍我的具体设置，并附上真实代码库中的代码。我不是SEO专家，这只是对我有效的方法。

Meta标签：告诉Google你的页面是关于什么的

Google爬取你的网站时，看到的不是人类眼中的页面，它读取的是元数据。如果你不写，Google会自己猜。Google猜得很糟糕。

我使用Nuxt（一个Vue.js框架），以下是我的设置方式。每个框架都有对应的实现方式，你也可以直接在HTML中添加普通的<meta>标签：

useSeoMeta({
  title: 'PocketUI - See a Design You Love? Now It\'s Yours.',
  description: 'Chrome extension that extracts colors, fonts, components, and screenshots from any website in one click. Saved to folders. Ready as code.',
  ogTitle: 'PocketUI - See a Design You Love? Now It\'s Yours.',
  ogDescription: 'Extract colors, fonts, components, and screenshots from any website in one click.',
  ogImage: 'https://pocketui.app/og-image.png',
  ogUrl: 'https://pocketui.app',
  ogType: 'website',
  twitterCard: 'summary_large_image',
  twitterTitle: 'PocketUI - See a Design You Love? Now It\'s Yours.',
  twitterDescription: 'Extract colors, fonts, components, and screenshots from any website in one click.',
})

每个页面都需要单独设置，不只是首页，功能页、定价页，所有页面都要。

结构化数据：告诉Google你的产品是什么

元数据告诉Google页面说了什么，结构化数据告诉Google产品本身是什么。可以把它想象成填表格，而不是写自由格式的文章。

以下是我使用nuxt-schema-org添加的内容：

useSchemaOrg([
  defineSoftwareApp({
    name: 'PocketUI',
    operatingSystem: 'Chrome',
    applicationCategory: 'DesignApplication',
    description: 'Extract colors, fonts, components, and screenshots from any website in one click.',
  }),
  defineQuestion({
    name: 'What browsers does PocketUI work with?',
    acceptedAnswer: 'Chrome, Brave, Arc, Edge, and any Chromium-based browser.',
  }),
  defineQuestion({
    name: 'How is this different from screenshots or bookmarks?',
    acceptedAnswer: 'Bookmarks save a URL. Screenshots save a dead image. PocketUI saves the actual design data: colors as HEX/RGB/HSL, fonts with weights and styles, SVGs as code.',
  }),
  // ... 更多 FAQ 问题
])

defineSoftwareApp告诉Google："这是一个软件产品，运行在Chrome上，是一个设计工具。"Google可以用这个信息在搜索结果中展示更丰富的列表。

defineQuestion块是FAQ结构化数据。当Google收录这些内容后，你的搜索结果可以直接在结果页中展开下拉式问答。你的列表占据更多空间，用户不用点击就能获得答案。我添加的是潜在用户真正会搜索的问题：支持哪些浏览器、与书签有何不同、免费计划包含什么。

面包屑结构化数据

我还添加了面包屑结构化数据。这告诉Google网站的结构，这样搜索结果中显示的不是原始URL，如：pocketui.app/features/color-extraction

而是显示一个清晰的路径，如：PocketUI > Features > Color Extraction。

useSchemaOrg([
  defineBreadcrumb({
    itemListElement: [
      { name: 'Home', item: 'https://pocketui.app' },
      { name: 'Features', item: 'https://pocketui.app/features' },
      { name: 'Color Extraction', item: 'https://pocketui.app/features/color-extraction' },
    ],
  }),
])

虽然是小细节，但它能让你的搜索结果看起来更有条理、更值得信赖。

程序化SEO

这是在早期真正起决定性作用的部分。我没有只做一个首页然后坐等好运，而是创建了针对特定搜索查询的页面：

• 功能页面：为每个核心功能单独建页，不是一个大而全的功能列表，而是像/features/color-extraction、/features/font-detection、/features/screenshot-to-code这样的独立页面。每个页面针对不同的关键词群。搜索"从网站提取颜色"的人，会进入专门介绍该功能的页面。

• 对比替代品页面：诸如"PocketUI vs CSS Peeper"、"PocketUI vs WhatFont"、"PocketUI alternative to ColorZilla"这样的页面。人们会大量搜索这类对比内容。如果你不创建这个页面，别人的博客文章就会用你的产品名来排名。

• "最佳X"/品类页面：针对"最佳设计师Chrome扩展"或"2026年设计灵感工具"等PocketUI自然契合的查询建页。

每个页面都有自己的meta标签、结构化数据和目标关键词。因为这些都是有真实内容的真实页面，Google会单独收录它们。

这就是pSEO（程序化SEO）——围绕关键词模式批量创建页面。

有一点很重要：使用简洁的URL slug。用/features/color-extraction，不要用/features/feature-1。URL中的关键词本身就是一个排名信号，Google会读取它。

内部链接：串联你自己的页面

这是免费的，但大多数人完全忽略了它。

你网站上的每个页面都应该链接到同站的其他页面。首页链接到功能页，功能页链接到定价页，对比页链接回相关功能，页脚链接到所有页面。

原因在于：当Google爬取一个页面并发现指向同一域名其他页面的链接时，它会跟着爬。指向某个页面的内部链接越多，Google就越认为那个页面重要。这也帮助Google更快发现新页面。如果你的首页已经有了权重，它链接到一个全新的对比页面，那个对比页面就会被更快地爬取和收录。

在PocketUI中，每个功能页都链接到相关功能（"喜欢颜色提取？你也会需要字体检测"），每个对比页都链接回它对比的功能，首页链接到所有功能页。这是一张网，而不是死胡同。

内部链接的另一个作用是让用户在你的网站上停留更长时间。如果有人从Google点进"PocketUI vs CSS Peeper"，然后跳转到功能页再到定价页，那就是三次页面浏览和更长的停留时间——这两者都是对Google的正向信号。

技术层面

语义化HTML：使用正确的标签。页面标题用<h1>，子标题按顺序用<h2>和<h3>。Google通过这个层级结构来理解页面结构。

移动端响应式：Google采用移动优先索引，它首先查看你网站的移动版本。如果你的网站在手机上显示有问题，即使是桌面端搜索你也会被降权。

页面速度：我使用带SSR的Nuxt，所以HTML在Google爬虫到达时已经预先构建好了，无需等待JavaScript加载。可以在pagespeed.web.dev检测你的网站。

核心网页指标：LCP低于2.5秒（主要内容的显示速度），FID低于100毫秒（用户可以交互的速度），CLS尽可能低（加载时页面不跳动）。使用WebP/AVIF格式图片，对首屏以下的内容使用懒加载。

Sitemap：sitemap.xml本质上是你希望Google了解的所有页面的列表。没有它，Google必须通过跟踪链接来发现你的页面，对于新网站来说这很慢。有了它，你就是在提前把完整地图交给Google。Nuxt通过@nuxtjs/sitemap模块自动生成。上线后在yoursite.com/sitemap.xml可以访问，然后通过Search Console提交。

robots.txt：确保它没有意外屏蔽爬虫。

规范URL：如果你的页面同时存在于/features和/features/，Google会认为这是两个内容重复的页面。Canonical标签告诉Google哪个才是真正的页面。

图片alt文本：每张截图、每张插图都要写。Google会读取这些内容，不要留空。

对不应公开的页面添加Noindex：登录页、仪表板、引导流程，任何需要身份验证才能访问的内容。如果不告诉Google跳过这些，它会把爬取预算浪费在无关紧要的页面上。

Google Search Console（以及Bing）

网站上线当天就设置Google Search Console，不要"以后再说"。

• 验证域名所有权

• 提交sitemap.xml（告诉Google所有页面的位置）

• 手动为关键页面申请索引

第三步是大多数人跳过的操作。粘贴一个URL，点击"申请索引"，Google就会优先爬取该页面。

同时也设置Bing Webmaster Tools。大多数人会忘记Bing的存在，但它仍然有真实的流量，而且你可以直接导入Google Search Console的设置，大概只需要2分钟。

交叉链接与初始流量

我从MiroMiro链接到了PocketUI。MiroMiro的域名评级更高，所以Google已经信任它。当一个受信任的网站链接到新网站时，Google将其视为背书。来自一个Google信任的网站的一条链接，比来自50个全新网站的链接更有价值。

如果你已经有产品、博客或任何有流量的东西，从那里链接到你的新项目，这是向新域名传递权重最快的方式。

我在X上发了帖子。就这些。我还没有在Product Hunt或任何目录上发布，产品还没准备好。但那条X帖子带来了真实用户访问网站，而Google会注意到真实用户访问新页面并停留其上——这是一个质量信号。

目录和Product Hunt的发布会在产品真正准备好时再进行。但在预热阶段不需要它们。来自现有资产的交叉链接加上一些社交流量，已经足够引起Google的注意。

整体流程

• 设置好meta标签、OG图片和结构化数据

• 创建pSEO页面（功能页、替代品页、对比页），形成多个搜索入口

• 将这些页面相互链接，让Google可以爬取到所有内容，没有页面是死胡同

• 处理技术细节（sitemap、尾部斜杠、私有页面的noindex、简洁的slug）

• 将所有内容提交到Search Console和Bing，手动申请索引

• 从现有资产交叉链接

• 通过社交媒体驱动初始流量，让Google看到真实的用户互动

你不需要等到发布日。等PocketUI准备好时，它已经拥有了搜索权重。这就是整个方案的核心。

补充说明

原文中提到的useSeoMeta、useSchemaOrg都是Nuxt框架特有的组合式函数（Composables），作者用的是Vue.js + Nuxt的技术栈。

这两个函数在运行时会自动把配置转换成标准HTML标签，注入到页面的<head>里。

useSeoMeta生成的是这些：

<head>
  <title>PocketUI - See a Design You Love?</title>
  <meta name="description" content="Chrome extension that..." />
  <meta property="og:title" content="..." />
  <meta property="og:image" content="..." />
  <meta name="twitter:card" content="summary_large_image" />
</head>

useSchemaOrg生成的是这个：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "PocketUI",
  "operatingSystem": "Chrome",
  ...
}
</script>

如果你不用Nuxt

纯HTML项目——直接手写进<head>：

<head>
  <title>你的标题</title>
  <meta name="description" content="描述" />
  <meta property="og:image" content="https://..." />

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "你的产品名"
  }
  </script>
</head>

Next.js（React）——用内置的Metadata API：

export const metadata = {
  title: '你的标题',
  description: '描述',
  openGraph: {
    images: ['/og-image.png'],
  },
}

其他框架——基本都有对应方案，比如SvelteKit用<svelte:head>，Astro直接写frontmatter。

不管用什么框架，最终Google爬虫看到的都是同一套HTML标签。

这是来自Soraia的分享