Twitterカードの作り方|サイト不要で画像つきリンクを作る方法

この記事は「リンクカードガイド」の一部です。この記事では、X(旧Twitter)やLINEでURLを画像つきカード表示する方法を解説します。基礎となる仕組みは「リンクカードとは?」で解説しています。

X(旧Twitter)にURLを貼っても、文字列のままでは見落とされがちです。Twitterカードの作り方を知っていれば、画像つきカードで表示でき、リンクの見え方がまったく変わります。この記事では、自分のサイトにmetaタグ(OGP)を設定する方法と、サイトを持たなくても無料ツールで画像つきリンクを作る方法の2通りを、運営者が実際に試した手順で解説します。

Twitterカードとは(仕組みのおさらい)

Twitterカードとは、X(旧Twitter)にURLを貼ったときに、画像・タイトル・説明文がセットのカード状で表示される仕組みのことです。内部で使われている技術はOGP(Open Graph Protocol)と呼ばれるもので、リンク先ページのmetaタグを読み取って表示を組み立てています。

生URLとカード表示の見え方の違い

生のURLをそのまま貼った場合と、Twitterカードにした場合では、タイムラインでの見え方がまったく違います。

• 生URL: 文字列だけが表示され、画像つき投稿の中で読み飛ばされやすい
• Twitterカード: 大きな画像つきで表示され、リンクの内容が一目で伝わる
• カードは視認面積が大きく、クリックするかどうかの判断材料が多い

表示の裏側で起きていること

XにURLを貼ると、Xのクローラ(リンク先を読みに行くプログラム)がそのページのHTMLを確認します。そこにOGPのmetaタグがあればカードが作られ、なければ文字列のままです。主に読み取られるのは次のタグです。

• twitter:card: カードの種類(summary_large_imageなど)
• og:title: カードのタイトル
• og:description: カードの説明文
• og:image: カードに使う画像のURL

つまりTwitterカードを作るとは、このmetaタグを用意するということです。用意の仕方が、次の2通りに分かれます。

作り方1:自分のサイトにmetaタグ(OGP)を設定する方法

自分のブログやサイトを持っている場合は、そのHTMLのhead内にOGPのmetaタグを直接書きます。

必要なmetaタグ一式

summary_large_image(大きな画像つきカード)の場合、必要なタグは次の4つです。

<meta name="twitter:card" content="summary_large_image">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="https://example.com/image.png">

og:imageは「https://」から始まるフルURLで指定します。相対パスだと画像を読み込めず、カードが出ない原因になります。

summary_large_imageとsummaryの違い

表: Twitterカード2種類の違い。迷ったらsummary_large_imageで問題ありません。

この方法に向いている人・向いていない人

• 向いている人: 自分のサイトやブログを持っていて、HTMLを編集できる人
• 向いていない人: サイトを持っていない人、HTMLの編集に不安がある人

サイトを持っていない場合でも、次の方法なら同じ見た目のカードを作れます。

作り方2:サイト不要・無料ツールで画像つきリンクを作る方法

「リンクカード作成ツール」(link-card.online)は、Googleで「リンクカード」と検索すると1位に表示される無料ツールです。Twitterカード・画像つきリンク・OGPカードと呼ばれることもありますが、すべて同じ仕組みです。登録不要で30秒、中間ページ(LP)を挟まずアプリを直接起動させるカードを作れます。

このツールが発行するシェアURLにはOGPがあらかじめ設定されています。自分でmetaタグを書かなくても、生成されたURLを貼るだけでカード表示になります。

30秒でできる作成手順

1. ツールを開き、カードに使う画像をアップロードします
2. タイトル(70文字以内)と説明文を入力します
3. リンク先のURLを貼り、「カードを作成」をタップします
4. 生成されたURLをコピーして、Xに貼れば完成です

全手順は「リンクカードの作り方【無料・登録不要】画像つきリンクを30秒で作成」で画像つきで解説しています。

アプリ直接起動まで設定できる

通常のOGP設定との違いは、遷移先の制御までできる点です。中間ページ(LP)を挟まずにアプリを直接起動させる設定(LPカット)は、このツール特有の機能です。

仕組みは「リンクカードからアプリを直接起動|LPカットの仕組みと作り方」で図解しています。TikTok Liteの招待リンクのように、成果までの段数を減らしたい用途で特に効果を発揮します。

Twitterカードの画像サイズと作成時の注意

画像のサイズが合っていないと、せっかく作ったカードが崩れて表示されます。

推奨サイズは1200×630px

summary_large_imageの推奨サイズは1200×630px(比率1.91:1)です。X・LINE・Facebookのどれでも大きく崩れない汎用サイズです。

小さい画像は引き伸ばされて荒くなり、比率が違う画像は上下が切り取られます。サイズ設計の詳細は「Twitterカードの画像サイズは1200×630px|OGP設定も解説」にまとめています。

文字は中央に入れる(安全領域)

カード画像はSNSや端末によって、わずかにトリミングされたり縮小されたりします。端に文字やロゴを置くと、見切れて読めなくなることがあります。

• 文字は大きめにし、縮小表示でも読める太さにする
• 上下左右の端は空け、重要な要素は中央に集める
• 背景と文字色のコントラストを十分に取る

カードが表示されない時の考え方

設定したつもりでもカードが出ない場合、原因はいくつかのパターンに絞られます。

原因の多くはOGP未設定かキャッシュ

• OGP(twitter:card)タグが設定されていない
• og:imageのURLが間違っている(相対パス・リンク切れ)
• X側のキャッシュが古いまま残っている
• 画像サイズが規格に合っていない

自分のサイトに設定した場合に多いのが、タグの入れ忘れと画像URLのミスです。ツールで作ったURLなら、この2つは構造上起きません。

詳しい切り分けは専用記事へ

原因6つと対処法、X公式のCard Validatorでの確認・キャッシュ更新の手順は「Twitterカードが表示されない原因と対処法【画像が出ない時】」で順に解決できるように整理しています。

まとめ

Twitterカードの作り方は、次の2通りです。

• 自分のサイトにmetaタグ(OGP)を設定する方法。サイト運営者向けです
• サイト不要で無料ツールの生成URLを使う方法。登録不要で30秒です
• 画像は1200×630px(1.91:1)で、文字は中央に入れるのが基本です
• 表示されない時は、OGP未設定・画像URLミス・キャッシュをまず疑います

私は最初、metaタグという言葉の意味から調べました。サイトを持っていなくても同じ見た目のカードは作れるので、自分の状況に合う方を選んでください。

なお、Xのカード下部に表示される from: のドメイン名は、ツールで作るURLでも変えられます。2026年8月3日追加の「ドメイン分散」機能を使うと、共有URLのドメインを87個のプールから選択でき、Twitterカードのドメイン表示を投稿ごとに変えられます。詳しくは「リンクカードのドメイン分散とは」を参照してください。