OG & Twitter Card Generator — メタタグの構築、監査、プレビュー
フォームから Open Graph および Twitter Card の <meta> タグを作成してそのまま貼り付けられる状態にする、または既存の <head> を貼り付けて必須タグの欠落、タイトルや説明文の長さ、twitter:card の有効性を監査し、X(旧Twitter)、Facebook、LinkedIn、Discord のリンクカードを忠実に再現したモックアップで両方をプレビューします。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
Open Graph および Twitter Card のメタタグは、Slack、iMessage、ツイート、Discord チャンネルなどに URL を貼り付けた瞬間に表示されるリンクの見た目、つまりタイトル、説明文、画像を決定します。これは可視部分の本文からプラットフォームが適当に収集した情報ではなく、ページ自身の <head> が選んだものです。本ツールは、単なるテンプレートへの穴埋めではなく、構築と監査の両方を行うものです。BUILD モードでは、タイトル、説明文、画像 URL、正規 URL、コンテンツタイプ、Twitter カードタイプを入力すると、ページの <head> に貼り付けるだけでよい正確な <meta property="og:..."> および <meta name="twitter:..."> タグブロックを構成します。空欄にした項目は、中身が空の無意味なタグとして出力せずにスキップします。
AUDIT モードでは、既存の <head> マークアップまたはページ全体の HTML を貼り付けると、ブラウザのネイティブな DOMParser で解析し、既に存在する og: および twitter: メタタグをすべて抽出した上で、実際に重要となるチェックを実行します。一般的に必須とされる四つのタグ(og:title、og:description、og:image、og:url)が欠落している場合は警告します。og:title は、一部のプラットフォームで切り捨てが始まる約60文字の時点、および大半のプラットフォームで切り捨てられる約90文字の時点と照らし合わせて測定します。og:description は、多くのプラットフォームが切り捨てを開始する前の、おおよそ155~200文字の範囲と照合します。twitter:card は、Twitter の Card validator が受け付ける実際の4つの値(summary、summary_large_image、app、player)と照合し、それ以外の場合は警告します。また、重複したタグ(同じプロパティが二重に宣言されているという、コピー&ペーストのミスでは意外によくある問題)も名前を挙げて指摘します。
画像の寸法については正直に扱います。本ツールは画像を取得しない限り実際のピクセルサイズを検証できず、このサイトの外部リクエスト禁止ポリシーに則り、意図的に一切の取得を行いません。HTML 側で og:image:width と og:image:height が既に宣言されている場合、その宣言された数値が一般的に推奨される最小サイズである 1200×630 を満たしているかを確認します。宣言がない場合は、合格や不合格を捏造せずに、明確なガイダンスを表示します。どちらのモードでも、同一のリンクプレビューモックアップが四つ表示されます。X(旧Twitter)(twitter:card の値に応じて、コンパクトな「summary」サムネイルレイアウトと全幅の「summary_large_image」レイアウトを切り替え)、Facebook、LinkedIn、Discord です。それぞれのプラットフォーム独自のタイポグラフィやレイアウト規則に合わせて忠実にスタイルを変え、単にロゴだけを差し替えたようなものではありません。また、実際のプラットフォームはプレビューの外観を随時変更する可能性があり、本ツールは確認のためにそれらを取得またはスクレイピングすることは一切ないため、計画目的の参考用の近似であることを明示しています。