投稿前にシェアカードを確認する

リンクプレビューはサイトの第一印象です。共有する前にOGタグが何を出すか見ます。

このガイドで使う道具

やりたいこと

ページのheadマークアップを貼るかog:/twitter:フィールドを入力すると、チャットやタイムラインが出すカード(タイトル・説明・画像・サイト名)を近似表示します。

貼るか入力

og:title・og:description・og:image・og:site_name・twitter:cardなどを貼ったHTMLから抽出します。欠けたフィールドはカードの空白になります。

具体例

og:imageのない記事はテキストのみのカードになります。Slackでリンクが寂しく見える原因はたいていこれです。200文字超のog:descriptionは切り捨て位置が見えます。

対応範囲

レイアウトの近似です。各プラットフォームは画像を別々に切り抜き、Discord/Slack/Xで細部が違います。og:imageのURLは表示しますが取得はしません。