Meta Tag ジェネレーター

入力パラメータ
生成されたタグ

ブラウザ上で動作する Meta タグ生成ツール。title、description、keywords、canonical、Open Graph、Twitter Card、robots などのタグ生成に対応し、HTML エンティティ自動エスケープ、リアルタイム文字数ガイダンス（カラーステータス付き）、ワンクリックコピーとダウンロード機能を搭載。

関連おすすめ

Sitemap ジェネレーター

QRコード・バーコードジェネレーター

TS圧縮

16進数変換ツール

SHA-256 ハッシュ

Base64 デコード

ユースケース

  • 新規サイト公開前にトップページ、一覧ページ、詳細ページの完全な Meta タグを一括生成し、SEO 基本設定を迅速に完了
  • ブログ記事公開前に article タイプの Open Graph タグと summary_large_image タイプの Twitter Card を設定し、ソーシャルプラットフォームでのシェア効果を向上
  • EC 製品ページに product タイプの og:type を設定し、og:image、og:price:amount などの構造化情報を設定してソーシャルプラットフォームでの商品表示を最適化
  • サイトリニューアルやドメイン変更後に canonical タグを再生成し、URL を統一して重複コンテンツによる権限分散を回避
  • モバイル Web ページに theme-color テーマカラーを設定し、Chrome、Safari モバイルのアドレスバーをブランドカラーと統一
  • Next.js、Nuxt.js、Gatsby などの SSR/SSG フレームワークで開発する際、head 設定に必要な完全な Meta タグコードを迅速に生成
  • WordPress、Shopify などの CMS システムで、カスタムページテンプレートに Meta タグを手動設定、SEO プラグインに依存しない
  • サイトのインデックス問題をトラブルシューティングする際、正しい robots meta タグの組み合わせ（テスト環境用の noindex,nofollow など）を迅速に生成
  • ソーシャルメディア運用担当者がキャンペーンランディングページのシェアカードを設定し、Facebook、Twitter/X、LinkedIn、WhatsApp、Slack、Discord へのシェア時にプレビューが正しく表示されることを保証
  • フロントエンド開発者が HTML ページテンプレートを作成する際、Meta タグのエンティティエスケープ処理を自動化し、特殊文字による HTML 構文エラーを防止

使い方

  1. 「基本 SEO タグ」エリアでページの title（タイトル、推奨50〜60文字）、meta description（説明、推奨120〜160文字）、keywords（キーワード、カンマ区切り）、canonical URL（正規URL）、author（著者）を入力
  2. 「robots クローラーディレクティブ」エリアで適切なインデックスとトラッキングルールを選択：index/noindex（インデックスするか）、follow/nofollow（リンクを追跡するか）、追加で noarchive、nosnippet などのオプションをチェック可能
  3. 「テーマカラー設定」エリアで theme-color の16進数カラー値を入力または選択、モバイルブラウザのアドレスバーのカラーリングに使用
  4. 「Open Graph タグ」エリアに切り替え、og:type（website/article/product/profile から1つ選択）を選び、og:title、og:description、og:image（シェア画像URL、推奨1200×630ピクセル）、og:url、og:site_name、og:locale を入力
  5. 「Twitter Card タグ」エリアに切り替え、twitter:card タイプ（summary/summary_large_image/app/player から1つ選択）を選び、twitter:site @アカウント、twitter:title、twitter:description、twitter:image を入力
  6. すべての入力中に右側のリアルタイムプレビューエリアと文字数カウントのカラー表示を確認：緑色は最適な長さ、オレンジ色は境界付近、グレーは短すぎるか長すぎて調整が必要
  7. タグが正しいことを確認したら、「クリップボードにコピー」ボタンをクリックして全コードをコピーし HTML head エリアに貼り付けるか、「HTML ファイルをダウンロード」をクリックして meta-tags.html として保存

