ハウツー

公開URLをFacebookでシェアする方法

Facebookに公開URLを投稿したら、サムネイルが出なかったり古いタイトルのままだったり――こうしたトラブルの多くはOGPとキャッシュが原因です。この記事では、Facebookでリンクをきれいに表示させる設定と、シェアデバッガーを使った更新手順をまとめます。

FacebookはOGPでリンクを展開する

Facebookに貼られたURLは、リンク先のOGPタグを読み取ってカード状に展開されます。og:title、og:description、og:imageが投稿の見出し・説明・サムネイルになります。

FacebookはこれらのOGP情報を強くキャッシュする傾向があり、一度取得した内容をしばらく保持します。そのため、メタ情報を後から直しても投稿に反映されないことがあります。

この特性を理解しておくと、後述するシェアデバッガーでの更新作業がなぜ必要なのかが分かりやすくなります。

まず整えるOGPの要点

Facebookで安定してカードを表示させるために、ページ側で押さえておきたい項目を挙げます。

これらを最初に整えておけば、後からの修正回数を減らせます。とくにog:imageとog:urlは、サムネイル表示と正規URLの判定に直結するため、抜けがないか丁寧に確認しましょう。

  • og:title: 投稿に表示されるタイトル
  • og:description: リンクの説明文
  • og:image: サムネイル画像。横長で十分な解像度のものを用意する
  • og:url: 正規のURL。同じページに複数URLがあるときの基準になる

最短手順:まずこの3ステップで完了

公開URLをFacebookでシェアは、最初に全体像を押さえると迷いません。細かな設定に入る前に、ファイルを準備し、共有条件を決め、公開後に相手と同じURLで確認する流れを作ります。

手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

  • 1. 共有するHTML/ZIPを整理し、不要ファイルや秘密情報を除く
  • 2. 認証方式、公開期限、差し替え有無を決めてURLを発行する
  • 3. シークレットウィンドウとスマホで開き、相手への依頼文を添えて送る

シェアデバッガーでキャッシュを更新する手順

OGPを直したのに反映されないときは、Facebookのシェアデバッガーで再取得をかけます。次の順で進めます。

再取得を実行すると、Facebookがその場でページを読み直し、最新のメタ情報でプレビューが更新されます。投稿前にこの手順を挟むだけで、古い情報のまま公開してしまう事故を防げます。

  1. ページのHTMLにOGPタグを設定し、公開URLでアクセスできる状態にする
  2. Facebookのシェアデバッガーを開き、対象の公開URLを入力する
  3. 表示されたプレビューと、Facebookが読み取った値を確認する
  4. 情報が古い場合は再取得(再スクレイプ)を実行する
  5. 更新後のプレビューで画像とタイトルが正しいか最終確認してから投稿する

画像が表示されないときのチェック

サムネイルが出ない原因の多くは、og:imageのURLが外部から見えない、あるいは画像が小さすぎることです。画像は公開ページから到達できるパスに置き、HTTPSで配信されるようにします。

また、デバッガーのログにはどのタグをどう解釈したかが表示されます。og:imageの行に問題が出ていないか、画像サイズの警告が出ていないかを確認すると原因を絞り込めます。

ギガサイト便でFacebookシェアをテストするときのコツ

ギガサイト便はHTMLやZIPをドロップするだけで 〇〇.giga-site.com の共有URLを発行します。HTTPSが自動で付き、画像もCDNから配信されるため、og:imageの到達性を確かめる用途に使いやすいURLになります。

シェアデバッガーで表示を確認しながら、文言や画像を調整したくなったら、同じURLのままファイルを差し替えられます。リンクを送り直さずに、デバッガーで再取得するたびに最新の中身を検証できます。

公開URLにはnoindexが付くため検索には出ませんが、これは閲覧制御ではありません。社内向けの確認ページなど見せたくない相手がいる場合は、パスワードやメール認証を併用してください。

よくある質問

Facebookでサムネイル画像が表示されません。

og:imageのURLが公開ページから到達でき、HTTPSで配信されているか確認してください。画像が小さすぎる場合も表示されないことがあります。シェアデバッガーのログで警告が出ていないかも合わせて確認しましょう。

メタ情報を直したのに投稿が古いままです。

Facebookは取得したOGP情報をキャッシュします。シェアデバッガーで対象URLを再取得(再スクレイプ)すると、新しいタイトルや画像に更新されます。

Facebook専用のメタタグは必要ですか。

Facebookは標準のog:系タグを読み取ります。本記事の範囲では、og:title・og:description・og:image・og:urlを正しく整えることを優先すれば十分です。

確認用のページをFacebookで試して問題ありませんか。

ギガサイト便の公開URLにはnoindexが付くため検索には出ません。ただしURLを知る人には見えるため、限定したい場合は認証を併用してください。差し替えも同じURLで行えます。

最短で進める場合でも省略しないほうがよい確認は何ですか?

不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。

関連記事

ハウツー

公開URLをLinkedInでシェアする方法

ビジネス SNS である LinkedIn では、共有リンクの見え方が信頼度の第一印象を左右します。タイトルと画像が整ったカード表示にするための OGP 設定と、用途に合わせた共有方法を具体的に解説します。

4分で読める
ハウツー

公開URLをX(Twitter)でシェアして見栄えよく見せる方法

X に URL を貼っても味気ないリンクのままになってしまう経験はありませんか。OGP の設定次第で画像付きカードとして表示できます。シェアを見栄えよくするための設定方法と確認ツールの使い方を解説します。

5分で読める
ハウツー

共有URLをメール署名に入れる方法と注意点

メール署名に URL を入れると自然な誘導になりますが、署名は過去のメールにも長く残るため期限切れへの配慮が必要です。共有 URL を署名に組み込む手順と、後で差し替えるときの注意点を整理します。

4分で読める
ハウツー

OGP画像を設定してSNSのサムネを整える方法

SNS に URL を貼ったときのサムネイル画像は og:image タグで決まります。設定が抜けるとクリック率にも影響します。og:image の基本的な書き方から、画像が出ないときの確認ポイントまでを手順で解説します。

5分で読める
ハウツー

共有ページにファビコンを設定する方法

ブラウザのタブやブックマークに表示されるファビコンは、複数タブを開いたときにページを見分けやすくする重要な要素です。共有ページへのファビコン設定手順と、設定しても表示されないときの確認方法を解説します。

4分で読める
「ハウツー」の記事をもっと見る →