4

ユーザーが無制限の組み合わせで画像とコンテンツを生成できる静的サイトがあります。ユーザーが作業を完了すると、パーマリンクが生成され、Facebook/Twitter/GooglePlus/etc で自分の作品を共有できるようになります。共有投稿にユーザーの画像とコンテンツを含めたいのですが、ソーシャル メディア ボットは私のパーマリンクから HTML メタ タグのみを解析し、Javascript を評価しないことがわかりました。

ユーザーのコンテンツを共有ソーシャル メディアの投稿に表示するにはどうすればよいですか? パーマリンクがクリックされると、クライアント側の Javascript がパーマリンクのクエリ パラメータを評価し、ユーザーのコンテンツをレンダリングします。Twitter や FB が投稿のコンテンツを入力するために使用する HTML メタ タグ内のユーザーのコンテンツもレンダリングできますが、ボットは JavaScript を評価しないため、メタ タグはレンダリングされません。

私が検討した解決策の 1 つは、事前レンダリングです。おそらく私のパーマリンクは、AWS S3 バケット上の HTML ファイルの場所であり、ユーザーがパーマリンクを共有するとすぐに作成できます。S3 上の HTML ファイルにはユーザー固有のメタ タグを含めることができ、それをソーシャル メディア ボットに提供できます。そして、そのファイルにアクセスすると、パーマリンクにリダイレクトできます。これは合理的に思えますか？これを試した後、私は戻って報告することができます。

もう 1 つの解決策は、 https://prerender.io/などの事前レンダリング サービスを使用することです。少しかさばってブラックボックス化されているように見えますが、上記の S3 ソリューションよりも堅牢で信頼性が高い可能性があります。何か案は？

私はフィードバックやその他の解決策を受け入れており、どんな提案も素晴らしいでしょう.

その他の関連情報:

この回答は興味深いようです。これには、Facebook Javascript SDK のアクティブ化が含まれます: https://stackoverflow.com/a/34178987/1884158

また、Twitter の Card Validator や Facebook の Share Debugger などのツールについても認識しています: https://cards-dev.twitter.com/validator https://developers.facebook.com/tools/debug/ はテストに役立ちます。任意のソリューション。

それが役に立てば、私のサイトは HTML/CSS/JS にバンドルされ、クライアント上で完全にレンダリングされる React アプリです。

4

1 に答える 1

3

この問題の適切な解決策は見つかりませんでしたが、別のサービスをセットアップすることを含む回避策/ハックを思いつきました。これが私が思いついたサービスです: https://github.com/mapseed/sharing/blob/master/share.js

静的サイトが でホストされている場合、 でexample.com実行されているサーバーをスピンアップして、sharing.example.comリクエストを受け入れ、リクエストを からsharing.example.com/my/routeにリダイレクトしexample.com/my/routeます。ただし、ここで行っているように、リクエストにuser-agentソーシャル メディア クローラーと一致する HTTP ヘッダーが含まれている場合は、ここで行っているように、メタ タグのみを含む html ページを返します。

ただし、このアプローチにはいくつかの制限があります。

  • ソーシャル メディアで共有するリンクは、サブドメインを指す必要がありますsharing.example.com。これにより、当社のサービスは、リクエストがソーシャル メディア ボットからのものである場合は適切なメタ タグを含む HTML ページを返し、それ以外の場合はリクエストを当社のexample.comWeb サイトにリダイレクトすることができます。

  • メタ タグのコンテンツを生成するために、共有可能なリンクには、メタ タグに入力するすべての情報を渡すためのクエリ パラメータが必要です。たとえば、共有可能なリンクは次のようになりますsharing.example.com/post/my-post?title=my-title&desc=my-description。これは、共有可能なリンクがかなり長くなる可能性があることを意味します。クエリ パラメータから情報を抽出し、メタ タグを使用して HTML テンプレートに挿入する方法は、https ://github.com/mapseed/sharing/blob/master/share.js#L18-L27 で確認できます。

これらの制限が許容できる場合、このソリューションは非常にうまく機能します。sharing.example.com共有されるリンクは、当社の Web サイトではなくからのものであるため、SEO のマイナス面もあることに注意してくださいexample.com。

また、このサービスを実行するには、追加のサーバーを起動する必要があります。ただし、この実装を AWS Lambda などのサーバーレス アーキテクチャに移行できるはずです。

于 2018-05-31T04:30:19.963 に答える