【入門編】OGPのog:descriptionプロパティ – HTML実践ガイド

Webサイトを作って、いざ公開！友達やフォロワーにSNSでURLをシェアした時、ふとこんな経験はありませんか？

「あれ、URLしか表示されない…」
「画像は出たけど、説明文が変なところで切れていて内容が伝わらない…」

一生懸命書いた記事なのに、SNS上で「中身が何かわからない無機質なリンク」になってしまうのは、本当に悲しいですよね。

そんな時、あなたの味方になってくれるのが「OGP（オージーピー）」という仕組みです。今回はその中でも、特に読者のクリック率を左右する`og:description`という「記事の予告編」について、じっくり解説しますね。

—

まず、OGPを身近なものに例えてみましょう。
あなたが街で「すごく美味しそうなパン屋さん」を見つけたとします。でも、入り口に何の説明書きもなかったら、入るのを少し躊躇しませんか？

逆に、店頭に「焼きたての北海道小麦を使った、ふわふわクロワッサンのお店です！」なんて看板が出ていたら、「おっ、食べてみたい！」と自然に足が向きますよね。

SNSにおけるOGPは、まさにその「看板」です。
そして今回解説する `og:description` は、その看板に書かれた「どんなお店（記事）なのかを伝える短い紹介文」のことなんです。

よくある間違いが、「``（メタディスクリプション）があるから大丈夫！」と思ってしまうこと。

これらは別々の「看板」です。Google用だけでなく、SNS用の看板もしっかり用意してあげることで、あなたのWebサイトはもっと多くの人に愛されるようになります。

—

やり方はとってもシンプルです。HTMLの `` タグの中に、以下の1行を書き加えるだけ。これだけで、あなたの記事はSNSのタイムラインで一気に「読まれる準備」が整います。

あまりに長い文章だと、スマホの画面では「…」と省略されてしまいます。
映画の予告編を作るような気持ちで、「この記事を読むと、どんな良いことがあるのか？」を80文字前後にギュッと凝縮するのが、読者にクリックしてもらう最大のコツですよ。

—

コードを書いたのに、「SNSでシェアしても反映されない！」と焦ることは、実はプロでもよくあります。SNS側が「前の看板」を記憶してしまっているからですね。

そんな時は、各SNSが用意している「デバッガー」という確認ツールを使ってみてください。

これらのサイトにURLを入力してボタンを押すと、SNS側があなたのサイトを再確認して、最新の看板を表示してくれるようになります。これ、魔法みたいに一瞬で解決するので、ぜひブックマークしておいてくださいね。

—

最初は「こんなコード、本当に必要なのかな？」と思うかもしれません。でも、あなたが心を込めて書いた記事が、素敵な紹介文とともに誰かのタイムラインに流れていく姿を想像してみてください。

誰かがその紹介文を見て「おっ、面白そう！」とクリックしてくれた時、あなたの書いた記事は、画面の向こう側の誰かに届く「お手紙」に変わります。

`og:description` は、単なるHTMLのタグではありません。あなたの記事と、それを必要としている誰かをつなぐための、最初の一歩なんです。

難しく考えず、まずは自分の言葉で「この記事って、こんなところが面白いんだよ！」と、SNSのお友達に語りかけるような気持ちで書いてみてくださいね。大丈夫、きっと素敵な出会いが待っていますよ！