設定
OGP（Open Graph Protocol）とは？
OGP（Open Graph Protocol）は、Facebookが提唱したWebページの内容をSNSに最適化して表示するためのプロトコルです。 WebページのHTMLの `<head>` セクションに特定のメタタグを追加することで、SNSでシェアされた際に、タイトル、説明、画像などが意図した通りに表示されるようになります。
OGP画像の最適サイズ（重要）
結論：1200×630px（1.91:1）が最適
迷ったらこのサイズで作成すれば、ほぼ全てのSNSで適切に表示されます。
各SNSの推奨サイズ
| SNS | 推奨サイズ | アスペクト比 |
|---|---|---|
| 1200×630px | 1.91:1 | |
| Twitter(X) | 1200×600px | 2:1 |
| LINE | 1200×630px | 1.91:1 |
| Slack | 1200×630px | 1.91:1 |
ファイル形式: JPG（写真）/ PNG（イラスト・透明背景）
ファイルサイズ: 300KB以下推奨（最大8MB）
基本的なOGP設定例
<!-- 必須のOGPタグ -->
<meta property="og:title" content="ページのタイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/ogp-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="ページの説明文">
<!-- Twitter Card設定 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/ogp-image.jpg">OGP情報確認ツールの利用方法
- URL入力: 確認したいWebページのURLを「URL」入力欄に入力します。
- 「取得」ボタンをクリック: ボタンをクリックすると、指定されたURLのOGP情報が取得され、結果エリアに表示されます。
- 検証結果確認: エラー・警告・推奨改善の内容を確認し、必要に応じて修正します。
OGPの重要性
- クリック率の向上: 魅力的な画像や説明が表示されることで、ユーザーの興味を引き、クリック率が向上します。
- ブランドイメージの統一: 意図しない表示を防ぎ、SNS上でのブランドイメージを統一できます。
- 情報の正確な伝達: ページの内容を正確に伝えることで、誤解を防ぎます。
- SEO効果: 構造化されたメタデータは検索エンジンの理解も向上させます。
よくある問題と対処法
- 画像が表示されない: 画像URLがHTTPS、アクセス可能、適切な拡張子(.jpg, .png等)か確認
- 古い情報が表示される: SNSのキャッシュが原因。各SNSのデバッグツールでキャッシュクリア
- レイアウトが崩れる: 画像サイズが適切か、og:image:widthとheightが実際のサイズと一致しているか確認
- 情報が取得できない: CORSの制限により、このツールで取得できない場合があります