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

← ブログ一覧へ

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

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

完全な一組を、説明ではなく生成で。 メタタグ生成に項目を入れると、こうなります(前半のみ表示):

<title>Free Online Toolbox</title>
<meta name="description" content="Image and PDF converters that run in your browser.">
<link rel="canonical" href="https://yunknow.cc/">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Free Online Toolbox">
<meta property="og:description" content="Image and PDF converters that run in your browser.">

ここから持ち帰る価値がある点が 2 つ。og:type が入っています —— 最も忘れられやすいタグで、これが無いとカード自体を作らないクローラーもあります。そしてカウンターは「Title 19 chars」「Description 50 chars」と表示します。Open Graph のタイトルは、多くのフィードで HTML よりずっと早く切り詰められるからです。

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

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

  • 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 にすると小さな正方形サムネイルになります。

以下は、私たちのメタタグジェネレーターが5 つのフィールドから生成した完全な一組です:

<title>Free Online Toolbox</title>
<meta name="description" content="Image and PDF converters that run in your browser.">
<link rel="canonical" href="https://yunknow.cc/">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Free Online Toolbox">
<meta property="og:description" content="Image and PDF converters that run in your browser.">
<meta property="og:url" content="https://yunknow.cc/">
<meta property="og:image" content="https://yunknow.cc/og.png">
<meta property="og:site_name" content="Yunknow">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Online Toolbox">
<meta name="twitter:description" content="Image and PDF converters that run in your browser.">
<meta name="twitter:image" content="https://yunknow.cc/og.png">

注目すべき点が 3 つ。og:type があること —— 最も忘れられがちなタグで、Facebook がこれを website と補うのはクローラーの気分次第です。twitter:card が summary_large_image であること —— 横長プレビューが出るのはこれのおかげで、省くと小さな正方形になります。そして説明が名前空間ごとに 3 回繰り返されていること —— どの利用側も他の名前空間の分を読まないからです。

重要なサイズと長さ

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

フィールド横のカウンターは、みなが飛ばす部分です。あのタイトルは Title 19 chars、説明は Description 50 chars と報告しました。この 2 つの数値はタグ一覧より重要です。Facebook と LinkedIn はカード内で長いタイトルを切り、説明が約 60 文字未満だと、まるごと捨てられてページの最初の段落に差し替えられることがよくあります。フィールドの幅ではなく、カウンターに合わせて書いてください。

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

プラットフォームはフォールバックの順で探します。画像はまず 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