投稿前にシェアカードを確認する
リンクプレビューはサイトの第一印象です。共有する前に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は表示しますが取得はしません。