","err_audit_input_required":"最初にメタ タグを含む HTML を貼り付けます。","mockups_heading":"リンクのプレビューとして表示される様子","mockups_disclaimer":"これら 4 つのカードは、各プラットフォームの実際のリンク プレビュー クロムのスタイルを近似したもので、計画目的のみに作成されています。これらは Twitter/X、Facebook、LinkedIn、Discord のライブ フェッチやスクリーンショットではなく、プラットフォームは時間の経過とともに独自のプレビュー UI のスタイルを変更する可能性があります。","mockup_twitter_heading":"ツイッター / ×","mockup_facebook_heading":"フェイスブック","mockup_linkedin_heading":"リンクトイン","mockup_discord_heading":"不和","mockup_image_alt":"リンクプレビュー画像","mockup_no_image":"画像が提供されていません","mockup_no_image_short":"画像なし","domain_default_fallback":"例.com","audit_missing_title":"og:title が欠落しています — ほとんどのプラットフォームでは、og:title のない一般的なタイトルまたは空白のタイトルが表示されます。","audit_missing_description":"og:description が欠落しています — プレビュー カードには概要テキストが表示されません。","audit_missing_image":"og:image が欠落しています — ほとんどのプラットフォームでは画像が表示されないか、ページ上で最初に見つかった画像に戻ります。","audit_missing_url":"og:url が欠落しています — og:url がないと、代替 URL (トラッキング パラメーター、AMP バージョンなどを含む) の共有が正規ページに統合されない可能性があります。","audit_title_too_long":"og:title は {length} 文字です。ほとんどのプラットフォームでは ~{max} 文字の位置で切り捨てられます。","audit_title_long":"og:title は {length} 文字です。~{max} 文字を超えているため、一部のプラットフォームでは切り捨てが開始されますが、他の場所では完全に表示される可能性があります。","audit_title_ok":"og:title は {length} 文字です。ほとんどのプラットフォームでは安全な範囲内です。","audit_description_too_long":"og:description は {length} 文字です。ほとんどのプラットフォームでは ~{max} 文字の位置で切り取られます。","audit_description_long":"og:description は {length} 文字です。~{max} 文字の位置を超えており、一部のプラットフォームでは切り捨てが開始されます。","audit_description_ok":"og:description は {length} 文字です。ほとんどのプラットフォームでは安全な範囲内です。","audit_url_not_absolute":"og:url 値「{value}」は絶対 http(s) URL ではありません。ページの完全な正規 URL である必要があります。","audit_image_not_absolute":"og:image 値 \"{value}\" は絶対 http(s) URL ではありません。ほとんどのプラットフォームでは完全修飾された画像 URL が必要です。","audit_image_dims_small":"宣言された og:image:width/height は {w}×{h} であり、リンク プレビューで広く推奨されている最小値 1200×630 を下回っています。","audit_image_dims_ok":"宣言された og:image:width/height は {w}×{h} であり、広く推奨されている最小値 1200×630 を満たしています。","audit_image_dims_unparseable":"og:image:width/og:image:height は存在しますが、有効な数値ではありません。","audit_image_dims_unknown":"og:image:width/og:image:height が宣言されていません — 画像を取得せずに実際のピクセル寸法を検証することはできませんが、このツールはプライバシーの観点から仕様上、これを行いません。推奨最小値: 1200×630。","audit_twitter_card_missing":"twitter:card タグなし — Twitter/X は通常、同等の og: タグに戻りますが、明示的な twitter:card の方が信頼性が高くなります。","audit_twitter_card_invalid":"twitter:card 値 \"{value}\" は、Twitter の Card バリデータが受け入れる 4 つの値 (summary、summary_large_image、app、player) のいずれでもありません。","audit_twitter_card_ok":"twitter:card は \"{value}\" であり、有効な値です。","audit_large_image_needs_image":"twitter:card は summary_large_image ですが、og:image または twitter:image が見つかりませんでした。このカード タイプを適切にレンダリングするには画像が必要です。","audit_twitter_title_fallback":"twitter:title が設定されていない — Twitter/X は og:title に戻ります。","audit_twitter_description_fallback":"twitter:description が設定されていない — Twitter/X は og:description に戻ります。","audit_twitter_image_fallback":"twitter:image が設定されていない — Twitter/X は og:image にフォールバックします。","audit_duplicate_tag_item":"「{tag}」は {count} 回宣言されています。ほとんどのプラットフォームで解析される最後の 1 回だけが実際に有効になります。"};
⭐ 0
🔍
テキスト 画像 PDF・ドキュメント 音声 音楽 電子回路 時間 便利ツール バリデータ スピリチュアル ゲーム

OG & Twitter カード ジェネレーター — メタ タグ ビルダー、監査、プレビュー

すぐに貼り付けられる Open Graph および Twitter Card の <meta> タグをフォームから作成するか、既存の <head> を貼り付けて、タグの欠落、タイトル/説明の長さ、twitter:card の有効性を監査します。その後、両方を完全にスタイル変更された Twitter/X、Facebook、LinkedIn、および Discord のリンクカード モックアップでプレビューします。

Buy Me a Coffee at ko-fi.com
処理中... 0%
入力の読み取り
タグの構築/監査
レンダリングプレビュー
完了

結果

