iT邦幫忙

0

求解︰配合網址變換,動態修改唯一Index.html中的meta資訊

各位先進們好,小的從認識JS及React到開發已有6個月,目前開發上遇到重大問題,但求門無入,希望能借用各位前輩的智慧,助小的一臂之力。

  1. 開發環境︰
    • 前端︰React+Redux+React-Router
    • 後端︰Java Spark
    • 伺服器 & DB︰Nginx & ArangoDB
  2. 開發說明︰
    • 前端︰將所有的js檔打包成一bundle.js,並在唯一的index.html body中引入。
    • 後端︰打包含jar檔。
    • 伺服器︰目前支援前端browserHistory reload指向index.html。
  3. 問題說明︰
    切換商品頁面時,確實修改Elements的meta資料,如下圖︰
    http://ithelp.ithome.com.tw/upload/images/20161217/20103908KxOybT2OwR.png
    圖︰Google開發工具的Elements中修改後的meta資料
    但FB Sharing Debugger無法抓到已更新後的meta,所以在FB留言板貼上該商品頁連結無法正確顯示該商品頁的meta資訊,
    猜測Facebook只會抓取原始碼的meta資訊,不會抓取Elements的meta資訊。
    原始meta是寫死在唯一index.html的head中。
    求解︰請問在現有開發模式下,要如何動態修改meta資訊,並在FB留言板正確顯示更新後的meta資訊?
  4. 已嚐試但失敗的方式︰
    react的npm包,失敗原因︰僅適用Node.js開發或與同樣問題。
    在有引入Router設定的app.js中修改meta,失敗原因︰同樣問題。

謝謝各位前輩耐心的看完描述,若有不清楚或錯誤的地方,"熱情歡迎"提出指正與指導建議~謝謝大家^^

ahwachen iT邦新手 4 級 ‧ 2016-12-18 07:41:45 檢舉
如題:配合網址變換,動態修改唯一Index.html中的meta資訊

如果思考用 WebServer的[虛擬主機]方式呢?
一、對外,只有一個IP
二、外部用戶,用不同的[網址]連入
三、每一個[網址/網站]都是一個獨立的[目錄夾],也有各自獨立專屬的 index

個人淺見,不知是否有幫助
ahwachen 謝謝你,請你說的是獨立一個view的資料夾,讓每一個component.js都有各自的css及html嗎?
另外,這個方法是否要搭配node.js的server.js來控制呢?
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
kgame
iT邦新手 4 級 ‧ 2016-12-19 14:46:25
最佳解答

Facebook沒有義務幫你執行JavaScript後再來抓meta,當然是直接抓原始檔的meta

https://developers.facebook.com/docs/sharing/webmasters/crawler
伺服器端用Java判斷請求者的UserAgent是否是Facebook的facebookexternalhit或Facebot
是的話就用Java回應修改後的index.html否則丟出一般的

看更多先前的回應...收起先前的回應...

kgame 謝謝你的建議,想請問,這種作法是否有前提,如︰java負責router?或是前端的每一頁面都是由java來產生html呢?
若由java來產生html?按照目前的開發模式,前端就不能將所有的js檔打包成一bundle.js,並在唯一的index.html body中引入了呢?
小的才疏學淺,請多多包涵指教,謝謝你 :)

kgame iT邦新手 4 級 ‧ 2016-12-20 10:38:15 檢舉

當然可以打包,判斷UserAgent的目的就是要知道是不是Facebook的爬蟲,是的話就用Java回應只有Meta的HTML,其他內容都不需要,因為FB也只抓Meta,不是Facebook就正常回應純html檔

kgame iT邦新手 4 級 ‧ 2016-12-20 10:45:54 檢舉

目前的情境用Nginx的路由判斷UserAgent較合適
http://serverfault.com/questions/775463/nginx-redirect-based-on-user-agent

kgame 謝謝你,我瞭解了,
依目前的專案,由Nginx來判斷呼叫java api最為適合。
感謝你哦~~我受益良多 :)

我要發表回答

立即登入回答