2023-07-23

让你的AI工具从Google搜索中获得用户

声明：这是我(一个完全没有任何 SEO 基础的工程师)在短期内发现的一些经验，所以可能有一些原理性的错误，如果是这样，非常欢迎邮件纠正我。

制作网站

尽管你做的可能是一个 App 或桌面软件，但我仍然建议你给自己的产品制作网站，有两个好处：1) 通过图表、动画、视频等更丰富的形式展示自己的产品功能。2) 让目标用户有可能通过 Google 搜索触及你的产品，这是很重要的用户新增来源。

而一旦你想要制作了网站，就涉及到一个问题：如何让目标用户搜索「chat ai」时，有更高的几率能点进你的网站，这就需要 SEO(Search Engine Optimization)。

PageRank

SEO 的最终目标是让你的产品在 Google 搜索的排名靠前。所以有必要了解一点 Google 排序算法。

虽然 Google 已经不再将 PageRank 作为唯一算法，但它仍是重要的排序依据：PageRank 认为「更重要的页面往往更多地被其他页面引用」^[1]。类似于论文期刊的权重因子，Google 给每个网站都做了评分(domain rating, DR)：同样命中了某个关键词，Google 会将 DR 更高的网站排名靠前，这很合理。

那么，如何计算评分呢？一个直观的想法是，统计引用了你的网站这些网站的平均评分，这种「引用你的网站」的行为被称作反向链接(Backlink)。这样一来，PageRank 算法看上去就像一张带有权重的图：假如你的网站被三个其他网站反向链接了，而这三个网站的 domain rating 分别是 100,10,1，则你的网站评分就是 $$(100 * 1 + 10 * 1 + 1 * 1) * 系数$$ 。可见，反向链接并非越多越好，给你带来反向链接的网站本身的质量更重要，有些算法里只会统计引用了你的网站中评分最高的 top100 域名，这样通过不断注册域名，囤积反向链接数量的方法就失效了。

Ahrefs 网站针对 domain rating 有这样一句评价：

您应该致力于从高 Domain Rating 网站获取反向链接，因为它们具有更大的“权重” 。^[2]

Domain Rating

因此，SEO 的一个关键任务就是增加你的网站 Domain Rating。接下来的任务就是：如何让高 DR 的网站给我反向链接。

你可以去 Reddit/Medium 上撰写高质量的文章介绍自己的产品，也可以请求那些已经是高质量的文章给你的网站添加链接。例如，你的产品是「mp3 converter」, 从 Google 结果里找到靠前的文章，向他们发邮件请求添加你的网站。因为他们是测评网站，所以不会排斥多加个链接，如果你的产品足够好，也许就能被收录。

因为本文主要是写给 AI 工具，所以这里只讨论如何给 AI 工具增加反向链接。

这里其实有个双边市场：许多新的 AI 工具需要曝光，而许多 AI 工具列表网站需要新内容，所以他们乐于设置 AI 工具提交入口。有些网站是免费的，有些用户量高的网站则收取 10-20 刀的费用，你可以根据自己判断决定是否值得花钱提交。

挑选 AI 列表网站

只说我的做法：第一步，访问Similarweb，搜索某个工具列表网站，例如 aitools.fyi，你可以看到它过去几个月的访问量、访问者都来自哪些国家、性别等用户画像。

第二步，使用Ahrefs 反向链接检查工具查看这个网站的 DR，以判断一旦被收录后它将给你的网站带来的 DR 提升。一个有意思的事情是：你其实完全可以输入你的工具网站，查看它目前被哪些网站反向链接了，这样你可以对「哪些网站的 DR 高」有感性的认识，例如V2EX就很高。注意，Ahref 的 DR 打分不等于 Google 打分，但趋势上是接近的。

上面Similarweb截图中可以看到，它提供了「相似网站」的功能，你可以很快找到与 aitools.fyi 类似的网站。这样，循环上述两个步骤，最终你可以做出「是否要付费提交工具给这个网站」的判断。

关键词很关键

