hermoso
ログイン 登録する
MCP & CLI
API料金
ログイン 登録する
ブログ

リンクプレビューの表示がおかしい理由と、Open Graphでの直し方

共有したリンクに画像が出ない、タイトルが違う、先月の写真が出る。こうした症状は、たいてい次の6つの原因のどれかです。それぞれの症状、直し方、そしてFacebookとLinkedInにページを取得し直させる方法を解説します。

Hermoso チーム·2026年11月2日·6分で読めます

新しいランディングページのリンクを共有したところ、プレビューに画像がなく、トップページのタイトルが出るか、2つ前のキャンペーンのバナーが出てきた。ページ自体は問題ありません。プレビューは別のものから作られています。ページのheadにある数行のコードで、ほとんどの人はふだん目にすることがありません。

この記事では、ほとんどの壊れたプレビューの背景にある6つの原因を、確認すべき順に解説します。タグを自動で作ってほしい場合は、無料のOpen Graph generatorを使うと、タグを作成し、適切にエスケープして、下記の上限値に照らして検証してくれます。

リンクプレビューの仕組み

リンクを投稿やメッセージに貼り付けると、アプリがクローラーをそのページに送ります。クローラーは<head>内の<meta>タグを読み取り、そこからカードを描画します。これらのタグはOpen Graphプロトコルによるもので、必須の4つを定めています。

  • og:title: カードに表示させたいページのタイトル。
  • og:type: ページの種類。通常はwebsiteまたはarticleです。
  • og:image: 画像。
  • og:url: ページの正規URL。プロトコルでは永続的なIDと呼ばれています。

og:descriptionを加えればカードの完成です。最小限でそろえた例は次のとおりです。

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

原因1: タグがない

og:タグがない場合、各アプリは<title>や最初の画像など、ページ上の別の情報で代用します。何を選ぶかはアプリ次第です。そのため、あるリンクはある場所では正しく見えても、別の場所では壊れて見えることがあります。対策は、トップページだけでなく、共有されそうな全ページで、必須の4つのタグと説明文を設定することです。トップページのタグを流用した商品ページは、トップページのカードを表示してしまいます。

原因2: 画像のURLが相対パス

自分のブラウザでは正常に見えるので、見落としやすい原因です。content="/images/og.jpg"は、すでにサイト内にいるブラウザでは動きますが、クローラーはサイトの外から取得します。https://とドメインから始まる完全なアドレスを書いてください。og:urlも同じです。

原因3: 画像のサイズや縦横比が合っていない

各プラットフォームが求める条件はそれぞれ明記されており、横長の画像という点では偶然にも一致しています。

  • LinkedInは、ウェブサイトを共有可能にするためのガイドで、画像は最低1200 × 627ピクセル、推奨比率は1.91:1、5MB以下にするよう求めています。
  • Metaの共有のベストプラクティスでは、高解像度画面向けに幅1080ピクセル以上、画像リンク広告の表示には幅600以上を推奨しています。
  • Xの大きな画像カードは、開発者向けドキュメントによると、比率2:1で、300 × 157から4096 × 4096ピクセルまで、5MB未満、JPG、PNG、WEBP、GIFに対応しています。SVGは対応していません。（元のページは現在リダイレクトされるため、このリンクはInternet Archive経由です。）

3つすべてに合うサイズは1200 × 630です。LinkedInの最小1200 × 627を満たし、Metaの1080より幅が広く、比率は1200 ÷ 630 = 1.905で、Xの2:1との差は5%以内です。正方形や縦長の画像は横長のカードに合わせて切り抜かれるため、重要な部分は中央に置いてください。アスペクト比計算ツールで、中央で切り抜いたときに残る範囲を確認できます。

タグにもサイズを書いてください。Metaはog:image:widthとog:image:heightを求めています。これにより、クローラーは画像をダウンロードして処理する前に描画できます。Metaのウェブマスターガイドでは簡潔に、共有時に最初から正しく読み込まれるよう、高さと幅を指定するよう書かれています。

原因4: タグがJavaScriptで追加されている

サイトビルダーやシングルページアプリでは、ページの読み込み後にブラウザ上でmetaタグを追加するものがあります。クローラーはサーバーが返すHTMLを読むため、そのコードを実行せず、タグを見ないことがあります。ページのソースを確認してください（検証ツールではなく「ソースを表示」を使います。検証ツールはスクリプト実行後のページを表示するためです）。タグがソースにない場合、クローラーにも見えない可能性が高いです。修正は、サイトの設定またはサーバー側のテンプレートで行ってください。

