SNSでシェアされた時、あなたのサイトは「どんな顔」をしていますか？：OGPの`og:title`をマスターしよう！
Webサイトを作っていると、HTMLの`
`タグは最初に教わりますよね。「ブラウザのタブに表示される名前だよね」と理解して、一生懸命サイト名やページ名を決めていることと思います。</p>
<p>でも、ふとSNS（XやFacebook、LINEなど）にURLを貼り付けてみたとき、<b>「あれ？思っていたのと違う見出しが出ているぞ？」</b>と焦った経験はありませんか？</p>
<p>実は、Webブラウザが見る「ブラウザのタイトル」と、SNSが読み取る「SNS用のタイトル」は、別々に設定してあげたほうが親切なんです。今日は、そのための魔法の鍵『`og:title`』について、一緒に紐解いていきましょう。</p>
<p>—</p>
<h3><span id="toc1">OGPは「SNSのための名刺」です</span></h3>
<p>まずはイメージしてみてください。あなたは新しくカフェをオープンしました。店頭には立派な看板（HTMLの`<title>`）を掲げていますよね。</p>
<p>でも、SNSで誰かにあなたのカフェを紹介してもらうとき、看板をそのまま切り取って持っていくわけではありません。代わりに「SNSという大きな掲示板」に貼るための、<b>「お店の紹介カード」</b>を渡す必要があります。</p>
<p>この紹介カードの仕組みを、専門用語で<b>OGP（Open Graph Protocol）</b>と呼びます。「このページをSNSでシェアするなら、この画像と、このタイトルと、この説明文を使ってね！」とSNS側に伝えるための、いわば「SNS専用の名刺」なんです。</p>
<p>その名刺の中にある「タイトル」の部分こそが、今回お話しする`og:title`になります。</p>
<p>—</p>
<h3><span id="toc2">なぜ``と`og:title`を分けるの？</span></h3>
<p>「同じタイトルにすればいいじゃん！」と思うかもしれません。ですが、これにはプロならではの理由があるんです。</p>
<ul>
<li><b>ブラウザのタイトル（`<title>`）:</b> 検索エンジン（Googleなど）に「このページは何について書かれているか」を正確に伝えるためのもの。短く、検索キーワードを意識して書くのが鉄則です。</li>
<li><b>SNSのタイトル（`og:title`）:</b> SNSのタイムラインで流れてきたとき、思わず指を止めてクリックしたくなる「キャッチコピー」的な役割。</li>
</ul>
<p>例えば、ブログ記事のタイトルが「HTMLの基礎知識 – 初心者向け解説」だとします。検索用としてはこれで完璧です。でも、SNSでシェアするときは、「【保存版】HTMLの基礎！これだけでWebサイトが作れる魔法のタグを徹底解説」のように、<b>少しワクワク感や緊急性を足したタイトル</b>にしたほうが、クリックされやすくなりますよね。</p>
<p>このように、「検索用（実直）」と「SNS用（魅力的）」を使い分けることで、あなたのサイトの集客力はグッと上がります。</p>
<p>—</p>
<h3><span id="toc3">実際に書いてみよう！</span></h3>
<p>`og:title`の設定はとっても簡単です。HTMLの`<head>`タグの中に、以下のコードを一行追加するだけ。</p>
<p><head><br />
<!-- ページ本来のタイトル（ブラウザ用） --><br />
<title>HTMLの基礎知識 – 初心者向け解説
これだけで、SNSのクローラー（情報を集めるロボット）がやってきたとき、「お、このページにはSNS用の素敵なタイトルが用意されているな！」と認識してくれるようになります。
—
つまずきやすいポイント：ここだけ注意！
「コードを書いたのに、SNSで表示が変わらない！」と慌てる必要はありません。これにはよくある理由があります。
1. SNS側のキャッシュ（記憶）が古い
SNSは、一度読み込んだ情報を「キャッシュ」として保存しています。そのため、修正してもすぐには反映されないことが多いんです。
- 解決策: 「Card Validator（Xの場合）」や「Facebook Sharing Debugger」といったデバッグツールを使って、SNS側に「もう一度情報を読み込み直して！」とリクエストを送ると、すぐに反映されますよ。
2. 他のOGPタグも一緒に設定しよう
`og:title`だけだと、SNSは「画像（og:image）」や「概要（og:description）」が足りなくて少し寂しい表示になってしまいます。できればセットで設定してあげると、グッと見栄えが良くなります。
—
最後に：あなたのサイトを「おもてなし」しよう
Web制作を始めたばかりの頃は、タグを覚えるだけで精一杯ですよね。でも、こうして「SNSでシェアされた時の見え方」まで気を配れるようになると、それはもう立派なクリエイターの視点です。
「このサイトをシェアしてくれた人が、どんな気持ちでクリックしてくれるかな？」
そんなふうに、画面の向こう側のユーザーを想像しながらタイトルを考えること。それこそが、一番大切な「技術」なのかもしれません。
まずは、あなたのブログやポートフォリオに、この`og:title`を一行、忍ばせてみてください。きっと、あなたのサイトがSNSという海の中で、少しだけキラリと光るはずですよ！
コメント