SNSでシェアされた時、あなたの記事が「一番輝く」ために。OGPの`og:type`を使いこなそう
Webサイトを作って、いざSNSでシェアしたとき……「あれ？ なんだか思っていた表示と違うな」と感じたことはありませんか？
せっかく心を込めて書いた記事や、こだわって作ったWebサイト。SNSのタイムラインに流れてきた時に、パッと目を引く「顔」になってほしいですよね。
そこで登場するのがOGP（Open Graph Protocol）という魔法のタグです。今回は、その中でも特に重要で、かつ「これさえ押さえれば大丈夫！」と言える`og:type`について、一緒に紐解いていきましょう。
—
OGPの`og:type`って、結局なんなの？
まずはイメージしてみてください。あなたは新しくカフェをオープンしました。
お店の入り口に「ここはカフェです」という看板を出すか、「ここは雑貨屋です」という看板を出すかによって、お客さんの期待値は変わりますよね？
SNSの世界でも同じことが起きています。
`og:type`は、SNSに対して「今シェアされたこのページは、こういう種類のものですよ！」と教えてあげるための『名札』のようなものなんです。
SNS側も、「あ、これはニュース記事なんだな」「お、これはWebサービスそのものなんだな」と理解できれば、一番魅力的に見えるレイアウトで表示してくれます。
—
よく使う「名札」の種類（主要な3つ）
`og:type`にはいくつか種類がありますが、Web制作の現場でよく使うのは主に以下の3つです。まずはこれだけ覚えておけば百点満点です！
1. `website`
- サイトのトップページや、ポートフォリオサイトなど、「サイト全体」を指す時に使います。
2. `article`
- ブログ記事やニュースなど、「個別の読み物」を指す時に使います。
3. `profile`
- あなた自身のプロフィールページなど、「人」を紹介する時に使います。
「どれにすればいいんだろう？」と迷ったら、「このページは誰かのために書かれた『記事』かな？」と考えてみてください。そうであれば`article`で間違いありません。それ以外はひとまず`website`にしておけば、大きな失敗は防げますよ。
—
実際に書いてみよう！
では、さっそくHTMLの`
`タグの中に書いてみましょう。といっても、難しいことはありません。たった一行追加するだけです。
ここでちょっとしたポイント！
`content=”article”` の後ろに、さらなる詳細情報を付け加えることもできます。
もしブログ記事なら、こんな風に書くのがプロのテクニックです。
—
つまずきやすいポイントと解決策
「よし、書いたぞ！」と思っても、すぐにSNSでシェアして確認してはいけません。ここが初心者の方がよくつまずくポイントです。
SNSは、一度読み込んだ情報をしばらくの間「キャッシュ（記憶）」として保存します。
そのため、タグを書き換えた直後にシェアしても、古い情報のまま表示されてしまうことがよくあるんです。
そんな時は、「OGPデバッガー」というツールを使いましょう。
- [Twitter (X) Card Validator](https://cards-dev.twitter.com/validator)
- [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)
これらのツールにURLを入力すると、「SNSさん、今の情報をもう一度見に行って更新してね！」と強制的に再読み込みを依頼できます。表示が変わらないときは、ぜひこのツールを思い出してくださいね。
—
最後に：あなたの発信を、SNSでもっと魅力的に
OGP設定は、いわば「Webサイトの礼儀作法」のようなものです。
「中身が良ければそれでいい」という考え方も素敵ですが、せっかくの素晴らしいコンテンツが、SNS上でうまく表示されずにスルーされてしまったら、とてももったいないですよね。
`og:type`を正しく設定することで、あなたの記事はSNSのタイムラインで正しく「顔」を持ち、読者との素敵な出会いを生み出してくれるはずです。
最初は難しく感じるかもしれませんが、一度やってしまえば、あとはおまじないのように決まった形を使うだけ。まずは自分のサイトのトップページに `website` を書いてみることから始めてみませんか？
あなたのサイトが、SNSでたくさんの人の目に留まることを心から応援しています！
コメント