メタ データを使用してソーシャル メディア画像を設定する

主要なソーシャル メディア プラットフォームはすべて、Open Graph プロトコルを読み取ることができます。より豊富で一貫した機能を共有できるようにするために、2010 年に Facebook によって導入されました。

データは Web サイトのヘッド セクションに配置する必要があり、多数の個別の項目が含まれています。以下にタグの一部を公開しました。以下の 4 項目が最低限必要です。そうでないと、画像が正しく表示されない場合があります。

• og:タイトル
• og:タイプ
• og:画像
• og:url

LinkedIn は、プレビューに表示される内容の主な指標として Open Graph プロトコルを使用します。

以下のリンクで LinkedIn が使用する画像を表示できます。他のユーザーが共有するページで使用するメタデータも更新する必要があります。

制約

画像の幅が 200px 未満の場合、投稿の左側にサムネイルとして表示されます。

画像は 1.91:1 の比率で提供するのが最適です。

Facebook は、OpenGraph プロトコルを、プレビューに表示される内容の主な指標として使用します。

彼らが提供するページには、多くの興味深い統計とページ上の画像も表示されます.

制約

画像は 200 ピクセル x 200 ピクセル以上である必要があります。

og:image:height と og:image:width を追加して、画像の表示にかかる時間を高速化します。

Twitter は独自のメタ データ セットを使用しますが、OpenGraph タグも取得できます。

私たちのサイトでは、標準のタグと、より大きな画像を表示する追加の twitter のみのタグを使用しています。

Twitter バリデーターは、データがチェックされるとキャッシュを更新するため、その時点以降のすべての共有を更新する必要があります。

キャッシュを完全に更新するには、数回の更新が必要になる場合があります。

制約

テキストの上に画像を表示するには、「twitter:card」と「summary_large_image」を使用します。また、画像は 300 ピクセル x 157 ピクセル以上である必要があります。