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

TL;DR