はい、承知いたしました！世界最高峰のフロントエンド・スペシャリストとして、読者の皆さんが「なるほど！」と膝を打つような、温かくも実践的なブログ記事を執筆します。難しい専門用語は極力避け、身近な例え話で丁寧に解説し、初心者の方でも安心してコードを試せるように工夫しますね。

—

SNSで「このページ！」って、ちゃんと伝わってる？ `og:url` と `og:description` の秘密

Web制作の世界へようこそ！HTML、CSS、JavaScript… 新しいことを学ぶって、ワクワクする反面、ちょっとドキドキもしますよね。特に、作ったページがSNSでシェアされた時に、思い通りの情報が表示されないと「あれ？どうして？」ってなりがちです。

今回は、そんな「あるある」を解決するために、Webページの「顔」とも言えるメタデータ、特にSNSカードの表示をコントロールする `og:url` と `og:description` について、優しく、そして分かりやすく解説していきます。まるで、お気に入りの商品を友達に紹介するみたいに、あなたのページを魅力的に伝えられるようになりましょう！

まずは、SNSカードって何？

TwitterやFacebook、LINEなどで、誰かがWebページのリンクをシェアした時に表示される、あの「サムネイル画像＋タイトル＋説明文」のセット、覚えていますか？あれを「SNSカード」とか「OGPカード」と呼んだりします。

このSNSカード、実はWebページを作った人が「こういう風に見せてね！」と、あらかじめ指示を出しておかないと、SNS側が勝手に判断して表示してしまうんです。ときには、全然関係ない画像が表示されたり、説明文が長すぎたり短すぎたり…。せっかく素晴らしいコンテンツを作ったのに、それがうまく伝わらないのはもったいないですよね！

ページに「戸籍謄本」と「自己紹介カード」を渡すイメージ

このSNSカードの表示をコントロールするために、HTMLの `` の中に特別な情報（メタデータ）を仕込んでおきます。今回は、その中でも特に重要な「正規URLを指定する `og:url`」と「表示される説明文を決める `og:description`」に焦点を当ててみましょう。

1. `og:url`: 「このページは、このURLの『正真正ім (せいしょゆうぎ）』なバージョンですよ！」と伝える（正規URLの指定）

`og:url` は、そのページが「本物」であり、「これこそがこのページの正式な住所ですよ」と、SNSに教えてあげるためのものです。

例えるなら…

あなたが友達に、あるお店のおすすめメニューを教えたいとします。でも、そのお店には、

店頭のメニュー看板
公式ウェブサイトのメニューページ
店員さんが口頭で教えてくれるメニュー

…と、いくつかの「メニュー情報」があるかもしれません。

もし、あなたが「このお店の『究極のパフェ』が最高なんだ！」と友達に教えたい時、どの「メニュー情報」を基に教えるのが一番正確で、後々「あれ？どのパフェだっけ？」とならずに済みますか？

きっと、お店の「公式ウェブサイトに載っている、一番詳しいメニューページ」ですよね？

`og:url` も、まさにそれと同じ役割をします。Webページには、似たようなURLがいくつか存在することがあります（例えば、`http://example.com/page` と `https://example.com/page`、あるいは `http://example.com/page?id=123` と `http://example.com/page` など）。SNSに「このページは、このURLが一番正しくて、これをシェアしてね！」と明確に伝えることで、SNSカードが正しく生成されるように促すんです。

コードで見てみましょう！

私の素晴らしいブログ記事

`property=”og:url”`: これが「URLを指定しますよ！」という目印です。
`content=”…”`: ここに、あなたのページの「正式なURL」を正確に記述します。httpかhttpsか、wwwがあるかないかなど、統一することが大切です。

2. `og:description`: SNSカードに表示される「説明文」をコントロール！

`og:description` は、SNSカードに表示される「説明文」を、あなたが指定した内容で固定するためのものです。

例えるなら…

さっきの「究極のパフェ」の例で考えてみましょう。公式ウェブサイトのメニューページには、パフェの説明が延々と書かれているかもしれません。でも、友達にサクッと魅力を伝えたい時、全部読むのは大変ですよね？

そこで、「このパフェは、高級チョコレートと新鮮なフルーツがたっぷり使われてて、見た目も味も最高なんだよ！一度食べたら忘れられない！」みたいに、一番の「売り」をギュッと凝縮して伝えますよね。

`og:description` は、まさにその「ギュッと凝縮された魅力的な説明文」をSNSカードに表示させるためのものです。SNS側が、Webページの内容を自動で判断して説明文を作るよりも、制作者が意図した説明文を表示させる方が、より正確に、そして魅力的に情報を伝えられます。

コードで見てみましょう！

私の素晴らしいブログ記事

`property=”og:description”`: これが「説明文を指定しますよ！」という目印です。
`content=”…”`: ここに、SNSカードに表示したい説明文を記述します。一般的に、数十文字〜100文字程度が適していると言われています。長すぎると途中で切れてしまうので、一番伝えたいことを最初に持ってくると良いですよ。

どこに書けばいいの？

これらの `` タグは、HTMLの `` セクションの中に記述します。`` は、Webページそのものには直接表示されない、ページの「設定」や「情報」をまとめる場所なんですね。

あなたのページのタイトル

こんにちは！

これは私のウェブページです。

まとめ：あなたのページを、もっと上手に伝えよう！

`og:url` と `og:description` は、あなたの作ったWebページが、SNSでシェアされた時に「正しく」「魅力的に」表示されるために、とても大切な役割を果たしています。

`og:url` で「これが正規のURLだよ！」と教える。
`og:description` で「このページはこんな魅力があるんだよ！」と、一番伝えたいことをギュッとまとめて伝える。

まるで、お店の看板やフライヤーをデザインするみたいに、これらのメタデータを設定することで、あなたのコンテンツの魅力が、より多くの人に、より正確に伝わるようになります。

最初は少し難しく感じるかもしれませんが、一度設定してしまえば、あとは自動で良い仕事をしてくれます。ぜひ、あなたのページでも試してみてくださいね！「大丈夫、きっとうまくいく！」と、私も応援しています！

—

いかがでしたでしょうか？この解説が、皆さんのWeb制作の旅の、小さな灯りになれば幸いです。これからも、現場のリアルな声と、温かい解説をお届けしていきますので、どうぞお楽しみに！

【入門編】og:urlとog:descriptionの役割 – HTML実践ガイド