Angular 2+ 社交分享鏈接預覽

Question

我正在開發一個 Angular 4 應用程序，它具有根據不同標准生成不同反饋表單鏈接的功能。 因此，它每天可以生成數百或數千個鏈接。

我想做的是使所有這些鏈接在社交共享方面變得豐富，即每個鏈接如果粘貼在 facebook 等社交媒體上，它應該能夠具有特定於該表單的元數據，即所有鏈接都將具有不同的表單名稱和描述. 當鏈接粘貼到 facebook、twitter 等時，應獲取每個鏈接特定數據。

如何接近這個要求。 如何實施？ 提前致謝。

Answer 1

您需要實施兩件事來解決問題：

1. 在 index.html 頁面上實現 Open Graph Tags。 您需要根據通過 angular 中的元服務將用戶路由到的 URL 更改這些元標記。 有關詳細信息，請參閱 URL https://alligator.io/angular/meta-tags/
2. 使用 Angular Universal 發布此使用服務器端渲染。
3. 使用 Facebook 調試器驗證生成的內容。

如果您的項目無法實現 SSR（由於 static 服務器），那么上述幾點將不適用於 facebook、twitter、linkedin、whatsapp。

您需要 go 解決方案，例如： Angular 4 - 為 Facebook 動態更新元標記（打開圖表）

1. 代理渲染。 預渲染.io
2. .htaccess 與 PHP。