メインコンテンツへスキップ
Yunknow Toolbox

← ブログ一覧へ

Open Graph とメタタグ:リンクプレビューを本当に決めるもの

チャットにリンクを貼ったり SNS に投稿したりすると、整ったカード——画像・見出し・要約——が現れます。そのカードは、ページの HTML にあるメタタグから組み立てられます。正しく設定すればリンクはどこでもきれいに見え、省けば素っ気ない URL か、適当に切り取られた画像になります。

二種類のタグ、二つの役割

よく一緒くたにされますが、読む側のシステムが違います:

  • SEO メタタグ——<title> と <meta name="description">。Google などの検索エンジンが結果に表示するものです。
  • Open Graph タグ——og:title・og:description・og:image・og:url・og:type。Facebook が作り、今や事実上の標準で、多くのプラットフォーム(LINE・LinkedIn・Slack・Discord)がリンクプレビューに使います。
  • Twitter Card タグ——twitter:card など。X は Open Graph をフォールバックとして読みますが、小さなサムネイルか大きなバナーかは twitter:card が決めます。

三つとも入れておきたいところです。メタタグ生成ツールなら一つのフォームでまとめて埋められ、一つずつ手書きせずに済みます。

最小限のタグ一式

<head> に貼ってそのまま調整できる中核はこれです:

<title>ページのタイトル</title>
<meta name="description" content="ページの一文要約。">

<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの一文要約。">
<meta property="og:image" content="https://example.com/preview.png">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="website">

<meta name="twitter:card" content="summary_large_image">

注意:Open Graph タグは property=、SEO の description と Twitter タグは name= を使います——ここを取り違えると、タグが黙って効かなくなる典型例です。summary_large_image は大きなバナー、summary にすると小さな正方形サムネイルになります。

重要なサイズと長さ

  • タイトル——検索結果で切り詰められないよう、およそ 50〜60 文字を目安に。
  • 説明——同じ理由で 150〜160 文字程度。
  • og:image——1200×630 ピクセル(1.91:1)が大きなプレビューの安全なサイズ。必ず 絶対 URL(https://…)を使い、相対パスは避けます。

画像と文言を決めているもの

プラットフォームはフォールバックの順で探します。画像はまず og:image、次に twitter:image、両方なければページの <img> から推測します——見当違いのロゴや広告が出るのはこのためです。文言も同じで、og:title は素の <title> に優先し、og:description は meta description に優先します。

サイズの下限も効きます。多くのプラットフォームはおよそ 200×200 ピクセル未満の画像を無視するか小さなサムネイルに縮めるため、アイコン大の画像ではタグをどう書いても大きなカードになりません。ちょうど 1200×630 にしたいなら、画像を切り抜く方法が手順を解説しています。

プレビューが更新されない理由

最もよくあるいらだち:タグを直してリンクを再共有したのに、古いプレビューのまま。これはタグの不具合ではなく、SNS が最初に URL を見たときにプレビューをキャッシュするからです。各プラットフォームの公式デバッガ(例:Facebook Sharing Debugger)で強制的に取り直せば、新しいカードが現れます。

壊れたプレビューのデバッグ

カードがおかしいときは、URL を各プラットフォームの公式デバッガにかけます——Facebook Sharing Debugger と LinkedIn Post Inspector はどちらもその場で再取得し、実際に読み取ったタグを一覧表示するので、クローラーに見えているものが分かります。何も出ないときのよくある原因:

  • og:image が相対パス、または画像がログインの内側にあり、クローラーが取得できない。
  • ページや画像が公開されていない、あるいは robots.txt がクローラーを弾いている。
  • タグが <body> にある、またはクローラーが実行しない JavaScript で挿入されている。

原因を直してデバッガで一度取り直せば、修正後のカードは以降リンクを共有する全員に伝わります。

タグを置く場所

これらはすべて HTML の <head> 内に置きます。<body> ではありません。多くのサイトビルダーや CMS には「カスタム head」やページごとの SEO 欄があり、そこに貼れます。

関連ツール

  • 同じページの JSON-LD 構造化データを整えるなら JSON 整形を。
  • その SNS 用画像を作るなら、まず画像を切り抜きで 1200×630 に。

#seo#web