vue 搜索引擎抓取（SEO）

2024-02-01 22:20:34

搜索引擎一般只会抓取 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等有内容，说明就成功了

还有很多其他的方法，比如，前后端都不用改动的，原理就像是代理，使用服务器先完成页面的渲染，然后再返回页面。
我没有具体的去找，你需要的可以自己去找一下。
希望这些，能帮助到你的。

码农公寓

相关文章