目次
- はじめに：OGP と Twitterカードとは？
- OGP と Twitterカードのタイトルは「目的別」に分けて設定する
- それぞれの役割
- OGP タイトルの基本ルール
- 1. 30〜60文字以内が理想
- 2. 要点だけ簡潔に
- 3. 記号は使い過ぎない
- Twitter カードの基本ルール
- 1. 25〜45文字程度がベスト
- 2. 簡潔さ最優先
- 実際のコード例（そのまま使えます）
- OGP（Facebook / LINE 用）
- Twitterカード（X用）
- タイトルの作り方（初心者向けの簡単なコツ）
- 1. ページの目的を最初に出す
- 2. サイト名は後ろ or 終わりに
- 3. 途中で切れないように短く調整
- 4. 画像とセットで考える
- よくある失敗例（やりがちなミス）
- 1. 長すぎて途中で切れる
- 2. title と同じ文をそのまま使う
- 3. URL を間違える
- 4. og:image を設定し忘れる
- まとめ：SNSに強いサイトは OGP タイトルが決め手！
はじめに：OGP と Twitterカードとは？
Webサイトを Facebook・LINE・X（旧Twitter）などでシェアした時、「サイトのタイトル」「説明文」「画像」が自動表示されます。
この表示をコントロールする仕組みが
OGP（Open Graph Protocol） と Twitterカード（Twitter Card） です。
特に タイトル（title） は、クリック率に大きく関わる重要な要素です。
OGP と Twitterカードのタイトルは「目的別」に分けて設定する
SEOのタイトル（<title>）と
SNS用タイトル（OGP／Twitterカード）は 別物 と考えるのが正解です。
それぞれの役割
| 種類 | どこで使われる？ | 特徴 |
|---|---|---|
<title> |
Google検索 | 少し長くてもOK（SEO向け） |
| OGPタイトル | Facebook / LINE | 適度に短く・魅力的 |
| Twitterタイトル | X（旧Twitter） | さらに短くしないと途中で切れる |
OGP タイトルの基本ルール
1. 30〜60文字以内が理想
SNSのプレビューで切れない長さ。
2. 要点だけ簡潔に
サイト名 + 価値（例：ホームページ制作／ブログ）
3. 記号は使い過ぎない
「｜」「&」程度の区切りが最適。
Twitter カードの基本ルール
1. 25〜45文字程度がベスト
Twitter(X)は短いタイトルが切れずに全部表示される。
2. 簡潔さ最優先
ユーザーは説明より「パッと伝わる表現」を好みます。
実際のコード例（そのまま使えます）
OGP（Facebook / LINE 用）
<meta property="og:title" content="HP Build Studio｜定額制で始められるホームページ制作 & Web学習ブログ">
<meta property="og:description" content="定額制・買い切り対応のホームページ制作サービスと、初心者向けWeb学習ブログを運営しています。制作から公開・運用までサポート。">
<meta property="og:type" content="website">
<meta property="og:image" content="/public/img/ogp.png">
<meta property="og:url" content="https://example.com/">
<meta property="og:site_name" content="HP Build Studio">Twitterカード（X用）
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HP Build Studio｜ホームページ制作とWeb初心者サポート">
<meta name="twitter:description" content="ホームページ制作とWeb学習ブログを提供。定額制・買い切りの柔軟なプランでサポートします。">
<meta name="twitter:image" content="/public/img/ogp.png">タイトルの作り方（初心者向けの簡単なコツ）
1. ページの目的を最初に出す
例）「ホームページ制作」「ブログ」「料金プラン」など
2. サイト名は後ろ or 終わりに
例）
ホームページ制作なら｜HP Build Studio
3. 途中で切れないように短く調整
SNSの省略を避けるのが最優先。
4. 画像とセットで考える
OGP画像がしっかりあれば、タイトルは短くても情報が伝わります。
よくある失敗例（やりがちなミス）
1. 長すぎて途中で切れる
→ SNS では表示されず意味がなくなる。
2. title と同じ文をそのまま使う
→ SEO用は長く、SNSには不向き。
3. URL を間違える
→ OGPが正しく表示されず、旧サイト情報が出続ける。
4. og:image を設定し忘れる
→ SNSで地味すぎる見た目になる。
まとめ：SNSに強いサイトは OGP タイトルが決め手！
- OGP と Twitterカードは SNS の顔
- タイトルは 短く・簡潔・魅力的に
- SEOタイトルとは「別で考える」のがコツ
- コードは
<head>内に入れるだけでOK - URL と画像パスを間違えないことが最重要
初心者でもタイトルを正しく設定するだけで
SNSシェアの見た目が劇的に改善し、クリック率も大きく変わります。