适用于：
Vue3
Vite
Cloudflare
OpenResty / Nginx
静态网站 / SPA
导航站
博客
音乐站
一、SEO 是什么？
SEO（Search Engine Optimization）：
即：
搜索引擎优化
作用：
让 Google / Bing：
能发现你的网站
能读取你的网站
能收录你的网站
能在搜索结果里展示你的网站
二、网站上线 ≠ SEO完成
很多新人认为：
网站能打开 = 上线成功实际上：
搜索引擎才是真正的验收员
真正需要：
三、网站架构（本文环境）
本文环境：
Vue3 + Vite
Cloudflare
OpenResty / Nginx
SPA 单页应用域名示例：
https://ivano.cyou四、SEO 初期最容易踩的坑
1. 所有错误页面跳回首页
错误情况：
https://ivano.cyou/abcdefg
→ 自动跳转首页这是：
Soft 404
Google 非常不喜欢。
会导致：
收录变慢
页面权重下降
sitemap 异常
正确情况
https://ivano.cyou/abcdefg
→ 显示404页面五、Vue Router 正确配置 404
文件：
src/router/index.js正确配置：
import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home.vue";
import NotFound from "@/views/NotFound.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/:pathMatch(.*)*",
name: "NotFound",
component: NotFound,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;六、创建 404 页面
文件：
src/views/NotFound.vue示例：
<template>
<div class="not-found">
<h1>404</h1>
<p>页面不存在</p>
</div>
</template>
<style scoped>
.not-found
{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
</style>七、robots.txt 配置
作用：
告诉搜索引擎：
哪些页面允许抓取
sitemap 在哪里
文件位置（非常重要）
必须：
public/robots.txt不是：
项目根目录也不是：
Windows桌面🤣
robots.txt 内容
User-agent: *
Allow: /
Sitemap: https://ivano.cyou/sitemap.xml八、sitemap.xml 配置
作用：
告诉 Google：
网站有哪些页面
文件位置
public/sitemap.xmlsitemap.xml 内容
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://ivano.cyou/</loc>
</url>
</urlset>九、子域名注意事项（非常重要）
错误写法：
https://music.ivano.cyou/
https://blog.ivano.cyou/放入：
https://ivano.cyou/sitemap.xml❌ 不规范
原因
Google 认为：
music.ivano.cyou属于：
独立网站
正确做法
主站 sitemap：
https://ivano.cyou/十、Vite SEO 配置
文件：
index.html推荐：
<title>Ivano - Personal Homepage</title>
<meta
name="description"
content="Ivano 的个人主页，包含博客、音乐、云盘与技术分享。"
/>
<meta
name="keywords"
content="Ivano,个人主页,博客,音乐,云盘"
/>
<meta name="robots" content="index,follow" />
<link rel="canonical" href="https://ivano.cyou/" />十一、OpenGraph 配置（分享卡片）
作用：
分享到：
Telegram
Discord
QQ
Twitter
Facebook
会显示预览卡片。
推荐：
<meta property="og:title" content="Ivano" />
<meta
property="og:description"
content="个人主页 / 音乐 / 博客 / 云盘"
/>
<meta
property="og:image"
content="https://ivano.cyou/logo.png"
/>
<meta property="og:url" content="https://ivano.cyou/" />
<meta property="og:type" content="website" />十三、Cloudflare 推荐配置
DNS
推荐：
开启小黄云（代理）SSL/TLS
推荐：
Full (strict)Speed
开启：
Brotli
Auto Minify
不建议开启
Rocket LoaderVue 容易炸。
🤣
十四、OpenResty / Nginx SPA 配置
推荐：
location /
{
try_files $uri $uri/ /index.html;
}为什么？
因为：
Vue Router 需要前端接管路由。
十五、build 是真正上线
很多新人踩坑：
本地修改后直接访问公网❌ 不会生效
正确流程
1
修改代码
2
执行：
npm run build3
上传：
dist/里的文件。
十六、如何测试 SEO(无痕模式下访问)
robots.txt
访问：
https://ivano.cyou/robots.txt应该：
直接显示文本。
sitemap.xml
访问：
https://ivano.cyou/sitemap.xml应该：
显示 XML。
curl 测试
curl -I https://ivano.cyou/sitemap.xml应该：
200 OK十七、Google Search Console
官网：
添加站点
推荐：
Domain不是 URL Prefix。
DNS 验证
Google 会给 TXT 记录：
google-site-verification=xxxxxCloudflare 添加 TXT
DNS
→ Add Record
→ TXT十八、提交 sitemap
进入：
Sitemaps提交：
https://ivano.cyou/sitemap.xml十九、URL Inspection（非常重要）
进入：
网址检查输入：
https://ivano.cyou/点击：
请求编入索引二十、成功状态
出现：
网址可编入 Google 索引说明：
SEO 基础成功
🚀
二十一、Bing 提交
官网：
推荐方式
直接：
Import from Google Search Console无需重复验证。
二十二、为什么网站一直不被收录？
最常见原因：
1. 网站没内容
Google 不喜欢：
只有动画的空壳主页🤣
2. SPA JS 太重
Vue SPA：
初始 HTML 几乎为空。
Google：
需要额外执行 JS。
3. 新域名
新站正常：
3~14天二十三、提高收录速度的方法
添加真实内容
例如：
关于页
博客
技术文章
项目介绍
添加外链
例如：
GitHub
Telegram
Reddit
社交媒体
更新频率
Google 喜欢：
活跃网站
二十四、后期推荐（高级SEO）
预渲染（推荐）
安装：
npm install vite-plugin-prerender或者：
npm install vite-ssg为什么？
Vue SPA：
SEO 天生较弱。
Prerender 可以：
加快收录
提高 SEO
提高 Lighthouse 分数
二十五、最终网站上线检查表
二十六、总结
网站 SEO 真正核心：
不是：
页面炫不炫而是：
搜索引擎能不能：
正确访问
正确理解
正确索引
正确展示
对于 Vue + Vite 网站：
SEO 最大难点：
SPA
因此：
robots
sitemap
meta
prerender
尤其重要。
本文为个人学习记录，转载请注明出处：[万俟季先生的个人博客](https://miloaether.loc.cc)