Search engines generally only grab title and meta content, h1, description, etc. They
will not run js.
Generally need to achieve these, you can use vue server-side rendering.
If you make changes to an existing project. Change to this workload will be relatively large.
Generally, if you want to change an existing project, it can be crawled by search engines. There is another way.
Since the search engine crawling will only crawl the title, then I will render these on the backend, and leave everything else as it is.
How to achieve it
You need to change a few things on the front end:
1. Routing can't use the # mode (because the link # is good, the server can't get it)
2. The list that needs to be crawled by the search engine must be modified to the back-end rendering, such as the product list page, the jump method must have a designated a tag link, and the search engine can crawl down
(it can be very simple, such as:
<ul><li><a href="链接">商品一</a></li>...</ul>you can add A next page, a tag, put them in id="app" (this is the content of the back-end), the front-end can be changed at most and hidden before vue is loaded)
3. Take product details as an example, http://baidu.com/good-info/12345 (good-info: indicates product details, 12345: indicates product details number) The background renders the template based on these data. You can also use it? The form /good-info?id=12345.
Changes required for the back-end:
1. Because the routing mode has changed, the back-end needs to support the routing of the front-end. (For example: visit /web/??? No matter what is behind, as long as there is no matching static resource, it will return to the back-end rendering template. This requires a small change, which is to change the name of the index.html file, because if / web/ If this is the case, the default is index.html, and the static resources are matched.), if this method does not have a route on the front end, the back end will return this template. The front end needs to specify a 404 page or something, you can also use other Methods, such as: match the template based on the front-end routing, and return 404 for others.
2. There are links to get the corresponding data, such as: /good-info/12345, you need to get the data with the product detail number: 12345, render the template, and return.
Backend code
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;
Template code
<!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>
After the modification, visit it, right-click on the webpage "view webpage source code", you can see the title and h1 and other content, indicating that it is successful
There are many other methods. For example, the front and back ends do not need to be changed. The principle is like a proxy. The server is used to render the page first, and then return to the page.
I didn't find it specifically, you can find it yourself.
Hope these can help you.