這篇文章主要介紹在不使用ssr的情況下如何解決Vue單頁面SEO問題,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于做網(wǎng)站、網(wǎng)站建設(shè)、陽谷網(wǎng)絡(luò)推廣、小程序定制開發(fā)、陽谷網(wǎng)絡(luò)營銷、陽谷企業(yè)策劃、陽谷品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們最大的嘉獎(jiǎng);創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供陽谷建站搭建服務(wù),24小時(shí)服務(wù)熱線:18980820575,官方網(wǎng)址:bm7419.com
遇到的問題:
近來在寫個(gè)人博客的時(shí)候遇到了大家可能都會(huì)遇到的問題
Vue單頁面在SEO時(shí)顯得很無力,尤其是百度不會(huì)抓取動(dòng)態(tài)腳本
Vue-Router配合前后端分離無法讓meta標(biāo)簽在蜘蛛抓取時(shí)動(dòng)態(tài)填充
Vue單頁面又是大勢(shì)所趨,寫起來也不止是一個(gè)爽,當(dāng)然也可以選擇多頁面
但即使是多頁面在面對(duì)文章和文檔時(shí)候也不可能說給每篇文章生成個(gè)Vue頁面
SSR當(dāng)然能解決這個(gè)問題,但是仔細(xì)想想SSR不就跟以前的.php頁面一樣了么
都是預(yù)先拉取所有數(shù)據(jù)然后填充返回給瀏覽器,需要多消耗服務(wù)器資源,而且配置繁瑣
當(dāng)然預(yù)渲染也不能解決這個(gè)問題
那么問題來了,我只是想讓百度抓取下我的動(dòng)態(tài)文章,但是配置個(gè)繁瑣的SSR并不是最好選擇
我的解決辦法:
既然只是想讓百度抓取下我的動(dòng)態(tài)文章,其實(shí)就是讓蜘蛛抓取我的靜態(tài)頁面時(shí)候,html的meta標(biāo)簽是已經(jīng)填充好的
那么就很簡(jiǎn)單了,我們只需要實(shí)現(xiàn)一個(gè)極其簡(jiǎn)單的閹割版的SSR不就好了么
PS:我百度了很久沒有找到相關(guān)的文章,不知道是不是我百度的姿勢(shì)不對(duì)?
具體思路:
因?yàn)槲业姆?wù)器后端語言是php,service是nginx,所以我這里展示的所有后端代碼都是基于php,大家當(dāng)然可以選擇nodejs或者其他的語言去實(shí)現(xiàn),這里提供個(gè)簡(jiǎn)單的思路
上面說到我們要實(shí)現(xiàn)個(gè)閹割版SSR,其實(shí)就是在服務(wù)器有請(qǐng)求過來的時(shí)候在靜態(tài)html的meta標(biāo)簽上填充好數(shù)據(jù)然后返回給請(qǐng)求端
這里的實(shí)現(xiàn)都是基于已經(jīng)構(gòu)建好的Vue單頁面,所以請(qǐng)先構(gòu)建好一個(gè)Vue單頁面
先把構(gòu)建好的dist下的index.html改造下
在頂部將變量拿取到,因?yàn)榻涌诙际乾F(xiàn)成的,所以偷個(gè)懶直接調(diào)取接口
<?php $valDescription = '前端入門,進(jìn)階總結(jié)記錄,個(gè)人日志博客,分享web學(xué)習(xí)經(jīng)驗(yàn)的小窩。'; $valKeywords = 'web窩,前端,vue,js,博客,JavaScript,css,入門,教程'; $valTitle = 'web窩'; /** * 發(fā)送HTTP請(qǐng)求方法 * @param string $url 請(qǐng)求URL * @param array $params 請(qǐng)求參數(shù) * @param string $method 請(qǐng)求方法GET/POST * @return array $data 響應(yīng)數(shù)據(jù) */ 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 ); /* 根據(jù)請(qǐng)求類型設(shè)置特定參數(shù) */ 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('不支持的請(qǐng)求方式!'); } /* 初始化并執(zhí)行curl請(qǐng)求 */ $ch = curl_init(); curl_setopt_array($ch, $opts); $data = curl_exec($ch); $error = curl_error($ch); curl_close($ch); if($error) throw new Exception('請(qǐng)求發(fā)生錯(cuò)誤:' . $error); return $data; } //分割當(dāng)前請(qǐng)求的路徑 $urlExp = explode('/',$_SERVER['REQUEST_URI']); //如果當(dāng)前的路徑是文章內(nèi)容 if(count($urlExp)>2 && $urlExp[1] == 'article'){ //請(qǐng)求當(dāng)前文章的標(biāo)題和描述 $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; } ?>
將拿到的數(shù)據(jù)輸出到meta標(biāo)簽上
<meta name="description" content="<?php echo $valDescription; ?>"/> <meta name="keywords" content="<?php echo $valKeywords; ?>"/> <title><?php echo $valTitle; ?></title>
然后把文件名改為index.php
寫的很糙,反正就只有這一個(gè)功能,先扔到這
我的service是nginx,Vue-Router是history模式,所以當(dāng)有html請(qǐng)求過來的時(shí)候我把所有原先轉(zhuǎn)向index.html的請(qǐng)求都轉(zhuǎn)向到了index.php
這樣就實(shí)現(xiàn)了個(gè)閹割版的SSR
效果就像這樣 web窩
每篇文章刷新的時(shí)候相應(yīng)的meta標(biāo)簽都會(huì)提前填充好數(shù)據(jù)
配合nginx實(shí)現(xiàn)Vue-Router的history模式
當(dāng)然只有history模式才有SEO的意義
只需要將nginx配置里原先轉(zhuǎn)向index.html的地方改為index.php即可,Apache同理
location / { index index.php; alias /var/www/html/blog/; try_files $uri $uri/ /index.php; }
關(guān)于后端接口請(qǐng)求的問題
因?yàn)槲易约壕鸵慌_(tái)服務(wù)器,后端語言是php
php所用的框架也需要偽靜態(tài)
所以我的解決方式是用nginx配置根據(jù)二級(jí)域名,去代理所訪問的路徑
類似靜態(tài)資源訪問的都是cdn的二級(jí)域名,接口的請(qǐng)求訪問的都是api的二級(jí)域名
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; }
當(dāng)然你可以簡(jiǎn)單的用請(qǐng)求的路徑去配置
server { listen 80; listen 443 ssl; server_name cdn.linkvall.cn; root /var; location ~ ^/api/ { alias /var/api; } location ~ ^/blog/ { alias /var/blog/; } }
這樣就可以把各自的資源路徑區(qū)分開
寫在最后
本來是打算用nodejs實(shí)現(xiàn)的,寫一個(gè)npm包,跑一個(gè)node進(jìn)程,然后nginx把請(qǐng)求反向代理到node端口,這樣看上去更優(yōu)雅
不過轉(zhuǎn)念一想我的后端是php,直接代理到這個(gè)php文件可以省去寫npm包的時(shí)間,就是構(gòu)建好的html還要每次都更改下有一點(diǎn)點(diǎn)費(fèi)勁,而且不優(yōu)雅
這里更多的是提供一個(gè)思路,后面有時(shí)間了或許我會(huì)寫一個(gè)npm包優(yōu)雅的實(shí)現(xiàn)它
以上是“在不使用ssr的情況下如何解決Vue單頁面SEO問題”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章標(biāo)題:在不使用ssr的情況下如何解決Vue單頁面SEO問題
標(biāo)題網(wǎng)址:http://bm7419.com/article48/pdhhhp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、云服務(wù)器、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站排名、品牌網(wǎng)站設(shè)計(jì)、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)