Los motores de búsqueda generalmente solo toman el título y el meta contenido, h1, descripción, etc. No
ejecutarán js.
Por lo general, para lograr esto, puede usar la representación del lado del servidor vue.
Si realiza cambios en un proyecto existente. El cambio en esta carga de trabajo será relativamente grande.
Generalmente, si desea modificar un proyecto existente, los motores de búsqueda pueden rastrearlo, pero hay otra forma.
Dado que el motor de búsqueda solo rastreará el título, los renderizaré en el backend y dejaré todo lo demás como está.
Como lograrlo
Necesita cambiar algunas cosas en el front-end:
1. Las rutas no pueden usar el modo # (porque el enlace # es bueno, el servidor no puede obtener las cosas detrás)
2. La lista que debe ser rastreada por el motor de búsqueda debe modificarse a la representación del back-end, como la página de la lista de productos, el método de salto debe tener un vínculo de etiqueta designado y el motor de búsqueda puede rastrear
(se puede ser muy simple, como:
<ul><li><a href="链接">商品一</a></li>...</ul>puede agregar una página siguiente, una etiqueta, ponerlos en id = "app" (este es el contenido del back-end), el front-end se puede cambiar como máximo y ocultar antes de que vue sea cargado)
3. Tome los detalles del producto como ejemplo, http://baidu.com/good-info/12345 (good-info: indica detalles del producto, 12345: indica el número de detalles del producto) El fondo representa la plantilla en función de estos datos. ¿También puedes usarlo? El formulario / good-info? Id = 12345.
Cambios necesarios para el back-end:
1. Debido a que cambia el modo de enrutamiento, el back-end debe admitir el enrutamiento de front-end. (Por ejemplo: visit / web / ??? No importa lo que esté detrás, siempre que no haya un recurso estático que coincida, volverá a la plantilla de renderizado de back-end. Esto requiere un pequeño cambio, que consiste en cambiar el nombre del archivo index.html, porque si / web / Si este es el caso, el valor predeterminado es index.html y los recursos estáticos coinciden), si este método no tiene una ruta en el front-end, el back-end devolverá esta plantilla. El front-end necesita especificar una página 404 o algo así, también puede usar otros métodos, como: hacer coincidir la plantilla en función del enrutamiento del front-end y devolver 404 para otros.
2. Hay enlaces para obtener los datos correspondientes, como: / good-info / 12345, necesita obtener los datos con el número de detalle del producto: 12345, renderizar la plantilla y regresar.
Código de backend
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;
Código de plantilla
<!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>
Después de la modificación, visítela, haga clic derecho en la página web "ver el código fuente de la página web", puede ver el título y h1 y otro contenido, lo que indica que se realizó correctamente.
Hay muchos otros métodos. Por ejemplo, no es necesario cambiar los extremos frontal y posterior. El principio es como un proxy. El servidor se utiliza para representar la página primero y luego volver a la página.
No lo encontré específicamente, puedes encontrarlo tú mismo.
Espero que estos puedan ayudarte.