HTMLを使用してWebページにTwitterカードを追加してGraphソーシャルメタデータを開く方法

getdocs

2年前

ソーシャルメディアプラットフォームでリンクを共有すると、プレーンテキストではなく、豊富な画像と適切にフォーマットされたタイトル、要約、およびリンクが表示されることがよくあります。たとえば、Twitterがこのチュートリアルシリーズへのリンクを表示する方法は次のとおりです。

特定の情報を含めることで、これらのリッチメディアソーシャル共有機能をサイトに追加できます <meta> のタグ <head> あなたのHTMLドキュメントの。このメタデータのフォーマット方法を決定する主な標準は、TwitterカードとOpenGraphプロトコルの2つです。

このチュートリアルでは、TwitterカードとOpenGraphの両方のメタデータをWebページに追加する方法を学習します。

TwitterカードのメタデータをWebページに追加する

Twitterカードは、サービスでリンクが共有されている場合にリッチテキスト、画像、およびビデオを表示するためにTwitterで使用されるメタデータ仕様です。

完全なTwitterカードマークアップ仕様には多くのオプションがありますが、最も基本的な情報から始めて、そこから拡張することができます。

基本的なTwitterカードのメタデータをサイトに追加するには、次のように配置します <meta> 既存の間にタグ <head> と </head> タグ：

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@digitalocean" />
<meta name="twitter:title" content="Sammy the Shark" />
<meta name="twitter:description" content="Senior Selachimorpha at DigitalOcean" />
<meta name="twitter:image" content="https://html.sammy-codes.com/images/large-profile.jpg" />

強調表示された部分は、必ず自分の情報で更新してください。追加した各タグを見ていきましょう。

twitter:card：このタグは、表示するTwitterカードの種類を指定します。 The summary_large_image typeは、大きな画像プレビューを含む短い要約を表示します。
twitter:site：Twitterのユーザー名、またはサイトや会社のユーザー名。
twitter:title：カードで使用したいタイトル。これはあなたがあなたに入れたものと一致する可能性があります <title> タグですが、そうする必要はありません。
twitter:description：タイトルの下に表示されるページの簡単な説明。これは最大200文字である必要があり、表示時にさらに切り捨てられる場合があります。
twitter:image：表示する画像。ほとんどの標準画像形式（JPG、PNG、GIF）を使用できますが、サイズは5MB未満である必要があります。画像は自動的にトリミングされてさまざまなサイズのカードに表示される場合があるため、メインの焦点を中央に配置することをお勧めします。

このメタデータは、次のようなTwitterカードになります。

その他のTwitterカードのタグとオプションの詳細については、公式のTwitterカードのドキュメントにアクセスしてください。

WebページへのOpenGraphメタデータの追加

Open Graphプロトコルは、多くのWebサイトがユーザーにリッチリンクプレビューを表示するために使用するメタデータのオープンスタンダードです。 Facebook、LinkedIn、Pinterestなどのサイトは、OpenGraphを使用してリンクを表示します。

Open Graphのマークアップは、Twitterカードに似ています。 <meta> のタグ <head> あなたのHTMLドキュメントの。 OpenGraphタグの最小限のセットを以下に示します。

<meta property="og:type" content="article" />
<meta property="og:title" content="Sammy the Shark" />
<meta property="og:description" content="Senior Selachimorpha at DigitalOcean" />
<meta property="og:url" content="https://html.sammy-codes.com/" />
<meta property="og:image" content="https://html.sammy-codes.com/images/large-profile.jpg" />

これらのタグを <head> HTMLドキュメントの、必要に応じて強調表示された部分を更新します。必要なタグは次のとおりです。

og:type：説明されているコンテンツの「タイプ」。いくつか type 例は article, book、と profile. 詳細については、公式のog：typeドキュメントを参照してください。
og:title：ページのタイトル。これは <title> あなたのページの、またはあなたはリンク共有のために特別にそれを調整することができます。
og:description：ページの簡単な説明。文字数の制限はありませんが、この目的のためのTwitterの200文字の制限は良いガイドラインです。
og:url：ページの永続的な（ canonical ）URL。
og:image：ページに関連付ける画像。