特徴

  • HTML エンティティ自動エスケープ：&、<、>、"、' の5つの特殊文字を安全にエスケープし、生成されたタグの HTML 構文エラーを防止
  • title 文字数スマート表示：50〜60文字の範囲内で緑色（最適）、範囲外または不足時はオレンジ/グレーでステータス表示、リアルタイム文字数カウント
  • meta description 文字数スマート表示：120〜160文字の範囲内で緑色（最適表示範囲）、超過または短すぎる場合はリアルタイムでカラーステータスが変化
  • 4種類の og:type に対応：website（一般サイト）、article（記事/ブログ）、product（製品ページ）、profile（プロフィールページ）、各ページタイプにマッチ
  • 4種類の twitter:card タイプに対応：summary（小画像サマリー）、summary_large_image（大画像サマリー）、app（アプリカード）、player（動画/プレーヤーカード）
  • robots ディレクティブ組み合わせ設定：index/noindex、follow/nofollow、noarchive、nosnippet、noimageindex などのクローラーディレクティブを自由に組み合わせ可能
  • author メタタグ：content-author、article:author などの著者署名タグの設定に対応、ブログやニュースサイトに最適
  • theme-color テーマカラー設定：モバイルブラウザのアドレスバーのテーマカラーを設定、カラーピッカーとカラーコード入力を提供
  • og:site_name サイト名設定：Open Graph プロトコルのサイト名フィールドを専用設定、ソーシャルシェア時に正しくサイト名を表示
  • twitter:site @アカウント設定：Twitter/X プラットフォームの公式 @handle アカウントを入力可能、シェアカードと公式アカウントを連携
  • 3セクション構造化出力：Primary SEO、Open Graph、Twitter Card の3つの明確なセクションで生成結果を表示、構造が一目瞭然
  • クリップボードにワンクリックコピー：生成されたコードを手動選択なしでワンクリックコピー、各種ブラウザ環境に対応
  • meta-tags.html としてダウンロード：生成されたタグを完全な HTML ファイルとしてダウンロード可能、保存やプロジェクトへの直接インポートに便利
  • リアルタイム生成とプレビュー：入力内容から即座にタグコードを生成し、SERP 検索結果表示とソーシャルシェアカードスタイルを同期プレビュー

よくある質問

Meta Tag ジェネレーターで生成したコードはそのままサイトに使えますか？修正は必要ですか？

そのままコピーして使用できます。生成されるコードは標準形式の HTML Meta タグで、HTML エンティティエスケープも自動処理済みです。ページの &lt;head&gt; と &lt;/head&gt; の間に貼り付けるだけで使用できます。入力した URL（canonical、og:image、og:url、twitter:image）が実際のオンラインアドレスであることを確認してください。Next.js、Nuxt.js、React Helmet、Vue Meta などのフレームワークでは、JSX/Vue テンプレート構文に合わせて多少の調整が必要な場合があります。

なぜ og:image 画像の入力が必須なのですか？画像がないとどうなりますか？

og:image はソーシャルシェアカードの視覚効果とクリック率に直接影響します。og:image のないリンクは画像のないテキストリンクとして表示されるか、プラットフォームがページ上の小さな画像（ロゴ、アバター、広告画像など）をランダムにキャプチャして表示し、表示効果が非常に悪くなります。クリック率は正しいプレビュー画像のあるシェアより50%以上低くなるのが一般的です。og:image の推奨サイズは1200×630ピクセル（1.91:1比率）、公開アクセス可能な絶対 URL、5MB以下です。

Open Graph と Twitter Card タグの両方を設定する必要がありますか？OG だけでも大丈夫ですか？

Twitter/X は Open Graph タグをフォールバックとして読み取りますが、専用の Twitter Card を設定するメリットがあります：①最適な twitter:card タイプを選択できる（特に summary_large_image 大画像タイプ）、②twitter:site で公式 Twitter アカウントを連携しフォロー転換を増やせる、③Twitter 用にタイトルと説明の長さを個別に最適化できる。両方設定することを推奨します。