Open Graph と Twitter Card のメタ タグは、リンクが Slack、iMessage、ツイート、または Discord チャネルに貼り付けられた瞬間にそのリンクがどのように見えるかを決定します。タイトル、説明、画像は、プラットフォームが表示される本文テキストからたまたま収集したものではなく、ページ自体の <head> によって選択されます。このツールはビルダーと監査の両方であり、汎用のテンプレート入力ツールではありません。 BUILD モードでは、タイトル、説明、画像 URL、正規 URL、コンテンツ タイプ、Twitter カード タイプを入力すると、正確な <meta property="og:..."> タグ ブロックと <meta name="twitter:..."> タグ ブロックが構成され、ページの <head> に貼り付ける準備が整い、空のコンテンツを含む空のタグが生成されるのではなく、空のままにしたフィールドはスキップされます。

AUDIT モードでは、既存の <head> マークアップまたはページの HTML 全体を貼り付けると、ツールがブラウザーのネイティブ DOMParser でそれを解析して、すでに存在するすべての og: および twitter: メタ タグを抽出し、実際に重要なチェックを実行します。一般的に必要な 4 つのタグ (og:title、og:description、og:image、og:url) が欠落している場合はフラグが付けられます。 og:title は、一部のプラットフォームで切り詰めが開始される約 60 文字のポイントと、ほとんどのプラットフォームで切り詰められる約 90 文字のポイントに対して測定されます。 og:description は、ほとんどのプラットフォームで許可されているおよそ 155 ～ 200 文字の範囲に対して測定されてから、切り取られます。 twitter:card は、Twitter の Card バリデーターが受け入れる実際の 4 つの値 (summary、summary_large_image、app、player) と照合され、それ以外の場合にはフラグが付けられます。重複したタグ (同じプロパティが 2 回宣言されている、驚くほどよくあるコピー＆ペーストのバグ) は名前で呼び出されます。

画像のサイズは正直に扱われます。このツールは、画像を取得せずに実際のピクセル サイズを確認することはできません。また、このサイトの外部リクエスト禁止ポリシーに合わせて、意図的にそのようなことは決して行いません。 HTML で既に og:image:width および og:image:height が宣言されている場合、それらの宣言された数値は広く推奨されている最小値 1200×630 と照合されます。そうでない場合は、捏造された合否ではなく、明確なガイダンスノートが表示されます。どちらのモードも、同じ 4 つのリンク プレビュー モックアップをレンダリングします。Twitter/X (twitter:card の値に応じて、コンパクトな「まとめ」サムネイル レイアウトと全幅の「summary_large_image」レイアウトを切り替えます)、Facebook、LinkedIn、Discord です。それぞれは、異なるロゴが付いた 1 つのボックスではなく、そのプラットフォーム独自のタイポグラフィとレイアウト規則に一致するように純粋にスタイル変更されており、実際のプラットフォームではスタイルが変更されているため、それぞれが計画目的の近似例として明確にラベル付けされています。クロムを時間の経過とともにプレビューしますが、このツールはチェックのためにそれらをフェッチしたりスクレイピングしたりすることはありません。

🛡️
ブラウザ内で実行

100% クライアントサイド。ファイルはデバイスから送信されません。完全なプライバシー保護。

受け入れられる形式とルール

  • BUILD モードは、og:title、og:description、og:image、og:url、og:type、og:site_name、および一致する twitter:card/twitter:site/twitter:title/description/image タグを構成し、空白のままにしたフィールドをスキップし、すぐに貼り付けられるブロックのワンクリック コピーを使用します。
  • AUDIT モードは、ブラウザの DOMParser を介して貼り付けられた HTML からすべての og:/twitter: <meta> タグを抽出し、必須タグ (og:title/description/image/url) の欠落、重複タグ、および無効な twitter:card 値にフラグを立てます。
  • 長さのガイダンスでは、一般的に引用される実際のしきい値が使用されます。og:title は、一部のプラットフォームで切り捨てが開始される前の約 60 文字 (最も寛容なプラットフォームでは約 90 文字まで)、og:description は約 155 ～ 200 文字です。
  • Twitter/X カードを、宣言されたカード タイプに応じた正しいレイアウト (小さな正方形のサムネイルが付いたコンパクトな「概要」カード、または全幅の「summary_large_image」レイアウト) で、Facebook、LinkedIn、Discord のプレビューと並べてレンダリングします。

主な利点

✓ 2 つの実際のツールが 1 つになっています。フォームから正確な og: および twitter: <meta> タグ HTML を生成する BUILD モードと、貼り付けられた HTML を解析して既存のタグを検索して評価する AUDIT モードです。
✓ 表面上のチェックリストではなく、実際の検証: 必須タグが欠落していること、og:title/og:description の長さがプラットフォームが切り捨てる実際の制限と照合していること、そして twitter:card が実際に許可されている 4 つの値と照合していること。
✓ オフラインで検証できないことについては正直に説明します。画像のピクセル寸法は、HTML で既に og:image:width/og:image:height が宣言されている場合を除き、ガイダンスのみです。これは、プライバシー保護のため、このツールは仕様上、画像を取得することがないためです。
✓ 同じタイトル/説明/画像から作成された 4 つのまったく異なるプラットフォームのモックアップ (Twitter/X の概要と summary_large_image レイアウト、Facebook、LinkedIn、Discord) で、説明用として明確にラベルが付けられています。

使用例

  • • 適切なソーシャル カードを使用して新しいブログ投稿を送信します。タイトル、説明、ホストされたカバー画像を入力し、og:/twitter: タグ ブロックを生成して、ページの <head> に直接貼り付けます。
  • • CMS 移行後に既存のランディング ページの <head> を監査して、欠落している og:image、一部のプラットフォームで切り捨てられるほど長い og:title、または残っている無効な twitter:card 値を検出します。
  • • どの twitter:card タイプを宣言するかを決定する前に、同じタイトルと画像が Twitter/X のコンパクトな概要カードと全幅の summary_large_image レイアウトでどのように読み取られるかを比較してください。