vue 搜索引擎抓取（SEO）
作者：互联网
搜索引擎一般只会抓取 title 和 meta的content、h1、description 等内容
不会运行 js 。
一般需要实现这些，你可以使用 vue的服务端渲染。
如果在已经有的项目上改动。改成这个工作量就会比较大。
一般在已有的项目上想要改成，能被搜索引擎抓取，还有一种办法。
既然 搜索引擎抓取 只会抓取 title 这些，那我就在后端渲染好这些，别的都保持原样就好的。
具体怎么实现呢
你前端需要改动一些东西：
1、路由不能用 # 的模式(因为 链接 # 好后面的所以东西，服务器都无法获取)
2、需要被 搜索引擎抓取 的列表必须修改为后端渲染，如 商品列表页，跳转方式必须要有指定的 a标签链接，搜索引擎 才能往下抓
(可以很简单、如:
<ul><li><a href="链接">商品一</a></li>...</ul>可以再加一个下一页,a标签，把它们放到 id="app"里（这是后端的内容），前端最多改一下没有加载好vue前隐藏)
3、就以商品详情为例，http://baidu.com/good-info/12345 （good-info：表示是商品详情， 12345：表示商品详情编号）后台就根据这些数据渲染模板。你也可以用 ？ 的形式 /good-info?id=12345。
后端需要的改动：
1、因为路由模式改变，后端需要支持前端的路由。（如：访问 /web/??? 不管后面是什么，只要没有匹配静态资源的，都返回后端渲染的模板。这个需要一点小的改动，就是把index.html 文件改一个名字，因为如果/web/ 这样得话，默认是 index.html ，静态资源就匹配了。），这个方法如果前端没有的路由，后端一样会返回这个模板，前端需要指定一个404页面什么的，你也可以用其他方法，如：就根据前端的路由，才能匹配模板，别的返回 404。
2、更具链接获取相对应的数据，如：/good-info/12345，需要获取商品详情编号为：12345的数据，渲染模板，返回。
后端代码
const express = require('express');
const router = express.Router();
const path = require('path')
// 开放静态文件
router.use(express.static(path.join(__dirname, 'view'),{
maxage: '2h' // 缓存
}));
// 商品详情 -- 可以添加更多其他的
router.use('/good-info/:id', (req, res, next) => {
// 根据链接参数，从数据库请求数据
const obj = {
22222: {title: '22222title', h1: '标题22222'},
12345: {title: '12345title', h1: '标题12345'},
}
const id = req.params.id
req.data = obj[id]
next()
})
router.use('/', async (req, res, next) => {
// 渲染好，返回
res.render(path.join(__dirname, 'view/dome'), req.data); // req.data: {title: '我是后端渲染title', h1: '我是标题h1'}
})
module.exports = router;
模板代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= title%></title>
</head>
<body>
<h1><%= h1%></h1>
</body>
</html>
改完后，访问一下，在网页鼠标右键点击 “查看网页源代码” 能看到 title 和 h1等有内容，说明就成功了
还有很多其他的方法，比如，前后端都不用改动的，原理就像是代理，使用服务器先完成页面的渲染，然后再返回页面。
我没有具体的去找，你需要的可以自己去找一下。
希望这些，能帮助到你的。
标签：vue,req,渲染,h1,title,抓取,SEO,12345,id 来源： https://blog.csdn.net/weixin_50944805/article/details/113106929