我們有一個VueJS網路應用，它顯示了一個地圖位置，并在地圖上超級強加資產。
URL結構是htts://example.app/#/MapInfoAsALongHashString
如果一個URL被共享，HashString將被處理&；地圖/資產的位置將被相應地生成。
到目前為止，一切都很好 - 但是當人們共享 URL 時，我們希望頁面元資料/OpenGraph 資訊能夠反映地圖的位置。例如，頁面標題可能包括地圖位置的名稱，或者關于正在顯示的資產的資訊。
這樣，當 URL 被共享時，任何自動生成的預覽（即 Slack、Facebook Messenger、Twitter 等）都會提供足夠有用的背景關系，以準確描述該鏈接。
我們遇到的問題是，應用程式需要進行大量的 API 呼叫（即從長/寬坐標中獲取位置名稱）&；在完成這些呼叫時，預覽已經生成，從而忽略了動態資訊。
作為參考，我們正在使用這個服務來測驗預覽。https://metatags.io/
是否有辦法推遲預覽的生成，直到相關資訊被回傳？
到目前為止，看起來鏈接預覽只使用作為應用容器加載的初始 HTML。即使是在 VueJS 應用程式中動態地改變頁面標題而不呼叫任何 API 也不會被接收。https://metatags.io/
通過VueJS顯示動態元資料/OpenGraph資訊的最佳方式是什么，用于鏈接預覽？
uj5u.com熱心網友回復：
你的猜測是正確的。大多數預覽只使用最初的HTML。這是SPA最大的缺點之一
。歸根結底，這是一個服務器端的問題。你需要檢測請求是否是由機器人發出的（慶幸的是，他們沒有隱藏它），并以某種方式在回應中包含 opengraph meta 標簽。
這可以從 vue 應用程式中單獨完成（畢竟不需要渲染主體，但您仍然需要從您的服務中實作資料聚合），或者您可以在 vue 路由器/頁面組件掛鉤中使用服務器端渲染與頭部改變邏輯。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/332741.html
標籤：