Softonic

Open Graph タグジェネレーター

ステップ 1 / 2
次へ

タイトル、説明、正規（canonical）URL、プレビュー画像、og:type を入力すると、このジェネレーターが対応する Open Graph の <meta> タグを書き出し、ページの <head> に貼り付けられる状態にします。空欄のフィールドは単に省かれ、テキスト内の引用符とアンパサンドはマークアップが有効なままになるようエスケープされます。このジェネレーターは中核となる 5 つの og: プロパティのみを書き、Twitter Card や article タグは書きません。

OG タグを生成する方法

  1. 1

    og:type を選ぶ

    ホームページには website、投稿には article、ショップページには product、埋め込みには video.other を使います。このフィールドは自由入力なので、有効な og:type 値ならどれでも動きます。

  2. 2

    中核フィールドを入力する

    タイトル、説明、正規 URL、そして絶対 URL の画像。空欄にしたフィールドは出力から省かれます。

  3. 3

    タグを生成する

    引用符とアンパサンドは自動でエスケープされ、入力したフィールドごとに meta 行が 1 つ得られます。

  4. 4

    ブロックを head にコピーする

    ページテンプレートの `<head>` 内、既存のソーシャルタグの上に貼り付けます。

このジェネレーターが生成するタグ

<meta property="og:type" content="article">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A one-line description.">
<meta property="og:url" content="https://example.com/post/123">
<meta property="og:image" content="https://example.com/og-image.jpg">

これが出力のすべてです。og:type は常に書き出され、og:title、og:description、og:url、og:image は入力したときだけ追加されます。この 5 つのプロパティは Facebook、LinkedIn、Slack、Discord、WhatsApp、X が最初に読むもので、一般的なケースをカバーします。

このジェネレーターは twitter: カードタグ、og:image:width / og:image:height、og:site_name、og:locale、article: タグは書きません。必要な場合は、生成されたブロックの横に手動で追加してください。

重要な og:type の値

タイプ 使いどころ
website ホームページ、ランディングページ、静的コンテンツ
article ブログ投稿、ニュース、編集ページ
product EC の商品詳細ページ
video.other 動画コンテンツと埋め込み
profile 著者またはユーザーのプロフィールページ
music.song 個々のトラックページ

手動で追加する価値のあるタグ

タグ 役割 値の例
og:site_name サイト全体の名前 Example
og:locale ページの言語と地域 en_US
og:image:width スクレイパーがカードを速く配置するのを助ける 1200
og:image:height スクレイパーがカードを速く配置するのを助ける 630
twitter:card X でのカードレイアウト summary_large_image

X は twitter: タグがないとき og: タグにフォールバックするので、生成された 5 つのプロパティだけを持つページでもそこで正しくプレビューされます。X で特に異なるタイトル、説明、画像を出したいときだけ twitter: タグを追加してください。

このジェネレーターが避けるのを助けるよくある間違い

  • property ではなく name。 Open Graph のプロパティは property="og:..." に入ります。このジェネレーターは常に正しい属性を書きます。
  • エスケープされていない引用符とアンパサンド。 タイトル内の生の " や & はタグを壊します。このジェネレーターが代わりにエスケープします。
  • 相対 URL の画像。 ソーシャルのスクレイパーは絶対 URL のみを受け付けます。ジェネレーターはドメインを補わないので、画像の完全な https:// アドレスを貼り付けてください。
  • 誤った画像サイズ。 1200 × 630 px が普遍的に安全なサイズです。200 × 200 px 未満だと画像は通常拒否されます。

よくある質問

HTML の <head> 内の上の方、できれば <title> の近くに置きます。スクレイパーは head を読んで早めに止まることが多いので、OG タグを上の方に保つと、とても大きなページで見落とされるのを防げます。

いいえ。中核の og: プロパティ 5 つだけを書きます。X は twitter: タグがないとき Open Graph にフォールバックするので、プレビューはそのまま動きます。X で異なるタイトル、説明、画像を出したいときだけ twitter: タグを手動で追加してください。

1200 × 630 px の JPG または PNG が普遍的に安全なサイズです。Facebook、LinkedIn、X の大きいカード、Slack、Discord、iMessage で動きます。200 × 200 px 未満だと完全に拒否されるおそれがあります。

各言語版に独自の og: タグを持つ独自のページを用意し、og:locale（例：en_US）と、他の版のための og:locale:alternate を手動で追加します。このジェネレーターは locale タグを代わりに書きません。

関連ツール

メタディスクリプション長チェッカー

メタディスクリプションの文字数と推定ピクセル幅を測り、編集上の目安やデスクトップ・モバイルのレイアウト例と比較します。

外部リンク抽出ツール

生のHTMLを貼り付け、必要に応じてベースURLを指定すると、コード内の外部http/httpsリンクを重複なしで一覧表示します。リンク監査やSEOレビューに最適です。

HTTPセキュリティヘッダーチェッカー

HTTPレスポンスヘッダーを貼り付け、HSTS、CSP、クリックジャッキング、MIME、リファラ、クロスオリジン設定をブラウザー内で確認します。

Google SERP シミュレーター

モバイルとデスクトップの文字数上限を使って、Google 風の検索スニペットを概算で確認します。下書きはこのブラウザーセッション内にのみ残ります。

FAQスキーマ生成ツール

質問と回答のペアからFAQPageのJSON-LDマークアップを生成します。Googleのリッチリザルトや強調スニペットの対象になるための構造化データを数秒で用意できます。

Canonicalタグジェネレーター

任意のURLに対して有効なrel=canonical linkタグを生成します。URLの検証と、避けるべきよくあるミスも含みます。

このツールは他の言語でも利用できます