title や meta description が推奨文字数を超えるとどうなりますか？ペナルティはありますか？

文字数超過による検索エンジンのペナルティはありませんが、切り詰められます。Google 検索結果で title が約600ピクセル幅を超えると省略記号で切り詰められ、meta description が約920ピクセル幅を超えても切り詰められます。短すぎると表示スペースを無駄にし、ページの価値を十分に伝えられずクリックを惹きつけられません。これはピクセル幅の制限であり、全角文字、大文字、W/Mなどの幅の広い文字、emoji はより多くの幅を占めます。

HTML エンティティエスケープとは何ですか？なぜツールが自動的に行うのですか？

HTML では一部の文字に特殊な構文上の意味があり、属性値に直接書くと HTML 構造が壊れます：二重引用符 " は属性値の終了記号、& はエンティティエスケープ開始記号、< と > はタグの開始・終了記号です。これらの文字は正しく表示するためにエンティティ形式で記述する必要があります：&→&amp;、<→&lt;、>→&gt;、"→&quot;、'→&#x27;。特殊文字を含む title や description をエスケープなしで書くと HTML 構文エラーが発生し後続のタグがすべて無効になる可能性があるため、本ツールはこのエスケープを自動処理します。

なぜ Facebook/Twitter クローラーが React/Vue で書いたページの Meta タグを取得できないのですか？

React、Vue、Angular などのフレームワークはデフォルトでクライアントサイドレンダリング（CSR）であり、HTML ソースは空またはコンテナ div だけで、Meta タグはブラウザが JavaScript を実行した後に DOM に動的挿入されます。しかし facebookexternalhit、Twitterbot、LinkedInBot などのほとんどのソーシャルクローラーは JavaScript を実行しない（または実行能力が非常に限られている）ため、クロールする元の HTML に Meta タグがなくシェアカードを生成できません。解決策：①Next.js、Nuxt.js、Gatsby、Astro などの SSR/SSG フレームワークを使用する、②prerender.io、Rendertron などのプリレンダリングサービスを使用する、③OG 画像生成サービスを利用する。

同じページの canonical と og:url は同じものを入力すべきですか？

はい、一致させるべきです。canonical は検索エンジンに優先 URL を伝え、og:url はソーシャルプラットフォームにコンテンツの一意の URL を伝えていいね・コメント・シェア数を集計します。両方が同じ URL を指すのがベストプラクティスで、権限分散とソーシャルカウントの断片化を回避できます。どちらも完全な絶対 URL（https://、ドメイン、完全なパスを含む）である必要があり、相対パスは使用できません。UTM パラメータなどのある URL は、パラメータのないクリーンな URL に canonical と og:url の両方を設定してください。

noindex ページのリンクはクローラーにクロールされますか？権限は伝達されますか？

noindex の意味は「このページをインデックスしない」であり、「クロールしない」でも「リンクを追跡しない」でもありません。クローラーは noindex ページをクロールし（noindex タグを確認するためにクロールする必要があります）、robots meta に follow（デフォルト）が設定されていればページ上のリンクをクロールし続けます。ただし権限伝達については、Google の公式見解では noindex ページは最終的にインデックスから削除され、ページ上のリンクのウェイトは正常に伝達されません（ページ自体がインデックスされないため）。

theme-color はどのブラウザで有効ですか？iOS Safari は対応していますか？

theme-color の現在の対応状況：Android 版 Chrome/Firefox/Edge/Brave などの Chromium 系ブラウザは以前から対応しており最も効果が明確です。Safari は iOS 15 と macOS Monterey から theme-color に対応していますが、ページの背景色に基づいて自動調整される点や、media 属性でダークモード/ライトモード別の色設定も可能です。デスクトップ Chrome も一部バージョンからタブバーなどで theme-color を適用しています。IE や古いブラウザは対応していませんが、未対応でもテーマカラー効果がないだけで機能には影響しません。

なぜ Google 検索結果に私が書いた description と違う説明が表示されることがあるのですか？

