OGPの「顔」を整える：`og:site_name`がUXにもたらす意外なほど大きな影響
フロントエンドエンジニアの皆さん、日々の実装お疲れ様です。CSSの細かな調整や、State管理の設計に追われていると、つい疎かになりがちなのが`
`内のメタデータですよね。「OGPなんてとりあえず`og:title`と`og:image`さえ入っていればいいんでしょ？」なんて思っていませんか？実は、SNS上であなたのサイトが「信頼できるメディア」として認識されるか、それとも「どこかの誰かが書いた得体の知れないページ」に見えるかは、この`og:site_name`の使い方が分かれ道になります。
今日は、地味ながらも実は戦略的に重要な`og:site_name`について、現場の視点から掘り下げていきましょう。
—
そもそも`og:site_name`は何のためにあるのか
Open Graph Protocol（OGP）は、Facebookが策定したWebページを構造化するための仕様です。その中で`og:site_name`は、非常にシンプルに「そのページが属するサイトの名前」をSNSプラットフォームに伝えるためのものです。
技術的には、SNSのクローラーがページをスクレイピングした際、以下のように解釈されます。
- `og:title`: 記事のタイトル（個別のコンテンツ名）
- `og:site_name`: サイトのブランド名（そのページが所属する母体）
SNSのタイムライン上では、多くの場合「記事タイトル – サイト名」のような形式で整形されて表示されます。もし`og:site_name`を設定していないと、プラットフォーム側がドメイン名から無理やり推測しようとしたり、最悪の場合、サイト名が空欄のまま表示されたりすることになります。
ブランディングの観点から言えば、「どこのサイトのコンテンツなのか」を明示しないのは、名刺を出さずに挨拶しているようなものです。
—
実装のベストプラクティス：コピペで使えるコード例
実務で扱う際は、動的なページ（記事詳細など）であっても静的なページであっても、このタグは定数として定義するか、あるいはCMSのサイト設定から呼び出すのが定石です。
以下に、SEOとOGPを考慮したクリーンな実装例を挙げます。
なぜ `og:title` とは別に設定するのか？
時々、`og:title`の中に「記事タイトル | サイト名」と含めてしまうケースを見かけます。しかし、OGPの仕様上、`og:title`にはコンテンツのタイトルのみを記述し、サイト名は`og:site_name`へ分離するのが正解です。
なぜなら、SNS側の表示ロジックは常にアップデートされています。将来的にSNS側のUIが変わり、サイト名を強調するデザインに変更された際、`og:title`に全て詰め込んでいると、タイトルが重複して表示されるなどの「見栄えのバグ」を生む可能性があるからです。
—
現場で遭遇する「落とし穴」を回避する
シニアの視点から、一つだけアドバイスしておきます。それは「言語によるサイト名の揺らぎ」です。
グローバル展開しているサイトや、ブランディングで「英語表記」と「日本語表記」を使い分けているサイトの場合、`og:site_name`をどちらにするか迷う場面があるでしょう。結論としては、「ユーザーがSNSで検索した時に最もヒットしやすい名前」を優先してください。
また、ReactやVueなどのSPA（シングルページアプリケーション）で開発している場合、`react-helmet`や`vue-meta`といったライブラリを使って、ページ遷移のたびに`og:site_name`が意図せず書き換わっていないかを必ず確認してください。たまにコンポーネントの再レンダリングでメタデータが空になる、あるいは不正な値が入るというケースは、ベテランでもやりがちなミスです。
—
最後に：メタデータは「Webの玄関」
`og:site_name`は、たった一行のタグですが、それが積み重なることで「このサイトは情報の出所が明確である」という信頼の証明になります。
コードを書くとき、「これはただのメタデータだ」と切り捨てるのではなく、「SNSという巨大なプラットフォーム上の、うちのサイトの看板」だと思って実装してみてください。そうした細部へのこだわりこそが、あなたの作るプロダクトの品格を決めるのです。
それでは、また次回の記事でお会いしましょう。実装頑張ってください！
コメント