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

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

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

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

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

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

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

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

<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カードの種類を指定します。 summary_large_imageタイプは、大きな画像プレビューを含む短い要約を表示します。
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カードに似ています。HTMLドキュメントの<head>にある<meta>タグです。 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" />

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

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

Open Graphプロトコルの詳細については、公式のOpenGraphプロトコルWebサイトを参照してください。

Webページのメタデータのテスト

メタタグがWebサイトでどのように表示されるかをプレビューするために使用できるツールがいくつかあります。 Open Graph Debugger は、TwitterカードとOpen Graphの両方の情報を表示する非公式のシミュレーターであり、使用するためのアカウントは必要ありません。

次の公式バリデーターはすべて、使用する前にサービスにログインする必要があります。

他の多くのサイトにも同様のツールがあります。サイトまたはコミュニティがあなたまたはあなたのビジネスにとって重要である場合は、開発者向けドキュメントを探して、テスト用の同様のサービスを提供しているかどうかを確認してください。

これで、さまざまなソーシャルサイトでリッチリンクフォーマットを表示するための最小限のメタデータセットを設定する方法をマスターしました。詳細については、TwitterカードおよびOpenGraphのドキュメントを参照してください。