Google は書かれた meta description を100%使用するとは限りません。書かれた description がユーザーの検索クエリに十分関連していない、または description の品質が低い（キーワードスタッフィング、サイト全体で同一、内容不一致）と判断した場合、Google はページ本文から検索語に最も関連すると判断したスニペットを抽出して検索結果に表示します。これは Google の正常な動作でありバグではありません。description が使用される確率を高めるには：①各ページに一意で内容を正確に説明する description を書く、②コアキーワードを自然に含めスタッフィングしない、③長さを適切な範囲に制御する、④description の内容がページ本文に反映されていることを確認する。

タグ設定後に正しく反映されているか確認するにはどうすればよいですか？確認ツールはありますか？

Meta タグの確認手順とツール：①ブラウザの「ページのソースを表示」で元の HTML ソース（Elements パネルではない）で title、description、og: タグが存在し内容が正しいか検索する。②Facebook Sharing Debugger で OG タグを検証しキャッシュを更新。③Twitter Card Validator で Twitter Card を検証。④Google Rich Results Test で基本タグを確認。⑤Google Search Console の「URL 検査」で Google が実際にクロールしたページとインデックス状況を確認。⑥ローカルテストでは User-Agent 切り替えでソーシャルクローラーをシミュレートするか、curl で Facebook UA を指定して HTML を取得し確認できます。

各ページに個別の Meta タグを設定する必要がありますか？サイト全体で同じタグでも大丈夫ですか？

絶対にダメです！すべてのページに一意の title と meta description が必要です。サイト全体で同じ title と description を使用すると：①検索エンジンが各ページの内容トピックを判別できず正しくランキングできない、②検索結果ですべてのページが同じタイトルと説明を表示しユーザーがどれをクリックすべきか判別できず CTR が極端に低くなる、③低品質サイトと判断されサイト全体の権限に影響する可能性がある。OG と Twitter Card も原則としてページごとに異なるべきです。theme-color、og:site_name、twitter:site などのサイトレベルの設定のみサイト全体で統一できます。

今でも meta keywords を書くべきですか？何個くらいが適切ですか？

2026年現在、Google、Bing、百度などの主要検索エンジンは meta keywords をランキング要因として使用していません。書いても書かなくても SEO には基本的に影響しません。CMS やテンプレートにこのフィールドがある場合は数秒かけて3〜5個のコアキーワードを入力するだけで十分で、キーワード選びや密度に時間をかける必要はありません。重要なのは、何十個ものキーワードを詰め込んだり同じ単語を何度も繰り返したり無関係な人気キーワードを書いたりしないことです——これはスパムシグナルとして扱われる可能性があり逆効果です。

robots meta タグと robots.txt の違いは何ですか？どちらが優先されますか？

両者は作用するレベルとメカニズムが異なります：①robots.txt はサイトのルートに配置されるテキストファイルで、サイトまたはディレクトリレベルでクローラーの動作を制御します（例：Disallow: /admin/）。ただし robots.txt は「紳士協定」であり、禁止されたページに外部リンクがあるとインデックスされる可能性があります。②robots meta は各ページの HTML head に配置されるページレベルのタグで、個々のページの index/noindex/follow/nofollow などを正確に制御でき、robots.txt より優先されます。③X-Robots-Tag は HTTP レスポンスヘッダーレベルで、robots meta と同じ機能を持ち PDF や画像などの非 HTML ファイルにも使用できます。ページを完全にインデックスさせないためには noindex（meta または X-Robots-Tag）が必要です。

本ツールで Meta タグを生成した後、Schema.org 構造化データ（JSON-LD）も設定する必要がありますか？

