這一系列文總共有三篇,這是第二篇。
上一篇解決了 social network 抓取 head tag 裡面的 title, og data 等問題,但其實還有 search engine 要解決,因為 social network 只看 head,但 search engine 除了 head 以外也會看 body,所以這篇要來解決 body 一模一樣的問題。
傳統的 web 開發方式通常是一條龍開發 (你就是那條龍!),後端取得資料庫的內容,然後組成 HTML 之後丟到瀏覽器上顯示。現代的 web 開發方式通常就是一個前端配一個後端,後端專注於把資料送給前端,前端專注於取得資料後在瀏覽器上面顯示漂漂亮亮的。而傳統方式稱為 server side rendering (SSR),現代方式就稱為 client side rendering (CSR)。兩者開發方式各有優缺,蠻多文章有提過,這裡也就不另外說明了。
比較簡單判斷 CSR/SSR 的方式可以直接在你想知道的網頁,按下 Ctrl+u (Windows, Linux) 打開原始碼,看看實際上顯示的內容跟原始碼是不是差異過大。如果網頁內容很豐富,但原始碼才十幾二十行而已,那可以很粗略的說這是 CSR,如果基本上一致那就可以說是 SSR。
而 search engine 就是靠著原始碼把網頁內容做索引,所以如果谷歌大神到 CSR 的網站爬網頁內容,最後爬到的 body 當然都是同一份內容,這樣子對於 SEO 上是不合格的,所以這裡就要分享一下 Funliday-旅遊規劃 是如何處理這塊的。
第一種方式,可以用 VAR 這三套前端框架各自支援的 SSR 方案來處理,像是 Nuxt.js, Next.js, Angular Universal,這些內容已經有許多前輩分享,這裡就不另外說明了。但要注意一點,就是導入這類的解決方案通常會影響到原本的開發模式,像是 webpack 跟 bootstrapping 的方式就一定會動到,小編是建議對框架真的很熟悉之後,再來用這方式會比較好。
第二種方式,就是這次的重頭戲 prerender 了。prerender 也不是什麼魔法,就是一句話「讓爬蟲看到它應該要看的內容」。如圖所示,當 Nginx 收到 request 之後,發現 user agent 是 googlebot 就轉送到 prerender service,如果是一般 request 就直接丟到後面原本的 web server。
而 prerender service 接到 request 之後,就執行 headless chrome (用程式控制沒介面的 Google Chrome),把原本的網頁用 CSR 處理完之後,再把 HTML 的完整資料傳回給 googlebot,這樣子就達到「讓爬蟲看到它應該要看的內容」的功能了。原本的程式完全不用改,只要在 Nginx 做處理就可以了,也是負擔相對較小的方式。
另外,用了 prerender 之後,原本第一篇為了 title, og data 所做的調整也可以拿掉了。因為 CSR 本來就可以改 title, og data,所以避免重複做一樣的事,app.get("*") 這個 route 裡面關於 metadata 的功能也可以直接刪掉了。
那為什麼還會有第三篇?因為 Funliday 實際在應用 prerender.io 似乎有些問題,所以我們就改成自己寫 prerender 了,原因下回說明。
* Prerender.io:https://prerender.io
#prerender #funliday
同時也有1部Youtube影片,追蹤數超過3萬的網紅LKNim,也在其Youtube影片中提到,Donate : https://www.twitchalerts.com/donate/lknim FB Page : https://fb.com/lknim Desktop PC : CPU : Intel Xeon X5670 6C12T [email protected] VGA : Nvidia GT...
「windows server nginx」的推薦目錄:
- 關於windows server nginx 在 Kewang 的資訊進化論 Facebook 的最佳貼文
- 關於windows server nginx 在 紀老師程式教學網 Facebook 的最佳解答
- 關於windows server nginx 在 LKNim Youtube 的精選貼文
- 關於windows server nginx 在 NGINX SSL in Windows Server 2019 (WIN10) issue! --HTTPS 的評價
- 關於windows server nginx 在 常用的Nginx Config 與相關指令教學: 四大步驟入門網站架設 的評價
- 關於windows server nginx 在 Restart Nginx Windows - gists · GitHub 的評價
windows server nginx 在 紀老師程式教學網 Facebook 的最佳解答
NginX! 最猛的 HTTP 伺服器換人做做看!
提起 HTTP 伺服器,您會想到哪個名字?Apache?IIS?告訴大家最近這兩年竄紅的 HTTP 伺服器:「NginX」(念成 Engine-X)!
NginX 最厲害的在於它的效能!它占的記憶體比 Apache 少,跑網頁比 Apache 快!目前全世界的市佔率雖然只有 12.18%,但它竄起的速度非常可怕!很有可能「做」掉 Apache,登上王者寶座!
雖然 HTTP 伺服器的架設與程式設計沒什麼太大的關聯,不過有個好的 HTTP 伺服器,我們寫起 PHP 等網頁語言,也比較能執行迅速,不是嗎?
NginX 架設教學文:
http://blog.faq-book.com/?p=6725
NginX Wikipedia:
http://zh.wikipedia.org/wiki/Nginx
NginX 官方網站:
http://wiki.nginx.org/Main
windows server nginx 在 LKNim Youtube 的精選貼文
Donate : https://www.twitchalerts.com/donate/lknim
FB Page : https://fb.com/lknim
Desktop PC :
CPU : Intel Xeon X5670 6C12T [email protected]
VGA : Nvidia GTX960 OC
RAM : DDR3 1600 24GB
SSD : Crucial MX100 512GB
OS : Windows 10 Pro 64bit build 10240
Boardcast SW : Open Boardcasting Software MultiPlatform 0.12.0 64bit
Mobile Phone :
Model : Google Nexus 5
OS : Android 6.0 Build MPA44G
Output : Slimport SP1003
Capture : Startech USB3HDCAP

windows server nginx 在 常用的Nginx Config 與相關指令教學: 四大步驟入門網站架設 的推薦與評價
Linux、Windows 主機安裝與指令; 伺服器管理與程式發佈; Nginx Config 基礎設定: 反向代理(proxy pass)、https 設定; Nginx 效能優化設定(HTTP 快 ... ... <看更多>
windows server nginx 在 Restart Nginx Windows - gists · GitHub 的推薦與評價
Restart Nginx Windows. GitHub Gist: instantly share code, notes, and snippets. ... <看更多>
windows server nginx 在 NGINX SSL in Windows Server 2019 (WIN10) issue! --HTTPS 的推薦與評價
... <看更多>