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

こんにちは！Web制作の世界へようこそ。
一生懸命作ったWebサイトやブログ記事。SNSで誰かにシェアされたとき、パッと表示される「あれ」を見て、「なんだか味気ないな…」とか「サイト名が表示されてないな…」と感じたことはありませんか？

実はそれ、ある「魔法のタグ」を添えるだけで劇的に解決できるんです。
今日は、OGP（Open Graph Protocol）という仕組みの中でも、特に大切な`og:site_name`について、肩の力を抜いてお話ししますね。

—

想像してみてください。あなたは今、大きな展示会に来ています。そこには無数のブースが並んでいますが、どのブースにも看板がかかっていません。

「この料理はどこが作ってるの？」「この雑貨はどこのブランド？」

これでは、どんなに素敵な商品があっても、お客さんは誰に声をかけていいかわかりませんよね。SNSでシェアされるときの「カード」もこれと同じです。`og:site_name`は、いわばWebサイトの「看板」や「名札」なんです。

SNS（TwitterやFacebookなど）があなたのサイトを読み取るとき、「これはどこのサイトの記事かな？」と探します。そのとき、このタグがあるだけで、SNSは自信満々に「これは『〇〇（サイト名）』の記事ですよ！」と表示してくれるようになるんですよ。

—

書き方はとってもシンプルです。HTMLファイルの``タグの中に、以下の1行をコピペするだけ。これだけで、あなたのサイトの認知度はグッと上がります。

ポイントは「サイト名」を入れること。 記事タイトル（例：今日の晩ごはん）とは別に、サイトの名前（例：もぐもぐブログ）を指定するのがコツですよ。

—

「ちゃんと書いたのに、SNSで変わらない！」と焦ることもあるかもしれません。でも、大丈夫。これには理由があるんです。

1. キャッシュの魔法（という名の記憶）
SNSは、一度読み込んだ情報を「記憶（キャッシュ）」しています。あなたが書き換えても、SNS側が「前見たときは名前なかったから、今回もなくていいよね」と判断している可能性があるんです。

解決策: 「OGP キャッシュクリア」と検索して、各SNSのデバッガーツールを使ってみましょう。これだけで、「あ、新しい情報だ！」とSNSが認識し直してくれます。

2. 他のタグとのセットが大事
`og:site_name`単体でも効果はありますが、基本的には以下のタグとセットで使うのが「お作法」です。

これらを揃えると、SNS上で「プロっぽい仕上がり」になります。全部一度にやろうとせず、まずは`og:site_name`から始めてみるのでも十分立派な一歩ですよ。

—

Webサイトを作ることは、自分の小さなお店を建てるようなものです。
`og:site_name`を入れることは、お店の入り口に堂々と「看板」を掲げることと同じ。

たとえ小さなブログでも、ポートフォリオサイトでも、しっかり名前を名乗ることで、読者は「あ、またこのサイトの記事を見たいな」と記憶してくれます。

最初は難しく感じるかもしれませんが、こうして一行ずつHTMLを育てていく経験が、いつか必ずあなたの大きな武器になります。焦らず、楽しみながら進めていきましょうね。

もし分からないことがあれば、いつでもまた聞きに来てください。応援しています！