Meta タグと Schema.org 構造化データは補完関係にあり、代替関係ではありません。Meta タグは主に検索結果ページのタイトル・説明、ソーシャルシェアカード、基本的なクローラー制御を担います。Schema.org 構造化データ（通常 JSON-LD 形式でページに埋め込み）は、商品の評価星・価格・在庫、パンくずナビ、記事の公開日、FAQ アコーディオン、イベントの日時・場所などのリッチスニペット表示を実現し、CTR をさらに向上させることができます。重要なページには両方を設定することを推奨します：①基本 Meta タグ（本ツールで生成）、②該当ページタイプの Schema.org 構造化データ。両者は競合せず、共に検索表示効果を最適化します。

トラブルシューティング

Facebook/Twitter/LinkedIn にシェアしたとき画像が表示されない、または設定した og:image と違う画像が表示される

og:image URL に相対パスや localhost/127.0.0.1/内部 IP を使用しており、クローラーがアクセスできない robots.txt で画像がブロックされているか、WAF/CDN/ファイアウォールがクローラーの User-Agent（facebookexternalhit/Twitterbot/LinkedInBot）をブロックしている 画像サイズが要件を満たしていない（og:image は200×200ピクセル以上必要） 画像ファイルが大きすぎる（5〜8MB超）か未対応形式（JPG/PNG/WebP/GIF のみ対応） JavaScript でクライアントサイド動的レンダリングされており、クローラーが JS を実行しない（SSR/SSG が必要） og:image URL が404/403/5xxエラーを返すかログインページにリダイレクトする プラットフォームが古いキャッシュを保持しているため、公式デバッガーで Scrape Again を実行していない

Google 検索結果で title が切り詰められるか、Google によって自動的に書き換えられる

title が50〜60文字（約600ピクセル幅）を超えており、超過部分が省略記号で切り詰められる title に全角記号や emoji が含まれ追加幅を占めるため、実際の表示が文字数より早く切り詰められる title がキーワードスタッフィングまたはコンテンツと不一致のため、Google が本文やアンカーテキストから書き換える 各ページの title が重複または酷似しており、Google が自動的に異なるタイトルを生成する title にブランド名しかない、またはブランド名が長すぎる |、-、_ などのセパレーターを過剰に使用している ページの h1-h6 見出し階層が混乱しているか複数 h1 がある

Meta タグ設定後に文字化け、特殊文字の異常表示、HTML 構文エラーが発生する

<meta charset="UTF-8"> が宣言されていないか、head の最初（title より前）に配置されていない meta description などの content 属性値にエスケープされていない二重引用符（"）が含まれており、タグが早期に閉じて HTML 構造が崩れる コンテンツに &、<、> などの特殊文字があるが HTML エンティティエスケープされていない HTML ファイルの保存エンコーディングが UTF-8 ではない サーバーの Content-Type ヘッダーが非 UTF-8 エンコーディングを指定しており、meta charset を上書きしている 誤ったエンティティエスケープを使用している CMS やテンプレートエンジンによる二重エスケープが発生している

canonical タグが効かず重複 URL がインデックスされるか、canonical が無視される

canonical が指す URL が404/403/5xxを返すか他ページにリダイレクトする 循環 canonical（A→B→A）または連鎖 canonical（A→B→C→D）で検索エンジンが混乱する canonical が大幅に異なるコンテンツのページを指しており、設定ミスと判断され無視される canonical に相対パスを使用している（完全な絶対 URL が必要） http/https、www/非 www 間で301リダイレクトが正しく設定されていない ページネーションページをすべて最初のページに canonical しており、後続コンテンツがインデックスされない HTML の link タグ、HTTP レスポンスヘッダー、Sitemap で異なる canonical URL が宣言され競合している

Meta タグを変更したのに再シェア時に古いタイトル・説明・画像が表示される

ソーシャルプラットフォームの OG/Twitter Card キャッシュが長期間（数日から数週間）保持される 公式デバッガーで Scrape Again/再クロールを実行しキャッシュを強制更新していない CDN が古い HTML ページをキャッシュしている サーバーサイドキャッシュや SSR キャッシュがクリアされていない og:image URL は同じだが画像内容が更新された場合、?v=2 などのバージョンパラメータが必要 タグの変更が本番環境に正しくデプロイされていない Meta タグが HTML body 内に配置されているか JS で動的挿入されており、クローラーが読み取れない

