【入門編】OGPの基本概念とog:title, og:type – HTML実践ガイド

はい、承知いたしました。Web制作・開発の初学者の方々が、SNSシェア時のカード表示を制御するOGP（Open Graph Protocol）の基本概念、特に`og:title`と`og:type`について、親しみやすく、かつ実践的に理解できるようなブログ記事を執筆します。専門用語はかみ砕き、身近な例え話や温かいフォローを交えながら、読者がつまずくことなく読み進められるように工夫します。

—

SNSで「いいね！」される？あなたの記事がもっと魅力的になる「OGP」の魔法✨

こんにちは！Web制作の世界へようこそ！HTMLやCSS、JavaScriptに触れ始めたばかりの皆さん、毎日新しい発見があってワクワクしますよね。

さて、皆さんはFacebookやTwitter（現X）などのSNSで、気になる記事やブログを見つけてシェアした時、どんな風に表示されるか気になったことはありますか？

「え、なんか、ただのURLだけじゃなくて、画像もタイトルもちゃんと表示されてる！なんだこれ？」

そう、あの見栄えの良い「カード」みたいな表示、あれが実はあなたの記事の魅力をグッと引き上げてくれる、とっても大切な仕掛けなんです。そして、その仕掛けの正体が、今日ご紹介する OGP（Open Graph Protocol） というものなんです！

OGPって、一体なにもの？ 🤔

OGPというのは、簡単に言うと「このページはこういう内容ですよ〜！」って、SNSに教えてあげるための「お約束事」なんです。

例えるなら、お友達にお土産を渡す時に、「これは〇〇（場所）で買ってきた、△△（お菓子）だよ！」って説明するのと似ています。この「〇〇で買ってきた」「△△」っていう情報があるおかげで、お友達は「へぇ、美味しそう！」「どんな味かな？」って、お土産への興味がグッと増しますよね。

OGPも同じで、SNSに「このページは、こんなタイトルで、こんな内容で、こんな画像が代表的なんですよ！」って教えてあげることで、SNS上でシェアされた時に、みんなが「おっ！」って目を引くような、魅力的なカードになって表示されるようになるんです。

このOGPを設定することで、あなたの書いた素敵な記事が、より多くの人に見てもらえるチャンスが広がるんですよ！

なんでOGPが大切なの？ 🚀

SNSで記事がシェアされた時、URLだけが表示されるのと、画像とタイトルがセットになったカードが表示されるのとでは、どっちの方がクリックしたくなりますか？

やっぱり、パッと見て内容が分かりやすい、画像付きのカードの方が、思わずクリックしたくなっちゃいますよね！

OGPは、そんな「クリック率を上げる」ために、とっても役立つんです。まるで、お店のショーウィンドウが綺麗に飾られていると、思わずお店に入りたくなっちゃうような感覚に似ています。

OGPの「基本のキ」！まずはここから覚えよう！ ✍️

OGPで設定できる項目はたくさんあるんですが、まずは一番基本となる「タイトル」と「コンテンツの種類」について見ていきましょう！

これらは、HTMLの``タグの中に、``タグを使って記述します。

「``タグ？``タグ？」って、ちょっと難しく感じるかもしれませんが、大丈夫！順番に見ていけば、きっと「なるほど！」ってなりますよ。

1. `og:title`：記事の「顔」となるタイトルを設定しよう！ 👑

これは、SNSでシェアされた時に表示されるカードの「タイトル」を指定するためのものです。

いわば、記事の顔！一番最初に目に入る、とっても大切な部分ですよね。

例えば、あなたが書いた「初心者でも簡単！ふわふわパンケーキの作り方」という記事があるとします。このタイトルがSNSでシェアされたら、カードにも「初心者でも簡単！ふわふわパンケーキの作り方」って表示された方が、見ている人も「お、美味しそう！作ってみようかな！」って思いますよね。

もし、この`og:title`を設定しないと、SNSが自動的にページのタイトルタグ（`