web-dev-qa-db-ja.com

ソーシャルメディアで共有すると、URLはメタデータをレンダリングしません

React .net coreにクライアント側のレンダリングでreactを使用してプロジェクト（Webアプリケーション）を構築しました。

メタタグを動的に割り当てるために、react-helmetを使用しました。

問題は、アプリがブラウザーでレンダリングされるときです。ブラウザは、初期ロード時に静的HTMLのみを取得します。これには、設定した動的メタタグが含まれていません。ただし、検査すると、「要素」の下にそれらのメタタグが表示されます。

また、WhatsAppやFacebookなどのソーシャルメディアで共有するためにこれらのURLを使用する場合、URLはメタデータを正しくレンダリングしません。

私たちの問題の解決策を探してみましたが、私たちが遭遇した最も明白な答えは、代わりにサーバー側レンダリングを試すことでした。それはわかりますが、アプリを展開する準備ができているときに、この時点で試してみるのは解決策ではありません。

私たちが遭遇した他のものは、「react-snap」、「react-snapshot」でしたが、react-snapでうまくいかず、Reactのバージョンを16+にアップグレードする必要があります。 「

ハイドレートは機能ではありません

（水和物は反応ドムに関係します）

React-snapshotを使用すると、react .netコアで適切に機能するために必要な必要なタイプ定義が見つかりませんでした。

次の可能性のあるステップを案内してください（プリレンダーなどの有料のものを除く）？

主な目標：ソーシャルアプリケーションは、URLを貼り付ける/共有するときにメタデータをレンダリングする必要があります。

reactjstypescriptvisual-studio-2017meta-tagssocial-media
11
Prasaad Patil

Prerenderが唯一のソリューションです。「prerender」というノードの依存関係を使用しました-> https://github.com/prerender/prerender

これは、http要求を行うWebサーバーを有効にして動作します。ブール値に値を割り当てる：window.prerenderReady = true;ウェブサイトでは、ページが「写真を撮る」準備ができたときにサーバーに通知し、準備ができたらHTMLを返します。すべてのサイトのURLを解析し、それらのHTMLコンテンツをファイルに保存する簡単なスクリプトをプログラムする必要があります。それらをサーバーにアップロードし、.htaccessまたは同様のターゲットを使用して、クローラーの外部ヒットfacebook、twitterbot、googlebotなどを表示し、事前レンダリングされたバージョンと「実際のサイト」を残りのユーザーエージェントに表示します。

それは私のために働いた。

5
Becario Senior

Open Graph のメタタグは、URLをフェッチするときにクライアントに送り返されるHTMLに存在する必要があります。ブラウザまたはボットは、アプリがクライアント側でレンダリングされてメタタグが何であるかを判別するまで待機しません。これらは、最初にロードされたHTMLのみを確認します。

Open Graphメタデータのコンテンツをdynamicにする必要がある場合（URL、デバイス、ブラウザなどに応じて異なるコンテンツを表示）、追加する必要があります react-meta-tags のようなものをサーバーコードに追加します。

反応メタタグライブラリにはタイプ定義はありませんが、独自に追加できます。少し注意が必要かもしれませんが、開始するには 公式ドキュメント と 提供されているテンプレート を確認してください。

動的である必要がない場合は、インデックスの<head>- tagの静的な部分にタグを追加できます.html。

2
maxpaj

今日も同じ問題がありました。私には2つのReactこれを必要とするWebアプリケーションがありました。解決方法は次のとおりです。

  1. プレビュー画像をパブリックフォルダーに配置します
  2. 引き続きパブリックフォルダーで、index.htmlを開き、<meta property="og:image" content="preview.png"/>または<meta property="og:image" content="%PUBLIC_URL%/preview.png"/>という行を追加します。

https://www.linkedin.com/post-inspector/ にアクセスして、機能するかどうかを確認します。

これが役に立てば幸いです！

1
yukiyao