在不使用ssr的情况下解决Vue单页面SEO问题

遇到的问题:

近来在写个人博客的时候遇到了大家可能都会遇到的问题
Vue单页面在SEO时显得很无力，尤其是百度不会抓取动态脚本
Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充
Vue单页面又是大势所趋，写起来也不止是一个爽，当然也可以选择多页面
但即使是多页面在面对文章和文档时候也不可能说给每篇文章生成个Vue页面
SSR当然能解决这个问题，但是仔细想想SSR不就跟以前的.php页面一样了么
都是预先拉取所有数据然后填充返回给浏览器，需要多消耗服务器资源，而且配置繁琐
当然预渲染也不能解决这个问题
那么问题来了，我只是想让百度抓取下我的动态文章，但是配置个繁琐的SSR并不是最好选择

我的解决办法:

既然只是想让百度抓取下我的动态文章，其实就是让蜘蛛抓取我的静态页面时候，html的meta标签是已经填充好的
那么就很简单了，我们只需要实现一个极其简单的阉割版的SSR不就好了么
PS：我百度了很久没有找到相关的文章，不知道是不是我百度的姿势不对?

具体思路:

因为我的服务器后端语言是php，service是nginx，所以我这里展示的所有后端代码都是基于php，大家当然可以选择nodejs或者其他的语言去实现，这里提供个简单的思路
上面说到我们要实现个阉割版SSR，其实就是在服务器有请求过来的时候在静态html的meta标签上填充好数据然后返回给请求端

这里的实现都是基于已经构建好的Vue单页面，所以请先构建好一个Vue单页面

先把构建好的dist下的index.html改造下
在顶部将变量拿取到，因为接口都是现成的，所以偷个懒直接调取接口


