OGPチェッカー

指定したURLのOGP（Open Graph Protocol）情報を瞬時に取得します。

OGPを確認するURLを入力

OGPチェッカーとは？

OGPチェッカーは、ウェブページがSNSでシェアされた際にどのように表示されるかを事前に確認できるツールです。指定したURLからSNSシェア用のOGP（Open Graph Protocol）タグとOGP画像を読み取り、X（旧Twitter）やFacebookなどのソーシャルメディアでの表示をシミュレートします。

OGPタグの設定が正しいか素早く確認でき、ウェブサイトをSNSでより魅力的に表示するための調整に役立ちます。サイト運営者やマーケティング担当者にとって、SNSでのブランドイメージ向上とクリック率改善を実現するための必須ツールです。

主な特徴

  • リアルタイムプレビュー: X（旧Twitter）、Facebookのプレビュー表示を実際と同様に確認可能
  • マルチデバイス対応: PCとモバイル両方の表示形式をシミュレート
  • 詳細情報表示: タイトル、説明文、画像URLなどすべてのOGPタグを一覧表示
  • 使いやすさ: URLを入力するだけで即座に結果を表示する簡単操作
  • 接続安全性: 安全なHTTPS接続でウェブサイト情報を取得

OGPチェッカーの活用シーン

  • ウェブサイト公開前: 新しいページやブログ記事を公開する前にOGP設定を確認
  • SNSマーケティング: キャンペーン配信前にシェア時の表示を最適化
  • クリック率改善: より魅力的な画像やタイトル、説明文に調整する際の確認
  • 競合調査: 他サイトのOGP設定を確認して参考にする
  • 問題解決: SNSで正しく表示されない原因を特定・修正

OGPチェッカーの使い方

基本的な使用手順

  1. URLを入力: 確認したいウェブページのURLを入力欄に貼り付けます
  2. チェック実行: 「OGPをチェック」ボタンをクリックします
  3. 結果確認: SNSプレビューとOGPタグ情報が表示されます

分析結果の見方

OGPチェッカーは以下の情報を表示します：

  • SNSプレビュー表示: X（旧Twitter）やFacebookでシェアした際の実際の表示イメージ
  • OGP画像: og:imageタグに設定された画像のプレビュー
  • 基本情報: タイトル（og:title）、説明（og:description）、URL（og:url）
  • タグ詳細: ページに設定されているすべてのOGPタグの一覧と値

OGP画像のプレビューにはog:imageメタタグが必要です。このタグが存在しない場合、画像プレビューは表示されません。

デバイス別表示について

  • PC利用時: PCとモバイル両方の表示形式を確認できます
  • モバイル利用時: モバイル用のOGP画像プレビューのみ表示されます

結果のキャッシュについて

本ツールのキャッシュ

本ツールでは、パフォーマンス向上のために結果を最大5分間サーバー側でキャッシュしています。これにより：

  • 同じURLを連続して確認する場合、最新の変更がすぐに反映されない場合があります
  • キャッシュは5分後に自動的に更新されます。最新の情報を確認するには、5分経過後に再度チェックしてください

SNS側のキャッシュ

各SNSプラットフォームも独自にOGP情報をキャッシュするため、ウェブページのOGP設定を変更しても、すぐにSNSでの表示に反映されない場合があります。

キャッシュをクリアする公式ツール:

OGP設定の最適化ガイド

適切なOGP画像サイズ

OGP画像は各SNSの仕様に合わせた最適なサイズがあります。不適切なサイズを使用すると、画像が切り取られたり、歪んだりして見栄えが悪くなる可能性があります。

2025年現在の推奨サイズ:

SNSプラットフォーム推奨サイズアスペクト比備考
共通（標準）1200×630px1.91:1最も広く対応されているサイズ
X（旧Twitter）1200×628px1.91:1大きな画像カードの場合
Facebook1200×630px1.91:1投稿・シェア時の標準サイズ
LinkedIn1200×627px1.91:1ほぼFacebookと同様
Pinterest1000×1500px2:3縦長のイメージが効果的

画像サイズに関する重要なポイント:

  • 最小サイズ: 少なくとも600×315px以上を使用（小さすぎると縮小表示される場合あり）
  • ファイルサイズ: 5MB未満に抑えるとロード時間が改善
  • 画質: 鮮明な画像を使用し、テキストは最小限に抑える
  • 重要な要素: 中央に配置（端の要素は切り取られる可能性あり）

OGP（Open Graph Protocol）について

OGPの基本概念