誤って noindex,nofollow を設定したためサイトや重要ページが Google にインデックスされない

開発/テスト環境の noindex,nofollow タグが本番リリース時に削除されなかった WordPress など CMS の「検索エンジンによるインデックスを拒否」オプションがチェックされたまま公開された robots.txt に Disallow が設定されクローラーがページにアクセスできない（外部リンクがあればインデックスされる可能性あり） HTTP レスポンスヘッダーで X-Robots-Tag: noindex が返されている（メタタグより優先、Nginx/Apache設定やCDN設定が原因のことが多い） CDN/WAF/セキュリティプラグインが自動的に noindex ヘッダーを追加している（誤操作やデフォルト設定の場合あり） 誤ったディレクティブの組み合わせを使用（noindex を index と書いたが他のパラメータが競合、またはサイト全体テンプレートに noindex が含まれトップページのみ解除して内部ページに残っている） ステージング環境から本番環境への移行時に base URL、canonical、robots 設定が更新されず、テスト環境の noindex が本番環境に残った

用語集

Meta tag
HTML メタタグ。head エリア内に配置され、ページのメタデータを記述し、ブラウザ、検索エンジン、ソーシャルプラットフォームにページ情報を伝達します。
title
HTML タイトルタグ。ブラウザタブと SERP のクリック可能なタイトルを定義する SEO 最重要タグ、推奨50〜60文字。
meta description
ページ説明メタタグ。SERP タイトル下に表示される説明文で、CTR に大きく影響、推奨120〜160文字。
meta keywords
キーワードメタタグ。Google は2009年から使用しておらず、現在は基本的に SEO 価値がありません。
canonical
正規リンクタグ（rel="canonical"）。複数の類似 URL の優先バージョンを検索エンジンに伝え、重複コンテンツ問題を解決します。
Open Graph
Facebook が2010年に策定したソーシャルシェアプロトコル。og: プレフィックスタグでシェアカードスタイルを制御し、ほぼすべてのソーシャルプラットフォームでサポートされています。
Twitter Card
Twitter/X のシェアカードプロトコル。twitter: プレフィックスタグを使用し、summary/summary_large_image/app/player の4タイプをサポート。OG タグより優先されます。
og:type
Open Graph ページタイプタグ。website、article、product、profile のいずれかを指定し、ソーシャルプラットフォームでのコンテンツ解析方法を決定します。
og:image
Open Graph シェア画像タグ。プレビュー画像 URL を指定、推奨1200×630ピクセル、公開アクセス可能な絶対 URL。
twitter:card
Twitter Card タイプ指定タグ（必須）。summary、summary_large_image、app、player のいずれかを指定。
robots meta
クローラー制御メタタグ。ページレベルで index/noindex/follow/nofollow などを制御し、robots.txt より優先されます。
noindex
robots ディレクティブの1つ。ページのインデックスを禁止します。テストページ、内部ページで使用されます。
nofollow
robots ディレクティブの1つ。ページ上のすべてのリンクの追跡を禁止します。
theme-color
モバイルブラウザのアドレスバー/ツールバーの色を定義するメタタグ。ブランド体験を向上させます。
author meta
著者メタタグ（name="author"）。コンテンツ作成者情報を宣言します。
HTML entity
HTML エンティティエスケープ文字。特殊文字を安全に表示するために使用され、&amp; が &、&lt; が < などを表します。
SERP
Search Engine Results Page（検索エンジン結果ページ）。検索結果ページのタイトル、説明、URL などを含むページ。
CTR
Click-Through Rate（クリック率）。検索結果表示後のユーザークリック割合で、SEO コア指標の1つ。
crawl budget
クロールバジェット。検索エンジンがサイトに割り当てるクロール回数とページ数。
viewport
ビューポートメタタグ。モバイルでのページレンダリング幅と初期ズームを制御する必須タグ。

