OGP・metaタグ生成
タイトル・説明・画像URL・ページURLから、OGP・Twitter Card・descriptionのmetaタグHTMLを生成します。SNSシェア用プレビューも表示。入力はブラウザ内だけで完結します。
例（クリックで試す）
生成HTML
SNSカードプレビュー
画像URLを入力
EXAMPLE.COM
タイトル
説明文
生成から設置までの手順
- 公開後に使うページURL、タイトル、説明文、画像の絶対URLを入力します。
- 通常ページは
website、記事はarticleなど、ページの性質に合うog:typeを選びます。 - カード風プレビューでタイトル・説明・画像領域のバランスを確認します。
- 生成HTMLをコピーし、ページの
<head>内へ1組だけ設置します。
入力例と生成される役割
https://example.com/pricingという料金ページなら、ページ固有のタイトルと要約、公開画像のURLを設定します。og:titleとog:descriptionは共有カードの見出しと説明、og:urlは共有対象、og:imageはカード画像を示します。通常のdescriptionとTwitter Card用タグも同じ入力から作ります。
画像URLとプレビューの注意
画像は、SNSのクローラーが認証なしで取得できる公開HTTPS URLにします。相対パス、localhost、社内URL、ログインが必要なURLは共有先から見えません。本ツールは入力URLへ接続せず画像領域だけを表示するため、実画像の縦横比・切り抜き・取得可否は各SNSのデバッガーでも確認してください。
Open Graph Protocolの基本メタデータは公式仕様で確認できます。サービスごとにキャッシュや独自要件があるため、このプレビューと公開後のカードが完全に一致する保証はありません。
関連するメタデータツール
Google検索結果のタイトル・説明の見え方はSERPスニペットプレビュー、ページ内容を検索エンジンへ構造化して伝えるJSON-LDはJSON-LD生成で確認できます。
よくある質問
生成したタグはどこに貼りますか？
HTMLの head 要素内に貼り付けます。CMSやフレームワークでは、同じ値をSEO設定やSNS共有設定の入力欄へ設定してください。既存タグとの重複は避けます。
画像そのものはプレビューされますか？
いいえ。プライバシー保護と外部通信防止のため、入力した画像URLへアクセスせず、カード内では画像領域だけを示します。生成するog:imageタグには入力URLが入ります。
画像URLには何を指定しますか？
SNSのクローラーがログインなしで取得できる、公開された絶対HTTPS URLを指定します。localhost、端末内ファイル、認証必須URLは共有先から取得できません。
入力内容はサーバーに送信されますか？
いいえ。タグ生成とレイアウトプレビューはすべてブラウザ内で完結し、入力した画像URLへの読み込みも行いません。