OGPリンクカードプレビュー

使い方

1. リンクのタイトル、説明文、画像のアドレス、ページのアドレス（og:url）を入力します。
2. Twitterカードの種類（twitter:card）を選び、サイト名があればサイト名（og:site_name）を入力します。
3. または、ページのmetaの行を貼り付け欄に貼り付け、貼り付けたタグを読み取るを押して、入力欄を埋めます。
4. 6つのリンクカードと、その下の注意を読み、コピーまたはダウンロードを押して、headのタグを受け取ります。

リンクカードが読むタグ

Open Graphのプロトコルは、og:title、og:type、og:image、og:urlを必須のプロパティとして挙げ、og:descriptionとog:site_nameは任意としています。ツールは、フォームが尋ねない必須の値であるog:typeを、常にwebsiteとして書きます。

• LinkedInのヘルプセンターは、共有の欄がタイトル、説明文、画像をoEmbedかOpen Graphのマークアップ（またはその両方）から取ると説明しています。
• Slackのガイドは、Slackが一般的なOpen GraphとX（旧Twitter）のカードのメタデータを探すと説明しています。
• Facebookは、少なくとも1200 × 630ピクセルの画像を推奨し、縦横比を1.91対1に近く保つよう勧めています。

画像の大きさと、ツールが確かめること

Facebookの共有のガイドは、少なくとも1200 × 630ピクセルを推奨し、ファイルは8 MBを超えてはならないとしています。ツールが画像の大きさを読めるのは、この端末で画像を選んだときだけです。入力したアドレスは読み込まれないためです。

選んだ画像は1200 × 630ピクセルと比べられ、違う場合は注意が出ます。タグには、インターネット上にある画像のアドレスが必要です。それは、画像のアドレスの欄に入力してください。

ページのタグを貼り付ける

ページのmetaの行を貼り付けると、そこから入力欄が埋まります。ツールが読むのはog:とtwitter:のタグだけで、同じ項目については、og:の値がtwitter:の値より優先されます。貼り付けた文章は別の文書で読まれ、このページに置かれることはありません。

リンクカードとは

各カードは、一般的なリンクカードの形をした汎用のレイアウトです。上に画像がある形、横に画像がある形、吹き出し、バーのあるブロックなどです。色は中立で、ロゴは示しません。どのサービスのカードの複製でもありません。このページがサービスの働きを説明するときは、そのサービスの公式ページを挙げます。

よくある質問