このツールについて
Open Graph (OG) タグは、ソーシャル プラットフォームで共有されたときにページがどのように表示されるかを制御します。 Facebook、LinkedIn、Slack、Discord、その他多くの企業は、OG タグを読んでプレビュー カードを作成します。適切な OG タグがないと、一般的なファビコン、画像の欠落、タイトルの切り詰めなど、共有リンクが壊れているように見えます。これらを使用すると、株式は洗練されたように見え、クリックスルー率が大幅に向上します。
標準の OG タグ: og:title (プレビューに表示されるタイトル)、og:description (テキストのスニペット)、og:image (プレビュー画像、理想的には 1200×630)、og:url (正規 URL)、og:type (通常は「ウェブサイト」または「記事」)。 Twitter Card タグ レイヤーが上部にあります: twitter:card、twitter:title、twitter:description、twitter:image。 Twitter 固有のタグが存在しない場合、ほとんどのツールは OG にフォールバックします。
このジェネレーターは、入力から OG および Twitter Card タグの完全なセットを生成します。結果の HTML をページの <head> に貼り付けます。その結果、すべての主要なソーシャル プラットフォームで正しいプレビュー レンダリングが行われます。
OG タグジェネレーターを使用する理由
OG タグのないページは、共有したときに見栄えが悪くなります。空の画像、一般的なタイトル、説明の欠落 - プレビューは、フィード内の適切にタグ付けされたページとあまり競合しません。コンテンツ マーケティングとリンク共有の場合、これはクリックスルー率に直接影響します。
OG タグを手書きするのは繰り返し作業です。各ページには独自のセットが必要です。いくつかの入力から正しいタグを生成するジェネレーターは、ソーシャル プレビューを壊すタイプミスやプロパティの欠落を回避します。
技術的な詳細
OG タグは、メタ プロパティ属性 (名前ではありません) を使用します: <meta property="og:title" content="..." />。 property 属性は OG に必須です。一部のパーサーは名前をフォールバックとして受け入れますが、プロパティは正しいです。
画像要件: Retina レンダリングの場合は 1200×630 ピクセル、アスペクト比は 1.91:1。 og:image:width タグと og:image:height タグは、プラットフォームが画像を正しくキャッシュするのに役立ちます。 og:image:alt はアクセシビリティ テキストを提供します。
Twitter Card タグは name 属性を使用します: <meta name="twitter:title" content="..." />。 Twitter 固有のタグが存在しない場合、Twitter は OG タグに戻るため、多くの場合、適切に設定された OG で十分です。 twitter:card を追加すると、カード タイプが明示的に選択されます (summary_large_image が最も一般的です)。
よくある質問
- 生成された出力をカスタマイズできますか?
- はい。このツールには、特定のニーズに合わせて出力を調整するためのさまざまなカスタマイズ オプションが用意されています。生成する前に設定を調整するか、別のオプションを使用して再生成します。
- 生成されたコンテンツは無料で使用できますか?
- はい。このツールで生成したものはすべて、制限や帰属要件なしで、個人、教育、商業目的で使用できます。
- これにはアカウントが必要ですか?
- いいえ。このツールはサインアップ、電子メール、登録を必要とせずにすぐに使用できます。ページを開いて生成を開始するだけです。
- 私の入力データは非公開に保たれますか?
- はい。すべての処理はブラウザ内で行われます。入力データと生成された出力が外部サーバーに送信されることはありません。
- すべてのページに同じ OG 画像を使用できますか?
- 可能ですが最適ではありません。ページ固有の画像は、クリックスルーの点で一般的なサイト全体の画像よりも優れています。フォールバックにはデフォルトを使用しますが、重要なコンテンツについてはページごとの画像を生成します。
- 画像の寸法宣言は必要ですか?
- 役立ちますが、厳密には必須ではありません。 og:image:width と og:image:height を使用すると、プラットフォームは寸法を決定するために再取得することなく画像をキャッシュできます。以降の共有を高速化します。
- 私のデータはアップロードされていますか?
- いいえ。生成はブラウザ内で行われます。
- OG タグをテストするにはどうすればよいですか?
- Facebook Sharing Debugger、Twitter Card Validator、LinkedIn Post Inspector はそれぞれフェッチして検証します。新しい OG タグをデプロイした後に使用します。