Phantomjs對vue進行seo優化
- 1.安裝PhantomJS
- 2.下載決議模板
- 3.設定nginx
- 4.開始測驗
1.安裝PhantomJS
-
下載 PhantomJS
1.1：從官網http://phantomjs.org/download.html下載phantomjs-2.1.1-windows.zip
1.2：解壓出來，然后添加系統環境變數：如我的檔案夾是在D:\install\phantomjs-2.1.1-windows，我們就在系統環境變數中添加：D:\install\phantomjs-2.1.1-windows\bin即可，(不會設定環境變數的可以百度下)
1.3：隨便打開一個命令視窗，運行命令phantomjs -v,如果出現版本號，則說明設定環境變數成功，
2.下載決議模板
2.1：下載地址：https://github.com/lengziyu/vue-seo-phantomjs
2.2：下載后，打開命令欄輸入npm i，先安裝下express依賴包，
2.3打開server.js檔案，設定要決議的網址：http://localhost:8000/，(等下我們用nginx開啟8000埠)，
3.設定nginx
3.1:在conf檔案夾下的nginx.conf檔案中寫上(我用的nginx版本為:nginx-1.21.1)
location / {
root html;
index index.html index.htm;
proxy_set_header Host $host:$proxy_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
if ($http_user_agent ~* "Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider") {
proxy_pass http://localhost:8081;
}
}
3.2:把html檔案夾下的index.html的內容改為：
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
</body>
<script>
document.body.innerHTML="<p>welcome to nginx</p>"
</script>
</html>
4.開始測驗
4.1:到vue-seo-phantomjs-master檔案下，啟動server.js服務：node server.js
4.2:到nginx-1.21.1檔案夾下，啟動nginx：start nginx
4.3：打開谷歌瀏覽器然后輸入：http://localhost:8000/，查看頁面源代碼，我們發現body中還是空的，和我們html寫的代碼是一樣的，這是因為我們沒有設定user-agent,沒有觸發代理，
4.4：設定user agent，按F12->右上角三個小點->More tools-Network conditions 把Use Browser default的勾選去掉，寫上Baiduspider
4.5上面設定好后，重繪下頁面，可以看到我們server服務視窗已經把決議到的代碼回傳了
在我們瀏覽器頁面查看頁面源代碼，也可以到js中的代碼已經添加到body中去了，到這里，恭喜你已經seo優化成功了！
4.7：以上是windows環境下的seo優化測驗，服務器上也差不多，后續也會出服務器上的教程，如果您對上面的內容有疑問的話，可以留言我哦~
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/292674.html
標籤：其他