Open Graph Generator

Generate OG tags

Generate OG tags ブラウザ内でローカルに実行

Input

URL, title and description, separated by vertical bars.

About the

Open Graph Generator は、リンクが共有されたときにページがどのように表示されるかを制御する og タグを構築します。単一行の入力から og:url、og:title、og:description、および og:type を出力します。これは、ほとんどのプラットフォームが読み取る最小セットです。結果をページの先頭に貼り付けると、プレビューカードはプラットフォームが推測したものではなくなります。

Where people use the

現在共有タグがないページに共有タグを追加します。
間違ったタイトルまたは説明が表示されるリンクプレビューを修正しました。
一連のランディングページ全体で一貫したブロックを作成します。
ページが公開される前に、起動用のタグを準備します。

How to use the

1
3 つのフィールドに入力します
垂直バーで区切られた URL、タイトル、説明。例: https://example.com |ページタイトル |簡単な説明。
2
生成する
Web サイトに設定された og:type を含む 4 つの og タグが生成されます。
3
ブロックをコピーする
タグをページの先頭に貼り付けます。
4
画像タグを別途追加する
og:image は実際のファイルへの完全な URL が必要なため、含まれていません。公的にアクセス可能な画像を指定して、自分で追加します。

ヒントとベストプラクティス

絶対 URL を使用します。スクレイパーは相対パスを解決できません。
約 1200 x 630 ピクセルの og:image を自分で追加します。
タグを変更した後、プラットフォームデバッガーで再スクレイピングします。プレビューはキャッシュされます。

よくある質問

私の共有リンクがまだ間違っているように見えるのはなぜですか?

プラットフォームはプレビューを積極的にキャッシュします。タグが正しい場合は、プラットフォーム独自の共有デバッガーを使用して再スクレイピングを強制するか、キャッシュの有効期限が切れるまで待ちます。

og:image は必要ですか?

厳密にはそうではありませんが、画像のないリンクにはプレーンテキストカードが表示されるため、クリックされる可能性ははるかに低くなります。 1 つ追加します。

画像のサイズはどれくらいにすればよいでしょうか?

ほとんどのプラットフォームで切り抜きに耐えられるため、約 1200 x 630 ピクセルが一般的に推奨されます。

Twitter 固有のタグも必要ですか?

ほとんどのプラットフォームは og タグを読み取ります。 Twitter のカードタグはレイアウトをオーバーライドできますが、これはオプションです。

相対 URL を使用できますか?

いいえ。og:image と og:url は、スキームを含めて絶対値である必要があります。これは、外部スクレイパーには解決対象となるベース URL がないためです。