原因5: 特殊文字でタグが壊れている

The "only" linen you needのように、タイトルに二重引用符が含まれていると、content="..."属性が途中で閉じられ、残りのタイトルが失われます。属性内で意味を持つ文字はエスケープが必要です。"は&quot;、&は&amp;、<は&lt;に置き換えます。ブラウザとクローラーは、タグを読むときにこれらを元の文字に戻します。ジェネレーターはこれを自動で行うため、使う価値の半分はここにあります。

原因6: アプリが古いバージョンを覚えている

タグを直して再度共有したのに、古いカードが表示される。これはキャッシュです。アプリは取得した内容を保存して再利用します。大手2社には、新しい表示を要求するツールがあります。

  • Facebook: URLをMetaのシェアデバッガーに貼り付けます。Metaのウェブマスターガイドによると、クローラーが取得したタグとエラーや警告が表示され、再取得が実行されます。Metaのベストプラクティスでは、取得済みの内容は通常24時間周期で更新されるとも書かれています。
  • LinkedIn: URLを投稿インスペクターにかけます。LinkedInのヘルプページには制限が明記されています。再取得によってプレビューが変わるのは新しい投稿だけです。すでにそのURLを含む投稿は、古いプレビューのままです。

ローンチ前に覚えておくべきなのは、このLinkedInの注意点です。最初の投稿を出す前にプレビューを確認してください。古い投稿は、ページを直しても修正できないからです。

twitter:cardタグ: 4つではなく1行

Xもopen Graphを読み取ります。カードのマークアップのリファレンスには、各タグの代替値が書かれています。twitter:titleはog:title、twitter:descriptionはog:description、twitter:imageはog:image、twitter:image:altはog:image:altを代わりに使います。そのため、すべてを繰り返す必要はありません。追加すべき1行はtwitter:cardです。全幅の画像ならsummary_large_image、小さな正方形の画像ならsummaryを指定します。省略すると、同じリファレンスによればXは小さな要約カードを表示する場合があり、大きな画像がサムネイルで届くことがあるのはそのためです。同じリファレンスでは、タイトルは70文字、説明文は200文字、代替テキストは420文字が上限です。

公開前の5分チェック

  1. ページのソースを表示し、og:タグを探します。必須の4つすべてと説明文があるか確認します。
  2. og:imageとog:urlがhttps://で始まっているか確認します。
  3. 画像のURLだけをブラウザで開きます。1200 × 630、またはそれに近いサイズで読み込まれるはずです。
  4. URLをシェアデバッガーと投稿インスペクターに貼り付け、カードを確認します。
  5. そのあとで共有します。

Hermosoの役割

Hermosoは、AIマーケティングエージェントです。あなたの市場で今まさに成果を出している広告を調べ、ブランドに合った画像・動画広告を作り、ご自身のアカウントに投稿を予約し、ご自身の広告アカウントで有料キャンペーンを実行します。良いリンクプレビューがあると、それらの投稿はクリックされやすくなります。Hermosoはウェブアプリで使えるほか、MCPサーバーを通じてClaude、ChatGPT、Cursorの中でも使えます。

よくある質問

FacebookやLinkedInでリンクに画像が出ないのはなぜですか？

たいていは、og:imageタグがない、https://で始まる完全なアドレスではなく相対パスを使っている、または画像が小さすぎることが原因です。LinkedInは最低1200 × 627ピクセルを求めています。修正後は、MetaのシェアデバッガーまたはLinkedInの投稿インスペクターにURLを入力し、再取得させてください。

Open Graph画像のサイズはどれくらいがよいですか？

1200 × 630ピクセルが、主要なネットワークすべてで機能します。LinkedInの最小1200 × 627を約1.91:1で満たし、Metaが推奨する1080ピクセルより幅が広く、Xが大きな画像カードに対応する2:1にも近い値です。

LinkedInのリンクプレビューを更新するには？

ページのタグを修正してから、そのURLをLinkedInの投稿インスペクターに入力してください。更新されたプレビューは新しい投稿にのみ適用されます。すでにそのURLを含む投稿は、古いプレビューのままです。

og:タグがあれば、twitter:タグも必要ですか？

twitter:cardだけで十分です。twitter:のバージョンがない場合、Xはog:title、og:description、og:image、og:image:altを代わりに使います。