我做了一个开源的查看 OpenAI API 费用明细的工具，可以查看不同模型(GPT-3.5/Whisper 等)的分时消耗，以及各自的费用占比。但是，无论我怎么修改网站标题，甚至直接命名为「OpenAI API Cost」，这个关键词的 Google 搜索结果排名也很靠后。

后来受这篇文章的启发，我将这个网站的 About 页面从短短的三行扩充成了一篇Blog，并且尽可能包容更多、更长尾的关键词。重点是：我介绍了你可以通过切换柱状图(bar chart)和饼图(pie chart)来分析成本。很快我就发现，搜「OpenAI API cost pie chart」我的网站就排名#2 了。

模拟潜在用户会使用什么关键词，然后在网站的介绍里加入这些长尾关键词，是一个不错的方法。

来自 Google 的 SEO 指南 ^[3]

Google 只希望你提升网页加载速度和兼容性，你的网站响应越快、兼容性越好，它对你的印象更好。这里列举几个我尝试的技巧：

Preconnect

也就是在你的 HTML 页面要访问资源前，增加一行preconnect代码。例如将：

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>

之前增加一行，变成：

<link rel="preconnect" href="https://cdnjs.cloudflare.com" />
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>

GPT-4 告诉我，使用preconnect可以加速资源获取速度，从而加快网页加载。

为媒体设置多分辨率

如果你的网页里使用了图像/视频，尝试增加small/middle/large三种分辨率：

<img
  srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 1800w"
  width="1242"
  height="2688"
  sizes="(max-width: 600px) 600px,
            (max-width: 1200px) 1200px,
            1800px"
  src="large.jpg"
  alt="Your image description"
/>

记得在结尾加上图片的实际width和height说明，这有利于防止网站加载时出现像素偏移。

将所有 PNG/JPEG 都替换成 WebP

PNG 换成 JPEG 不用解释了，我发现即使是压缩后的 JPEG，几乎无损地转成 WebP 之后，图像体积也减少了大概 50%。

Tailwind.css 瘦身

如果你的网站使用了Tailwind.css，会发现它的体积非常大，即使是Tailwind.min.css也有 2.8MB，但它其中包含的 99%CSS样式你的网站没有用到，GPT 是这样教我瘦身的：

npm install tailwindcss
npx tailwindcss init

新建tailwind.config.js文件，内容是：

module.exports = {
  purge: ["./src/**/*.{html,js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

打开package.json文件，写入:

{
  "dependencies": {
    "tailwindcss": "^3.3.3" # 替换成你使用的版本
  },
  "scripts": {
    "build:css": "tailwindcss build -o dist/tailwind.css"
  }

}

在命令行执行：

npm run build:css

此时，Tailwind.min.css从 2.8MB 压缩成了 14KB，给我的网站节省了至少 500ms 的加载时间。

使用 SVG icon

另一个常用的CSS文件来自awesome-font，它包含了很多 icon 资源，例如 Twitter/Github/Discord，这个CSS文件的大小是 84KB，但假如你只用到 1-2 个 icon，其实完全可以去svgrepo下载 SVG 版本，每个大概 1-2KB。用 SVG icon 替换CSS帮我节省了大概 100ms。

async / 图像懒加载

将你的不重要的script使用async的加载方式，以减少网页加载拥堵：

<script async src="https://www.googletagmanager.com/gtag/js"></script>

如果图片并不出现在网页的首屏，可以在图片资源属性中加入loading="lazy"，让网页不必等到第二屏的图像加载完成才能打开。

<img src="imgs/img.webp" ... loading="lazy" width="1200" height="640" />

我在自己的网站使用了上述这套组合优化方法，优化前后的对比是:

上图的性能分析网站是这个，是 Google 官方的产品，用它来分析哪些地方耗时非常方便。

移动友好

使用响应式设计的框架(如Tailwind CSS)，同时在桌面和移动设备上测试，确认你的网页适配这两种屏幕尺寸，让 Google 给你的网页打分更高。

以上只是 SEO 中的冰山一角，但也是目前我能够分享的全部经验，希望对你有帮助。

TLDR