よく使われる Meta タグ一覧表

タグ名役割属性/記述例注意事項
titleページタイトル、ブラウザタブと SERP タイトル<title>ページタイトル | ブランド</title>推奨50〜60文字、キーワード前配置、ブランド名後配置、各ページ一意
meta descriptionページ説明、SERP 表示の説明文<meta name="description" content="...">推奨120〜160文字、キーワードと CTA 含む、各ページ一意
meta keywordsキーワードタグ<meta name="keywords" content="...">主要検索エンジンは使用せず
link canonical正規リンク、優先 URL 指定<link rel="canonical" href="https://example.com/page">完全な絶対 URL を記述、チェーン設定しない
meta robotsクローラー制御<meta name="robots" content="index,follow">robots.txt より優先、noindex が真のインデックス禁止
meta charset文字エンコーディング宣言<meta charset="UTF-8">head の最初に配置
meta viewportモバイルビューポート制御<meta name="viewport" content="width=device-width, initial-scale=1.0">レスポンシブに必須
meta authorページ著者情報<meta name="author" content="著者名">ブログ/ニュースサイトで使用
meta theme-colorモバイルブラウザテーマカラー<meta name="theme-color" content="#2563eb">ブランドカラー使用推奨
og:titleOpen Graph シェアタイトル<meta property="og:title" content="...">SEO title と異なってもよい
og:descriptionOpen Graph シェア説明<meta property="og:description" content="...">200文字以内推奨
og:imageOpen Graph シェア画像<meta property="og:image" content="https://.../img.jpg">1200×630ピクセル推奨、絶対 URL、5MB以下
og:urlOpen Graph 正規 URL<meta property="og:url" content="https://example.com/page">canonical と一致させる
og:typeOpen Graph コンテンツタイプ<meta property="og:type" content="website">website/article/product/profile
og:site_nameOpen Graph サイト名<meta property="og:site_name" content="GeekFormat">ページタイトルとは別のサイト名
twitter:cardTwitter Card タイプ<meta name="twitter:card" content="summary_large_image">summary/summary_large_image/app/player
twitter:siteTwitter 公式アカウント<meta name="twitter:site" content="@username">ブランドの @handle を入力
twitter:imageTwitter Card 画像<meta name="twitter:image" content="https://.../img.jpg">未設定時は og:image にフォールバック

og:type 用途対応表

og:type 値用途推奨画像比率拡張タグ
websiteサイトトップページ、一般ページ1.91:1（1200×630）基本 og: タグのみ
articleブログ記事、ニュース、ドキュメント1.91:1（1200×630）article:published_time、article:author、article:section、article:tag
productEC 製品ページ、サービスページ1.91:1（1200×630）、製品画像は正方形または4:3推奨product:price:amount、product:price:currency、product:availability、product:brand
profile個人プロフィールページ1:1 アバターまたは1.91:1カバーprofile:first_name、profile:last_name、profile:username

twitter:card タイプ対応表

twitter:card タイプカードスタイル画像要件用途追加必須フィールド
summary小画像サマリー、小画像が左/上、テキストが右/下最小144×144ピクセル、1:1正方形一般記事、ページ基本タグで十分
summary_large_image大画像サマリー、上部フルワイドバナー最小300×157ピクセル、推奨1200×675、約2:1比率ブログ記事、製品ページ、キャンペーンページ（推奨デフォルト）画像サイズ要件を満たすこと
appアプリダウンロードカード、アイコン・評価・ダウンロードボタン表示アプリロゴ正方形画像144×144以上アプリダウンロードページtwitter:app:name/id:url:iphone/ipad/googleplay
player動画/音声プレーヤーカード、ストリーム内に直接埋め込みプレーヤーカバー画像、プレーヤーページは HTTPS 必須動画コンテンツ、ポッドキャスト、ライブ配信twitter:player、twitter:player:width/height/stream、Twitter のホワイトリスト審査が必要