<?php$valDescription = '前端入门,进阶总结记录,个人日志博客,分享web学习经验的小窝。';
$valKeywords = 'web窝,前端,vue,js,博客,JavaScript,css,入门,教程';
$valTitle = 'web窝';/*** 发送HTTP请求方法* @param  string $url    请求URL* @param  array  $params 请求参数* @param  string $method 请求方法GET/POST* @return array  $data   响应数据*/
function http_Req($url, $params, $method = 'GET', $header = array("Content-type: text/html; charset=utf-8"), $multi = false){if($method == 'POST'){$header = ["Content-type: application/x-www-form-urlencoded"];}$opts = array(CURLOPT_TIMEOUT        => 30,CURLOPT_RETURNTRANSFER => 1,CURLOPT_SSL_VERIFYPEER => false,CURLOPT_SSL_VERIFYHOST => false,CURLOPT_HTTPHEADER     => $header);/* 根据请求类型设置特定参数 */switch(strtoupper($method)){case 'GET':$opts[CURLOPT_URL] = $url . '?' . http_build_query($params);break;case 'POST'://判断是否传输文件$params = $multi ? $params : http_build_query($params);$opts[CURLOPT_URL] = $url;$opts[CURLOPT_POST] = 1;$opts[CURLOPT_POSTFIELDS] = $params;break;default:throw new Exception('不支持的请求方式！');}/* 初始化并执行curl请求 */$ch = curl_init();curl_setopt_array($ch, $opts);$data  = curl_exec($ch);$error = curl_error($ch);curl_close($ch);if($error) throw new Exception('请求发生错误：' . $error);return  $data;
}
//分割当前请求的路径
$urlExp = explode('/',$_SERVER['REQUEST_URI']);
//如果当前的路径是文章内容
if(count($urlExp)>2 && $urlExp[1] == 'article'){//请求当前文章的标题和描述$ret = json_decode(http_Req('http://127.0.0.1/api/Blog/getsinglelist',['tuid'=>$urlExp[2]],'POST'),true);$valKeywords = $ret['info'][0]['tt'].','.$valKeywords;$valDescription = $ret['info'][0]['txt'].' - '.$valTitle.','.$valDescription;$valTitle = $ret['info'][0]['tt'].' - '.$valTitle;
}
?>

将拿到的数据输出到meta标签上


<meta name="description" content="<?php echo $valDescription; ?>"/>
<meta name="keywords" content="<?php echo $valKeywords; ?>"/><title><?php echo $valTitle; ?></title>

然后把文件名改为index.php
写的很糙，反正就只有这一个功能，先扔到这
我的service是nginx，Vue-Router是history模式，所以当有html请求过来的时候我把所有原先转向index.html的请求都转向到了index.php
这样就实现了个阉割版的SSR
效果就像这样 web窝
每篇文章刷新的时候相应的meta标签都会提前填充好数据

配合nginx实现Vue-Router的history模式

当然只有history模式才有SEO的意义
只需要将nginx配置里原先转向index.html的地方改为index.php即可，Apache同理


location / {index  index.php;alias /var/www/html/blog/;try_files $uri $uri/ /index.php;
}

关于后端接口请求的问题

因为我自己就一台服务器，后端语言是php
php所用的框架也需要伪静态
所以我的解决方式是用nginx配置根据二级域名，去代理所访问的路径
类似静态资源访问的都是cdn的二级域名，接口的请求访问的都是api的二级域名


server {listen       80;listen      443 ssl;server_name  cdn.linkvall.cn;root         /var/blog;
}
server {listen       80;listen      443 ssl;server_name  api.linkvall.cn;root         /var/api;
}

当然你可以简单的用请求的路径去配置


server {listen       80;listen      443 ssl;server_name  cdn.linkvall.cn;root         /var;location ~ ^/api/ {
alias /var/api;
}location ~ ^/blog/ {
alias /var/blog/;
}
}

这样就可以把各自的资源路径区分开

写在最后

本来是打算用nodejs实现的，写一个npm包，跑一个node进程，然后nginx把请求反向代理到node端口，这样看上去更优雅
不过转念一想我的后端是php，直接代理到这个php文件可以省去写npm包的时间，就是构建好的html还要每次都更改下有一点点费劲，而且不优雅
这里更多的是提供一个思路，后面有时间了或许我会写一个npm包优雅的实现他

在不使用ssr的情况下解决Vue单页面SEO问题相关推荐

vue index.html 缓存,解决vue单页面回退页面 keeplive 缓存问题
场景:项目中遇到 vue 点击回退从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1 ...
nginx配置解决vue单页面打包文件大，首次加载慢的问题
nginx配置解决vue单页面打包文件大,首次加载慢的问题参考文章: (1)nginx配置解决vue单页面打包文件大,首次加载慢的问题 (2)https://www.cnblogs.com/golo ...
正规方程法在矩阵不可逆的情况下解决办法
正规方程法在矩阵不可逆的情况下解决办法: 数据中有多余的特征例如数据中有两组特征是线性相关的,此时需要删除其中一组特征. 特征数大于样本数删除部分特征数据
秒杀系统并发情况下解决超卖问题
非分布式秒杀系统并发情况下解决超卖问题乐观锁防止超卖 / 令牌桶限流/ redis缓存 /接口限流/接口加盐/单用户限制访问频率/消息队列异步处理订单 #数据库表drop table if exi ...
m_Orchestrate learning system---九、在无法保证是否有图片的情况下，如何保证页面格式...
m_Orchestrate learning system---九.在无法保证是否有图片的情况下,如何保证页面格式一.总结一句话总结:都配上默认缩略图就可以解决了 1.如何获取页面get方式传过来 ...
vue xss 存在_默认情况下，Vue是否为XSS提供安全性或防御XSS？
我试图找出如何保护, 角度的 Vue 反应抵抗XSS攻击.当我访问Angular官方文档时, , 它说: 为了系统地阻止XSS错误,默认情况下,Angular将所有值视为不可信.当通过属性,属性,样 ...
谷歌打印html界面布局方法(当一页展示不完的情况下,在新的页面展示)
最近在写打印html 界面遇到了一些问题,一下是我们解决方案,希望对你有用. 第一个是如何强制分页.比如我们有章节性的内容的时候,在某章节结束后,下一章节另起新的一页. 第二个问题是,关联性较强的内容 ...
解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部在我们写路 ...
给大家推荐一个Vue 单页面程序无法SEO的解决办法
给大家推荐一个vue 单页面搜索引擎无法SEO的解决办法这两天用Vue3做了一个免费下载书籍的小网站,https://book.usejs.cn:大家可以先看下效果前端项目做完.部署了之后想让搜索 ...

在不使用ssr的情况下解决Vue单页面SEO问题

遇到的问题:

我的解决办法:

具体思路:

配合nginx实现Vue-Router的history模式

关于后端接口请求的问题

写在最后

在不使用ssr的情况下解决Vue单页面SEO问题相关推荐

最新文章

热门文章