OGP・X(Twitter)カード確認シミュレーター＆タグ生成ツール

1. ページのURLを入力して「情報を取得する」ボタンを押すと、現在の設定を自動で読み込みます。
2. 各項目を自由に編集すると、上部のプレビュー画面にリアルタイムで反映されます。

OGPって何？

OGP（Open Graph Protocol）は、WebページがX（旧Twitter）、Facebook、LINEなどのSNSでシェア（共有）された際に、そのページのタイトル、説明文、サムネイル画像などを正しく・魅力的に表示させるためのHTMLの仕組み（メタタグ）です。

設定しないとどうなる？

OGPタグが設定されていないページがシェアされると、SNS側が適当にページ内の文章や画像を拾って表示してしまいます。
結果として、「画像が意図しないロゴになってしまう」「タイトルや説明文が切れていてクリックしたくならない」といった事態になり、SNSからの流入（アクセス数）を大きく取り逃がす原因になります。

OGP画像の推奨サイズについて

現在の主流として、OGP画像の推奨サイズは 横 1200px × 縦 630px（比率 1.91 : 1） です。
このサイズで作成しておけば、X（Twitter）のLargeカード、Facebook、LINEのすべてで綺麗に表示されます。（※ただし、LINEの小さな正方形表示等に備えて、重要な文字情報は画像の中央に配置することをおすすめします）

X（Twitter）でシェアされた際の表示形式（カード機能）には、主に以下の2種類があり、OGPタグの twitter:card の値で指定します。

Summary Card with Large Image（大サイズ）

横長の大きな画像が表示される、現在もっとも一般的でクリック率が高い形式です。twitter:card には summary_large_image を指定します。

Summary Card（小サイズ）

左側に小さな正方形の画像、右側にテキストが配置されるコンパクトな形式です。ブログの一般的な記事などで使われることが多いです。twitter:card には summary を指定します。
※本ツールでは、デフォルトで訴求力の高いLarge Image形式でのコードを出力します。