Facebookでシェアしたときに“かっこいい画像”が出ないあなたへ

こども屋台選手権の
今年度のエントリーがスタートしました

本イベントは
私の生きがい活動の一環で
行っている

こどもが主役のNPOの
事業です

もうね。。。
この事業は私の涙腺を
刺激しまくるんです😂

こども達が自らの手で
知恵を出し

調理したものを
売り、競い合う。。。

大人は裏方であるこのイベント

当然ブログやSNSなどで
告知をしていきます

その際にリンクを貼るのですが
サムネが変！ってことないですか？

今回は自動で設定される
リンク時のサムネの設定を
解説します

筆者
クボタサトシ

筆者は大分県大分市で

IT集客業をやっています

久保田サトシと言います

本ブログは難しいとされるITの世界を少しでもわかりやすくお伝えし便利で豊かなデジタルの世界を知っていただくために書いています😆

なるべく「ひらがな」で解説いたしますがITと関連のない個人的なブログもありますのでたまたまの場合はご容赦ください

それでは今日の話も
最後までよろしくお願いいたします

▼久保田のプロフィール
https://blog.rocks-c.com/2023/01/04/satoshiani/

このブログの目次

OGタグって知っちょる？
SNSに貼ったURLで表示される画像の正体とは？
どうやってOGタグを設定するのか？
1. HTMLで手動設定する方法
2. WordPressなどCMSの場合
サムネイル画像のベストな条件とは？
反映されているか確認する方法
1. Facebookの場合
2. X（旧Twitter）の場合
よくあるトラブルと対策
OG画像を味方につけて、告知効果を最大化しよう
無料オンラインサロン入会受付中！

OGタグって知っちょる？

FacebookやLINE、
X（旧Twitter）などに

イベントのURLを貼ったのに、
全然意図してない画像が出たり、

そもそも画像が
表示されなかったりすることないですか？

冒頭で紹介した
こども屋台選手権を

facebookで告知しようと
URLを貼ったところ

こんな感じに画像表記されました！

文章はいいとして
下の部分もっとかっよく
表記したいものです

実はこれ、
ページの中に
ある設定をしておかないと、

SNSが勝手に判断して
変な画像やアイコンを
表示しちゃうんです

かっこよく
デザインしたイベントバナーが
台無しにってしまいます

ちゃんと設定すれば、

あなたが意図した

「かっこいい画像」
「伝えたいメッセージ入りの画像」が、

SNSでしっかり出るようになります

今回はそんな
SNSで自動表示される画像の仕組みと設定方法

について、
やさしく解説します！

SNSに貼ったURLで表示される画像の正体とは？

イベントページや
ブログをFacebookやLINEでシェアすると

自動的にサムネイル画像が
表示されます👍

これは

Open Graph（オープングラフ）という仕組み

によって成り立っています

Facebookが開発した仕様で、
簡単にいうと

「このページにはどんな情報があるのか？」

をSNSに伝えるための
“見出し情報”のようなものです

この中でも特に重要なのが

og:title（タイトル）
og:description（説明文）
og:image（画像URL）

この3つです

特に og:image は、

SNSで表示される画像を決める命令文です！

これをきちんと設定しておかないと、
SNS側が勝手に

ページ内の画像を拾ってしまい、
意図しない見た目になってしまうんですね

少し専門性の高い話になってしまいますが
知っておいて損のない話です

どうやってOGタグを設定するのか？

HTMLで手動設定する方法

イベントページの
HTMLの <head> タグの中に、
以下のコードを追加します

<meta property="og:title" content="第10回こども屋台選手権" /> <meta property="og:description" content="大分県で10回目を迎えたこどもが真ん中のイベント！" /> <meta property="og:image" content="https://kodomoyatai.com/images/sns_bunner.jpg" /> <meta property="og:url" content="https://kodomoyatai.com" /> <meta property="og:type" content="website" />

上記の中でも og:image の部分が、
SNSに表示されるサムネイル画像です

画像は制作後
正しいディレクトリ位置に
配置をします

上記で言えば
kdomoyatai.comのサーバの直下
imagesフォルダにおくように
なっています

imagesフォルダがなければ
作ってもいいですし

置き位置を変えて
<meta property="og:image" content=
からのURLを変えてださい

WordPressなどCMSの場合

手動でHTMLを書かなくても、
CMSによってはもっと簡単に設定できます

たとえば WordPress なら：

Yoast SEOプラグイン → 投稿画面の下にOGタグ設定欄があります
All in One SEO Pack → SNSの表示設定を個別にできます

ノーコードツール（STUDIO、Wix、ペライチなど）の場合は、「SNSシェア画像」「OG画像」などの項目が編集画面にあることが多いので、そちらで設定すればOKです

サムネイル画像のベストな条件とは？

せっかくなので、
サムネイル画像は

下記を参考に！

サイズ：1200×630px（16:9）
ファイル形式：JPGまたはPNG
容量：5MB以内
内容：タイトル、日時、場所、ブランドロゴが入っていると効果的

こんな感じに作って見てください

画像作成には
Canva や Figma などの
無料ツールを使うと便利です

テンプレート化しておけば、
次回以降もサクサク作成できますよ

反映されているか確認する方法

Facebookの場合

Facebookは
一度シェアしたページの
情報をキャッシュ（保存）します

なので、
OGタグを変更しても
すぐには反映されません

そんなときは以下のツールを使います

🔗 Facebook Sharing Debugger

URLを入力 → 「Debug」ボタン → 「Scrape Again」をクリック

これでSNS上の
キャッシュがクリアされて、

新しい画像が反映されます

X（旧Twitter）の場合

こちらも同じく、
Twitter Card Validator

というツールで確認できます

🔗 Card Validator

よくあるトラブルと対策

問題	原因	対策
画像が表示されない	og:imageがない or URLが間違ってる	正確な画像URLを設定
古い画像が出る	SNSのキャッシュ	Debuggerで再読み込み
画像が切れる	サイズが合っていない	1200×630px推奨