無料WEBツールdigtoooooools

by 大阪のホームページ制作会社digrart

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

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

記事公開前の見え方のテストにご活用ください。

基本設定を入力

🖼️
EXAMPLE.COM
タイトル
説明文

※実際のアプリのバージョンにより見え方が若干異なる場合があります。

生成された Metaタグ (HTML / WordPressの<head>にコピペ)


    
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形式でのコードを出力します。
SNS・エンタメ
WEB開発ツール
SEO対策
ネットワーク
セキュリティ
画像処理・テキスト解析
ビジネス
生活