SNSでリンクをシェアした際の「見た目」を左右する、OGP（Open Graph Protocol）タグについて深掘りしていきましょう。
OGPタグとは？（SNSでの「顔」を作る設定）
OGP（オープン・グラフ・プロトコル）とは、X（旧Twitter）やFacebook、LINEなどのSNSでサイトのURLが共有された際に、「タイトル」「説明文」「サムネイル画像」を正しく表示させるための仕組みです。
もしOGPを設定していないと、SNS側が勝手にサイト内の画像や文章を拾い上げるため、意図しない画像が表示されたり、文字化けしたりして、クリック率が大幅に下がってしまう可能性があります。
これだけは設定したい！主要なOGPタグ
OGPタグは、HTMLの <head> 内に <meta property="og:..." ...> という形式で記述します。
1. 基本の4要素
これらはどのSNSでも共通して使われる最も重要なタグです。
| タグ名 | 役割 | 書き方の例 |
| og:url | ページの絶対パスを指定 | https://example.com/page1 |
| og:type | ページの種類（website, articleなど） | article |
| og:title | SNSで表示したいタイトル | Webサイトのmetaタグ入門 |
| og:description | SNSで表示したい説明文 | 初心者向けにmetaタグを解説します。 |
| og:image | シェア時に表示される画像のURL | https://example.com/img/ogp.jpg |
2. X（旧Twitter）専用のタグ
Xでは、独自の「Twitterカード」という設定を追加することで、表示サイズを調整できます。
- twitter:card
summary: 小さい画像とテキストsummary_large_image: （おすすめ） 大きな画像が上に表示される、最も目立つ形式
HTML
<meta name="twitter:card" content="summary_large_image">
OGP設定の重要ポイント：画像のサイズ
OGPで最も重要なのは 「画像（og:image）」 です。以下のルールを守ると、どの媒体でも綺麗に表示されます。
- 推奨サイズ: 1200px × 630px
- アスペクト比: 1.91：1
- 注意点: 各SNSで端が切り取られることがあるため、重要な文字やロゴは中央付近に配置するのがコツです。
[Image showing OGP image safe zones and dimensions 1200×630]
設定したOGPを確認する方法
コードを書き換えた後は、ツールを使って実際にどう見えるか必ず確認しましょう。
- ラッコツールズ（OGP確認）: 複数のSNSでの見え方を一括でプレビューできる便利なサイトです。
- Facebookシェアデバッガー: Facebook側のキャッシュ（古い情報）を更新したい時に必須です。
