SNSで自分の作ったWebサイトのリンクをシェアしたとき、「あれ、画像が真っ白だ…」とか「画像が変なところで切れてる！」とガッカリした経験はありませんか？
実はそれ、Webサイトの「顔」とも言えるOGP（Open Graph Protocol）の設定が少し足りていないだけかもしれません。今日は、SNSのタイムラインで思わずクリックしたくなる「アイキャッチ画像」を設定する魔法のタグ、`og:image`について、優しく紐解いていきましょう。
—
OGPは「Webサイトの名刺」
まず、想像してみてください。あなたが知らない人に自己紹介するとき、名刺を渡しますよね。もしその名刺が真っ白だったら、「この人、どんな人なんだろう？」と少し不安になりませんか？
OGPは、まさにWebサイトにとっての名刺です。SNS（Twitter/XやFacebookなど）は、リンクが貼られたとき、「このサイトはどんな内容かな？」と自動的に情報を読み取りに行きます。そのとき、`og:image`というタグが書いてあると、「これが私の顔です！」と立派な画像を表示してくれるんです。
迷ったらこれ！おすすめのサイズ設定
「画像を作ろうと思うけど、サイズは何ピクセルがいいの？」という質問をよく受けます。結論から言うと、「1200px × 630px」が最強です。
なぜこのサイズなのか。それは、SNSの多くがこの「横長（アスペクト比 1.91:1）」の比率を基準に設計されているからです。
- 1200px × 630px：これが黄金比です！
- 重要なポイント：スマホで見ると画像の上下が少し削られたりすることもあるので、文字や伝えたいロゴは、画像のど真ん中（中心）に配置するのが、失敗しないコツですよ。
—
実際に書いてみよう
では、さっそくHTMLの`
`タグの中に書いていきましょう。場所は`
ここでつまずきやすいポイント！
初心者の頃、僕もよくやってしまったのが「相対パス」で書いてしまうミスです。
- `./images/ogp.png` と書いても、SNSのロボットは「それ、どこのサーバーの画像？」と迷子になってしまいます。
- 必ず `https://ドメイン名/images/ogp.png` のように、フルパス（絶対パス）で書いてあげてくださいね。
—
最後に：画像が表示されないときは？
「コードを書いたのに、画像が更新されない！」ということもよくあります。これは、SNS側が「一度見たサイトの情報」をしばらくの間、自分の頭の中に記憶（キャッシュ）しているからです。
そんなときは、SNS公式が用意している「デバッガーツール」を使いましょう。
- X (Twitter) Card Validator
- Facebook Sharing Debugger
これらのサイトにURLを入力して「Scrape（読み込み）」ボタンを押すと、SNS側の記憶がリセットされて、最新の画像が正しく表示されるようになります。
—
焦らなくて大丈夫ですよ
最初はカタカナの専門用語ばかりで難しく感じるかもしれません。でも、一つずつタグの意味を知っていけば、Webサイトはあなたの意図をしっかり理解してくれるようになります。
「画像が表示された！」という瞬間は、何度経験しても嬉しいものです。ぜひ、あなたのWebサイトにも素敵な「顔」を作ってあげてくださいね。応援しています！
コメント