OGPは「Open Graph Protocol」の略で、Facebookが2010年に開発した後、多くのSNSプラットフォームで採用されているウェブ標準です。この仕組みにより、ウェブページがSNSでシェアされた際にリッチカード（画像、タイトル、説明文などを含む魅力的な表示形式）として表示されるようになります。

適切なOGP設定を行うことで以下のメリットがあります：

  • 視覚的魅力の向上: テキストのみの表示から画像付きの魅力的な表示へ
  • クリック率（CTR）の向上: 研究によると、リッチカード表示はCTRを最大3倍に向上させる可能性
  • ブランド認知度の強化: 一貫したビジュアル表現によるブランドイメージの向上
  • コンテンツの明確化: シェアされた際に内容が一目で理解できる

OGPタグの実装方法

OGPタグを実装するには、HTMLドキュメントの<head>セクションにメタタグを追加します。以下に完全な実装方法を示します：

基本的なOGPタグ

以下は実装すべき最低限のOGPタグです：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページのタイトル</title>

  <!-- 基本的なOGPタグ -->
  <meta property="og:title" content="ページのタイトル" />
  <meta property="og:description" content="ページの簡潔な説明（100-150文字程度）" />
  <meta property="og:url" content="https://example.com/page-url" />
  <meta property="og:image" content="https://example.com/image-url.jpg" />
  <meta property="og:type" content="website" />  <!-- article、book、profileなども指定可能 -->
  <meta property="og:site_name" content="サイト名" />
</head>
<body>
  <!-- ページコンテンツ -->
</body>
</html>

X（旧Twitter）向けの追加設定

Xでは、Twitter Cards用の専用タグも設定できます：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページのタイトル</title>

  <!-- 基本的なOGPタグ -->
  <meta property="og:title" content="ページのタイトル" />
  <meta property="og:description" content="ページの説明" />
  <meta property="og:url" content="https://example.com/page-url" />
  <meta property="og:image" content="https://example.com/image-url.jpg" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="サイト名" />

  <!-- X（Twitter）Cards用のタグ -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@YourXAccountName" />

  <!-- 以下はOGタグがあれば省略可能 -->
  <meta name="twitter:title" content="ページのタイトル" />
  <meta name="twitter:description" content="ページの説明" />
  <meta name="twitter:image" content="https://example.com/image-url.jpg" />
</head>
<body>
  <!-- ページコンテンツ -->
</body>
</html>

重要な注意点：

  • 画像やURLには必ず絶対URLを使用してください
  • 現代のプラットフォームでは<html>要素のprefix属性は不要です
  • 設定後は検証ツールで動作確認を行ってください

X（Twitter）カード向け追加設定

X向けにはTwitter Cardsと呼ばれる独自のタグも設定できます：

<head>
  <!-- 基本的なOGPタグ（上記参照） -->

  <!-- X（Twitter）カード用タグ -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@サイトのXアカウント名" />
</head>

X（Twitter）カードには主に以下のタイプがあります：

  • summary: 小さな正方形の画像付きカード
  • summary_large_image: 大きな横長画像付きカード（最も一般的）
  • app: アプリのインストールを促進するカード
  • player: 動画や音声コンテンツ用のカード

実装に関する重要なポイント

  • prefix属性は不要: 現代のソーシャルメディアプラットフォームでは、<html>タグにprefix="og: https://ogp.me/ns#"を追加する必要はありません
  • 必須タグ: 最低限og:title、og:type、og:image、og:urlを設定することを推奨
  • 画像URL: 必ず絶対URL（https://から始まるURL）を使用してください
  • Twitter重複回避: 基本的なOGPタグがある場合、twitter:title、twitter:description、twitter:imageは省略可能

詳しくはX開発者向け公式ドキュメントを参照してください。

よくある質問（FAQ）

Q: OGPタグを設定したのに正しく表示されません。どうすればいいですか？

A: 以下の点を確認してください：

  • OGP画像が正しいURLで、アクセス可能であるか
  • OGPタグが<head>セクションに正しく配置されているか
  • SNSのキャッシュをデバッガーツールでクリアしてみる

Q: OGPは検索エンジンのSEOに影響しますか？

A: OGPタグは直接的なSEOランキング要因ではありませんが、SNSでの共有増加によるトラフィック向上やエンゲージメント増加を通じて間接的にSEOにプラスの影響を与えることがあります。

Q: OGPチェッカーの結果と実際のSNS表示が異なる場合はどうすれば？

A: SNS側のキャッシュが原因の場合が多いです。各SNSの公式デバッガーツールを使用してキャッシュをクリアしてみてください。