こんな方におすすめ
- 共有リンクを準備する編集者
- SNSメタデータを実装する開発者
Developer SEO Utility
Open Graph プレビュー
タイトル、説明、URL、代表画像URLを入力すると、KakaoTalk、Facebook、X/Twitterの共有カードを確認し、OG/Twitter metaタグを生成できます。
OGカードプレビュー
リンク共有時に表示されるタイトル、説明、代表画像、サイト名を確認できます。
プラットフォーム別プレビュー
KakaoTalk、Facebook、Twitter形式のリンク共有プレビューを比較できます。
Metaタグ自動生成
Open GraphとTwitter Cardのmetaタグを生成し、コピーまたはダウンロードできます。
STEP 1
Open Graph情報入力
共有プレビューに使うタイトル、説明、URL、代表画像の情報を入力してください。
推奨テキスト長
タイトルは約60文字、説明は約150文字にすると、共有カードでの省略を減らせます。
推奨画像比率
代表画像には1200x630px、または1.91:1の横長画像がおすすめです。
0/60文字推奨
0/150文字推奨
og:urlとtwitter:urlに使用されます。
og:imageとtwitter:imageに使用されます。
og:site_nameに使用されます。
共有コンテンツの種類です。
STEP 2
待機中
共有プレビュー
各プラットフォームで共有カードがどのように見えるか確認できます。
OG IMAGE
共有タイトルがここに表示されます
共有説明がここに表示されます。
win-j.comOG IMAGE
WIN-J.COM
共有タイトルがここに表示されます
共有説明がここに表示されます。
OG IMAGE
共有タイトルがここに表示されます
共有説明がここに表示されます。
https://example.com/page/
STEP 3
生成結果
以下のコードをHTMLのhead領域に追加してください。
情報を入力してOGタグを生成ボタンをクリックしてください。
STEP 4
Open Graphチェック項目
共有プレビューの品質は、タイトル、説明、画像、正規URLの設定で変わります。
og:title
共有カードのメインタイトルです。長すぎると省略されるため、短く明確に書くのがおすすめです。
og:description
共有カードの説明欄に表示されます。ページ内容を簡潔に要約するとクリック率の改善に役立ちます。
og:image
リンク共有時に最も目立つ画像です。1200x630pxの横長サムネイルをおすすめします。
簡易共有プレビューでOpen Graphタグを準備する
タイトル・説明・ページURL・画像URLからOGと任意のTwitter Cardタグを生成します。3種類の近似レイアウトを比べ、公開後は実際の共有サービスでも確認してください。
活用場面
- タイトルと画像の組み合わせを比較する。
- コピーできるOGタグ案を作る。
入力から結果の確認まで
- 1
公開ページと代表画像のURLを用意します。
- 2
タイトル・説明・サイト名・種類を入力します。
- 3
近似カードと文字数の警告を確認します。
- 4
タグを生成し、エラーを修正してheadに反映します。
- 5
公開ソースと共有サービスの確認ツールで検証します。
ページ共有カード
- 入力
- website、タイトル・説明、https://example.com/tool/、https://example.com/card.jpg
- 結果
- OGタグと任意のTwitter Cardタグ
実際のクローラーがページと画像を取得できる必要があります。
長いタイトル
- 入力
- 文字数確認を有効にし、60文字超のタイトルを入力
- 結果
- タグと確認用の警告
60文字はツール独自の目安で、全サービス共通の上限ではありません。
計算・処理の仕組み
HTML属性をエスケープし、認証情報を含まないHTTP(S) URL形式を確認します。画像URL検査を無効にしても、画像プレビューには有効なURLが必要です。文字数警告はタイトル60、説明150コード単位が基準です。
注意点と制限
- 実際の切り抜きや省略位置を再現しません。
- 画像サイズ、MIME、HTTP応答やクローラー制限は検査しません。
- 更新後も古い共有カードがキャッシュに残る場合があります。
データの取り扱い
文章とタグはローカル処理ですが、画像は入力したホストへ直接リクエストします。相手にIPなどが伝わるため、非公開・署名付きURLは避けてください。
参考資料
あわせて使えるツール
- Meta Tag ジェネレーター
title・description・robots・任意のcanonicalとOG・Twitter Cardを生成します。既存テンプレートと照合し、同じメタ情報が重複しないように反映します。
- SEO Head チェッカー
貼り付けたheadの欠落・重複・URL形式を確認します。割合はwin-j独自の点検値で、Googleの点数やインデックスの予測ではありません。
よくある質問
実際のサービスの表示ですか？
いいえ。配置比較用の近似画面です。
画像が表示されない理由は？
公開アクセス、応答やホスト制限を確認してください。形式だけでは取得可能性を判断できません。
画像URLは外部に送られますか？
プレビュー時にブラウザーが画像ホストへアクセスします。