GUIDE
OGP・SNSシェアカードプレビュー／タグ作成の使い方
OGP・SNSシェアカードプレビュー／タグ作成は、Webページのタイトル、説明、URL、画像URL・寸法・代替説明を入力し、汎用的なシェアカード見本とOpen Graph・X向けmetaタグを作る無料ツールです。貼り付けたhead断片から基本タグの不足や空のcontentも確認できます。SNSごとのタグを手作業で並べる手間を減らし、公開前に文言、画像比率、URL、代替説明をまとめて確認できます。入力URLの先へアクセスせず、内容はブラウザ内だけで処理します。
このツールでできること
入力と同時にカード構成を確認
タイトル、説明、ページURL、画像URL、画像寸法、代替説明、サイト名を1画面で入力し、汎用的な1200:630比率のカード見本へ反映します。画像URLは自動取得せず、端末内の画像を任意で選ぶとブラウザ内だけで実画像の見本を確認できます。
Open Graph・X向けタグを一括作成
og:type、title、description、url、image、画像幅・高さ・代替説明、site_nameと、summary_large_imageを使うX向けタグをHTMLエスケープして生成し、まとめてコピーできます。
既存head断片の不足を静的診断
貼り付けたmetaタグからog:title、description、url、imageの不足をエラー、画像寸法・代替説明・twitter:cardの不足を警告として表示します。実URLや画像へアクセスせず、入力内容・生成結果を外部送信しません。
かんたん3ステップ
- 1ページのタイトル、説明、絶対URL、画像の絶対URL・幅・高さ・代替説明を入力します。既存ページを確認する場合は、HTMLのhead断片も任意で貼り付けます。
- 2汎用シェアカード見本で文言と画像領域を確認し、「プレビューとタグを作成」を押します。URL形式、寸法、長い文言、代替説明の注意とhead断片の不足を確認します。
- 3生成タグをコピーしてサイトのテンプレートへ反映します。公開後は各SNSの公式デバッガーや実際の共有画面で取得結果を確認し、キャッシュが残る場合は各サービスの手順に従ってください。
こんな方におすすめ
Web制作者、広報・SNS担当者、ブロガー、LPや記事を公開する個人事業主に向いています。新しいページのOGPタグを作るとき、既存head断片の不足を確認するとき、タイトルと説明がカード内でどうまとまるかを制作担当者間で共有したい場面で利用できます。
利用上の注意
- 初期版は利用者が入力した情報と貼り付けたhead断片だけを静的に処理します。URL先、画像、公開済みHTMLを取得せず、外部API、複数ページ監査、ブランドプリセット、キャッシュ更新は行いません。
- カード見本は特定SNSの完全再現ではありません。各サービスの表示、文字省略、画像切り抜き、取得時点、キャッシュ、推奨寸法は変更される場合があります。The Open Graph protocolとXの最新公式資料、公開後の実表示を確認してください。
よくある質問
入力した画像URLの画像を取得しますか？
取得しません。外部送信や意図しないアクセスを避けるため、画像URLからの自動読込は行いません。実画像の見本を確認したい場合は、端末内の画像をプレビュー用に選択できます。選択画像はブラウザ内だけで表示され、生成タグには入力した画像URLを使用します。
既存ページのURLだけでタグを診断できますか？
できません。初期版は実URLへアクセスしないため、ページのhead断片をコピーして任意入力欄へ貼り付けてください。入力した断片はブラウザ内だけで解析し、サーバーや外部サービスへ送信しません。
見本どおりにXやSNSで表示されますか？
保証されません。見本はタイトル、説明、ドメイン、画像領域の一般的な構成を確認するためのものです。サービスごとの取得仕様、キャッシュ、文字数、画像処理で変わるため、公開後に実際の共有表示と公式デバッガーを確認してください。
次に使える関連ツール
同じ目的の作業を続けて進められる無料ツールです。