2023-07-23

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

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

制作网站

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

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

Google search result for 「chat ai」

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 结果里找到靠前的文章，向他们发邮件请求添加你的网站。因为他们是测评网站，所以不会排斥多加个链接，如果你的产品足够好，也许就能被收录。

Google结果排名第一的文章

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

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

挑选 AI 列表网站

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

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

上面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 了。

结果仅次于OpenAI官网

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

来自 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%。

JPEG转成WebP，清晰度不变，图片体积折半

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 中的冰山一角，但也是目前我能够分享的全部经验，希望对你有帮助。

TL;DR