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

Web制作を始めたばかりのみなさん、こんにちは！
一生懸命書いた渾身の記事や、こだわって作ったポートフォリオサイト。いざSNSでシェアしたとき、画像やタイトルが綺麗に表示されると「よしっ！」とガッツポーズしたくなりますよね。

でも、たまにこんな経験はありませんか？
「シェアされたリンクをクリックしたのに、なぜかトップページに飛ばされてしまった…」とか、「あれ、さっきまで表示されていた画像が消えちゃった！」なんていうトラブルです。

実はそれ、「OGP（オージーピー）」という設定、特にその中の`og:url`という小さなタグが原因かもしれません。

今日は、SNSという広大な海で、あなたのコンテンツを目的地まで確実に届けるための「住所の書き方」について、一緒に紐解いていきましょう。

—

OGP（Open Graph Protocol）は、ひとことで言うと「SNS向けの紹介カード」です。

想像してみてください。あなたは、大切な友人にお土産を送ろうとしています。その箱の中に、「これは中身のクッキーですよ」「これは賞味期限ですよ」というメモを貼っておきますよね？

SNSでシェアされたとき、ブラウザやアプリはあなたのサイトの中身を全部読むのは大変です。そこで、あらかじめHTMLの中に「ここにはタイトルが書いてあって、ここには画像があるよ！」というメモを貼っておく。これがOGPです。

その中でも、`og:url`は、いわば「この荷物の届け先（住所）はここですよ！」と明記する一番大切なメモなんです。

—

「別に書かなくてもURLはわかるんじゃないの？」と思われたかもしれません。確かに、ブラウザの上のアドレスバーを見ればURLは書いてありますよね。

でも、SNSのロボットたちは少しおっちょこちょいなんです。

例えば、WebサイトにはこんなURLのパターンがありますよね。

もし`og:url`を指定していないと、SNS側は「あれ？これってさっきのURLとちょっと違うけど、別の記事なのかな？」と混乱してしまい、せっかくの「いいね」や「シェア数」が分散してしまったり、リンク先がうまく機能しなかったりするんです。

`og:url`を書くということは、「このページの正式な住所はここです！どんな寄り道（パラメーター）があっても、ここが正解ですよ！」とSNSに宣言する行為なんです。

—

書き方はとってもシンプルです。HTMLの `` タグの中に、以下の1行を添えるだけ。

必ず「絶対パス」で書く: `./index.html` のような書き方ではなく、`https://…` から始まるフルのURLを書きましょう。SNSはあなたのサイトの外からやってくるので、省略してはいけないルールなんです。
「http」か「https」か: あなたのサイトが鍵マークのついている「https」なら、必ず `https://` から始めてくださいね。

—

「よし、書いたぞ！」と思っても、なかなか反映されないことがあります。そんな時は焦らなくて大丈夫ですよ。

実は、FacebookやTwitter（X）といったSNS側は、一度読み込んだ情報を「キャッシュ」といって、しばらく手元にメモとして保存しておく習性があります。そのため、書き換えた直後には反映されないことがよくあるんです。

「あれ、変わってない！私の書き方が悪いのかな？」と不安になる必要はありません。
もしテストして反映されないときは、各SNSが用意している「OGP確認ツール」で、「最新情報を再取得（Scrape）」ボタンを押すと、すぐに更新されますよ。

—

`og:url` は、地味な存在かもしれません。でも、この1行があることで、あなたのコンテンツはSNSの世界で迷子にならず、誰かに届いたときにしっかりと「ここだよ！」と胸を張って主張できるようになります。

まずは、自分のサイトのソースコードを開いて、`` があるか確認してみてください。もしなかったら、今日がそれを追加する絶好のチャンスです。

一つひとつ、丁寧に設定していく。その積み重ねが、いつかあなたのサイトを「信頼される場所」へと育ててくれます。焦らず、楽しみながらコーディングしていきましょうね！

それでは、素敵なWeb制作ライフを！