随着前端技术的不断发展，越来越多的网站采用了 SPA（Single Page Application）架构，这种架构可以提高用户体验，但同时也带来了一些 SEO（Search Engine Optimization）上的挑战。因为搜索引擎爬虫只能看到页面的 HTML 和 CSS，而 SPA 通常是通过 JavaScript 动态生成页面内容的，这就导致搜索引擎难以识别页面内容，影响了 SEO。
那么，如何在 SPA 中实现 SEO 优化呢？下面我们就来介绍一些技巧。
1. SSR（Server-Side Rendering）
SSR 是指在服务器端将页面渲染成 HTML 后再返回给浏览器，而不是在浏览器端通过 JavaScript 动态生成页面。这样搜索引擎爬虫就可以直接获取到页面内容，提高了 SEO。
下面是一个基于 React 的 SSR 示例代码：
// javascriptcn.com 代码示例
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';
function renderFullPage(html, preloadedState) {
return `
<!doctype html>
<html>
<head>
<title>My SPA</title>
</head>
<body>
<div id="root">${html}</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
</script>
<script src="/bundle.js"></script>
</body>
</html>
`;
}
function handleRender(req, res) {
const html = ReactDOMServer.renderToString(<App />);
const preloadedState = { /* 从服务器获取数据并存储在 preloadedState 中 */ };
res.send(renderFullPage(html, preloadedState));
}
app.get('*', handleRender);2. 预渲染（Prerendering）
预渲染是指在构建时生成静态 HTML 页面，用户访问时直接返回静态页面，而不是通过 JavaScript 动态生成页面。这种方法虽然不如 SSR 灵活，但对于一些不需要频繁更新的内容，可以提高 SEO。
下面是一个基于 Vue 的预渲染示例代码：
// javascriptcn.com 代码示例
const express = require('express');
const path = require('path');
const fs = require('fs');
const { createBundleRenderer } = require('vue-server-renderer');
const app = express();
const template = fs.readFileSync(path.resolve(__dirname, 'index.template.html'), 'utf-8');
const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'), {
template,
clientManifest: require('./dist/vue-ssr-client-manifest.json')
});
app.get('*', (req, res) => {
const context = { url: req.url };
renderer.renderToString(context, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error');
return;
}
res.end(html);
});
});
app.listen(8080);3. 动态路由（Dynamic Routing）
动态路由是指根据用户请求的 URL 动态生成内容，这样可以让搜索引擎爬虫更容易识别页面内容，提高 SEO。下面是一个基于 React Router 的动态路由示例代码：
// javascriptcn.com 代码示例
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
function App() {
return (
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
);
}4. Meta 标签优化
在 SPA 中，由于页面内容是动态生成的，因此需要通过 Meta 标签告诉搜索引擎页面的标题、描述和关键字等信息，以便搜索引擎更好地理解页面内容。下面是一个基本的 Meta 标签示例：
<head> <title>My SPA</title> <meta name="description" content="这是我的 SPA 网站" /> <meta name="keywords" content="SPA, React, SEO" /> </head>
总结
通过 SSR、预渲染、动态路由和 Meta 标签优化等技巧，可以在 SPA 中实现 SEO 优化，提高网站的搜索排名和流量，同时也可以提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655717ffd2f5e1655d186801