🐦 Twitter Card生成器
Twitter Cardメタタグを生成。Twitter/Xでのリンク表示をプレビュー——すべてブラウザ内で完結、アップロード不要、瞬時に結果表示。
Twitter Card生成器について
このTwitter Card生成器は、すべてブラウザ内で完結します。上のフィールドに入力すると、そのまま貼れる twitter: メタタグを生成し、リンクがTwitter（X）でシェアされたときの表示をプレビューします。アップロードは一切なく、JavaScriptによってあなたのデバイス上で処理されます。
Twitter Cardとは？
Twitter Cardは、リンクを含むツイートに添付されるリッチスニペットです。ページの <head> にいくつかの twitter: メタタグを追加すると、誰かがあなたのURLをシェアしたときにTwitterが使うタイトル・説明・画像を指定できます。これらのタグがないと、Twitterはプレビュー画像のないシンプルなリンクを表示します。
カードタイプ
- summary —— 左に小さな正方形のサムネイル、右にタイトルと説明。ほとんどのページのデフォルト。
- summary_large_image —— 上部に大型画像、下部にタイトルと説明。ヒーロー画像付きのブログ記事やニュースに最適。
- app —— モバイルアプリをプロモートするカード。直接インストールボタン付き。
- player —— Twitter上で動画や音声をインライン再生できるカード。
使い方
- カードタイプを選び、必要なフィールドを入力します。
- 生成をクリックすると、メタタグが出力され、プレビューが更新されます。
- コピーでタグをクリップボードにコピーし、HTML
<head>内に貼り付けます。 - クリアで全フィールドをリセットします。
よくある質問
データはアップロードされますか？ いいえ。すべての処理はローカルブラウザで行われ、入力がデバイスから外に出ることはありません。
Open Graphタグも必要ですか？ twitter: タグがないとき、Twitterは og: タグにフォールバックするため、両方を含めることを推奨します。Open Graph生成器で og: タグを生成できます。
画像サイズはどのくらいが良いですか？ summary_large_image では1200×628px。summary では512×512の正方形が適しています。画像は5MB以下である必要があります。
実際のカードを確認するには？ デプロイ後、公式のTwitter Card Validator（現在はX開発者ポータルの一部）を使ってキャッシュを更新し、実際のレンダリングを確認します。