谈解决无ssr的Vue单页SEO问题(2)

上一篇文章说vue单页解决了SEO的问题

只是用php预处理了元标签

但是还是没有内容填充，所以在内容抓取方面还是有一些弱点，只是从零开始解决问题

然后，您可以进一步预填充内容

预填内容

这里仍然使用Php

首先，提取php中要填充的数据、列表或特定内容

修改拉取数据部分

$ URLexp=explot('/'，$ _ SERVER[' REQUEST _ URI '])；if(count($ URL exp)2 $ URL exp[1]==' article '){//article page提取内容$ ret=@ JSON _ decode(http _ req(' http://127 . 0 . 0 . 1/API/blog/getsingletlist '，['tuid。if($ ret){ $ valKeywords=$ ret[' info '][0][' TT ']','.$ valKeywords$ VAlDescription=$ ret[' info '][0][' txt ']'- '.$valTitle。'.$ valDescription$ valTitle=$ ret[' info '][0][' TT ']'- '.$ valTitle$ info=$ ret[' info '][0][' info ']；$textData=@file_get_contents('您的文章路径')？$ valDescription} else { $ textData=' none}}if(！$textData){ //列表页拉列表$ ret=@ JSON _ decode(http _ req(' http://127 . 0 . 0 . 1/API/blog/getlist '，['page'=1，' type'=0 '，' post ')，true)if($ ret){ $ textData=' '；foreach($ ret[' info ']as $ key=$ val){ $ text data。=' title : '。$val['tt']'。$textData。=' description : '。$val['txt']。'.'；$textData。='创建时间： '。$val['ctime']。'.'；$textData。='浏览次数： '。$val['fl']。'.'；}}}然后在html部分输出相关内容

在尸体上打个叉，把它藏起来

div class=' pre-view ' style=' position : absolute；z指数：-99999；opa city 3360 0；top :-9999 px；left: -9999px？php echo $ textData？/div，这样爬虫就可以抓取我们的内容，而不会影响前端呈现

优化vue构建

之前的构建是在构建完成后将html修改为php，这有点愚蠢

只需在此处更改网络包的配置

修改build/webpack.prod.conf

新的html webpackplugin({ filename : config . build . index，//此处更改为index.php模板3360' index.php '，inject : true，minify : { removecomments : true，collapseWhitespace: true，removeattributequots : true//更多选项：//https://github.com/kangax/html-minifier # options-快速引用}，//必须与多个

构建： {//index.html//It模板更改为Index索引：路径。'解析(_ _ dirname './dist/index.php ')。//path assetroot : path . resolve(_ _ dirname，'./dist ')、assetsSubDirectory: ' static '、assetpublipath : ' http://cdn . linkvall.cn/'、productionSourceMap: true、devtool: '#source-map '、productionGzip: false、productiongzipxextension 3360[' js '，' css']、BundleAnalyzerReport: true }所以构建时的入口文件变成了index.php，构建后的页面入口也是index.php

最终效果

当爬虫更新后，我们会找到我们的文章

写在最后

目前主要用php实现，实现起来比较简单。它对像我这样的后端很友好。如果您再次使用节点来监控端口，您需要额外的开销和额外的能量来维护它。如果后端是纯节点，最好使用node或者直接配置SSR。建议使用骨骼屏幕进行主页渲染。以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。