Google Vue SEO 是指通過(guò)一系列技術(shù)手段來(lái)改善從 Vue.js 等單頁(yè)面應(yīng)用（Single Page Application，SPA）生成的網(wǎng)站在搜索引擎上的排名和曝光度。在 SPA 中，頁(yè)面內(nèi)容動(dòng)態(tài)加載，對(duì)于搜索引擎爬蟲(chóng)而言，很難獲取到整個(gè)頁(yè)面的實(shí)際內(nèi)容，進(jìn)而影響搜索引擎對(duì)網(wǎng)站的評(píng)價(jià)和搜素結(jié)果的排名。
在此背景下，Vue.js 團(tuán)隊(duì)在 Vue 2.0 版本中引入了 Vue SSR（Server-Side Rendering）功能，通過(guò)在服務(wù)器端生成網(wǎng)頁(yè) HTML 內(nèi)容并返回給客戶端的方式，讓搜索引擎爬蟲(chóng)和普通瀏覽器訪問(wèn)網(wǎng)頁(yè)時(shí)都能夠獲取到完整的頁(yè)面內(nèi)容，提高了網(wǎng)站在搜索引擎上的可見(jiàn)性。
// 示例代碼
// server.js
const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) =>{
const app = new Vue({
data: {
url: req.url
},
template: `訪問(wèn)的 URL 是：{{ url }}`
})
renderer.renderToString(app, (err, html) =>{
if (err) {
res.status(500).end('服務(wù)器內(nèi)部錯(cuò)誤')
return
}
res.end(`Hello ${html}`)
})
})
server.listen(8080)在使用 Vue SSR 后，開(kāi)發(fā)者也需要注意一些 SEO 相關(guān)的細(xì)節(jié)問(wèn)題，如友好的 URL 結(jié)構(gòu)、合適的標(biāo)題和 Meta 信息等，以提高網(wǎng)站的用戶體驗(yàn)和搜索引擎的搜索結(jié)果質(zhì)量。
總的來(lái)說(shuō)，Google Vue SEO 是實(shí)現(xiàn) SPA 網(wǎng)站對(duì)搜索引擎友好的一種解決方案，借助 Vue SSR 和相關(guān) SEO 技巧，可讓搜索引擎更好地理解和展示 SPA 網(wǎng)站的頁(yè)面內(nèi)容。