リンクプレビューを構成するタグ
誰かがあなたのリンクを投稿やメッセージに貼り付けると、アプリがクローラーをそのページに送り、<head> 内のいくつかの <meta> タグを読み取ります。これらのタグは Open Graph プロトコルに由来し、そのうち4つが必須とされています。
- og:title：プレビューに表示されるタイトル。
- og:type：ページの種類。
websiteはほとんどのページに適し、articleはブログ記事に適しています。プロトコルではprofile、book、video.movie、music.songなどのタイプも定義されています。 - og:image：ページを表す画像の URL。
- og:url：正規 URL。プロトコルではオブジェクトの恒久的な ID と呼ばれています。
プロトコルではオプションのタグも定義されており、このジェネレーターは有用なものを記述します：og:description、og:site_name、そして画像の詳細 og:image:width、og:image:height、og:image:alt。代替テキストについてプロトコルは明確で、ページが og:image を指定する場合は og:image:alt も指定すべきとされており、そのテキストはキャプションではなく画像の内容を説明するものです。
X が加えるもの：twitter:card
X も Open Graph を読み取ります。その カードマークアップリファレンス（X の開発者向けドキュメントで、元のページが現在リダイレクトされるため Internet Archive 経由でリンクしています）には各タグのフォールバックが記載されています：twitter:title は og:title、twitter:description は og:description、twitter:image は og:image、twitter:image:alt は og:image:alt にフォールバックします。そのため追加する価値のある唯一のタグは twitter:card で、これがレイアウトを選択します。これを省くと、たとえ大きなカードを使いたくても、同リファレンスによれば X は小さなサマリーカードにフォールバックすることがあります：
- summary_large_image：タイトルの上に全幅の画像を表示します。X の 大きな画像カードのページによると、この画像は2:1のアスペクト比に対応し、最小300 × 157、最大4096 × 4096ピクセル、5MB未満で、JPG、PNG、WEBP、GIF 形式とされています。SVG はサポートされていません。
- summary：正方形の画像を含む小さめのカードです。X の サマリーカードのページによると、画像は1:1の比率に対応し、144 × 144から4096 × 4096ピクセルまでで、すべてのプラットフォームで正方形に切り抜かれます。
同じリファレンスにはappカードとplayerカードも記載されていますが、アプリストアや動画プレーヤーの追加フィールドが必要なため、ここでは対象外としています。また、上のチェックで使っている上限も記載されています。タイトルは70文字、説明は200文字、代替テキストは420文字です。
各プラットフォームが示す画像サイズ
- LinkedIn: ウェブサイトを共有可能にするガイドでは
og:title、og:image、og:description、og:urlを求めており、最大ファイルサイズ5 MB、最小1200 × 627ピクセル、推奨比率1.91:1としています。 - Meta: 共有のベストプラクティスでは、高解像度画面向けに幅1080ピクセル以上、画像リンク広告を表示するには幅600ピクセル以上の画像を使うよう推奨しています。同じページでは
og:image:widthとog:image:heightも求めており、これによりクローラーは画像を先にダウンロードして処理することなく、すぐにレンダリングできます。
1200 × 630の画像はこれらすべてを満たします。LinkedIn の1200 × 627以上、Meta の1080超の幅をクリアし、比率は1.905:1で、X の2:1から5%以内に収まります。
チェックして、古いプレビューを更新する
アプリはスクレイピングした内容をキャッシュするため、タグを修正しても、すでに保存されたプレビューは直りません。主要な2つのネットワークにはそのためのツールがあります。
- Meta の Sharing Debugger は、クローラーがスクレイピングするタグをエラーや警告とともに表示し、再スクレイピングを実行します。Meta の ウェブマスターガイドで説明されており、ベストプラクティスのページには、それ以外の場合スクレイピングされたコンテンツは通常24時間周期で更新されると記載されています。
- LinkedIn の Post Inspector はキャッシュされたURLを更新します。LinkedIn のヘルプページには、この更新は新しい投稿にのみ反映され、すでにそのURLを含む投稿は古いプレビューのままだと記載されています。
このツールが行わないこと
このツールはあなたのページや画像を取得しないため、実際に公開されている内容は確認できず、上のプレビューはレンダリングではなくテキストのスケッチです。タグは書き出しますが、サイト側はそれをページの <head> 内、つまりクローラーが受け取るHTMLとして配信する必要があります。あとから JavaScript で追加されたタグは認識されないことがあります。また、このツールは app や player のカード、book や video.movie などの種類が定義する追加プロパティは書き出しません。
手作業で書きたくない場合
Hermoso はマーケティングを自動運転にします。あなたの市場ですでに成果を上げている広告をリサーチし、ブランドに合った画像・動画広告を作成し、投稿をスケジュールし、ご自身の広告アカウントで有料キャンペーンを実行します。ウェブアプリで動作するほか、MCP サーバーを通じて Claude、ChatGPT、Cursor の中でも利用できます。
無料ツール: UTMリンクビルダー · QRコードジェネレーター · SNSサイズガイド
よくある質問
どの Open Graph タグが必須ですか？
Open Graph プロトコルは4つの必須プロパティを挙げています。og:title、og:type、og:image、og:url です。og:description、og:site_name、および og:image の width、height、alt タグは任意ですが、追加する価値があります。
og: タグがあれば twitter:title と twitter:image は必要ですか？
いいえ。X のカードマークアップリファレンスによると、twitter:title、twitter:description、twitter:image、twitter:image:alt は対応する og: の値にフォールバックします。追加する価値があるのは twitter:card で、カードのレイアウトを選択します。
Open Graph 画像のサイズはどれくらいがよいですか？
LinkedIn は少なくとも 1200 × 627 ピクセル、1.91:1、5 MB 未満を求めています。Meta は幅を少なくとも 1080 ピクセルにすることを推奨しています。X の大きい画像カードは 300 × 157 から 4096 × 4096 までの 2:1 に対応しています。1200 × 630 の画像なら3つすべてに収まります。
タグを変更したのに、リンクにまだ古い画像が表示されるのはなぜですか？
アプリが古いスクレイプをキャッシュしたためです。Meta の Sharing Debugger または LinkedIn の Post Inspector で URL を通し、再取得してください。LinkedIn は、すでにその URL を共有している投稿は古いプレビューを保持すると注記しています。
出力で引用符やアンパサンドが変わっているのはなぜですか？
タグが有効なままになるよう HTML エスケープされています。Tom & Jerry's "Sale" のようなタイトルは content 属性の中で Tom & Jerry's "Sale" となり、ブラウザやクローラーは元のテキストとして読み取ります。
このツールは画像を読み込みますか？
いいえ。入力した内容はどこにも送信されず、画像 URL も取得されません。そのためプレビューには画像ではなくプレースホルダーが表示されます。