ForHosting KIT · サイト取得・監視

Twitter Cardメタタグ生成ツール｜SNSプレビュー用

Q: 公開後のカード表示も確認できますか？

いいえ。 指定されたメタデータをローカルで生成・検証しますが、ページ取得、画像検査、外部サービスへの接続は行いません。

Build & Shipのようなタイトルを入力すると、ページのheadに貼り付けられるTwitter Cardのタグが手に入り、&は&として安全に書き換えられます。小さな画像の形式と大きな画像の形式を選べ、空の項目のタグは出力しません。ブラウザで無料で使えます。

無料
ブラウザで動作
登録不要
データは端末の外に出ません

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

プロパティ名を暗記したり、HTML属性内の危険な文字を心配したりせずに、Twitter Cardメタタグ一式を作成できます。対応するカード形式を選び、プレビューのタイトルを入力し、必要に応じて説明と画像の絶対URLを追加してください。構造化されたタグ情報と、そのまま貼り付けられるHTMLブロックの両方を返します。ネットワーク通信を行わない決定的な処理なので、同じ入力からは常に同じマークアップが得られ、外部のプレビューサービスへデータが送られることもありません。

プレビューに合うカード形式を選びます

まず、リンクが共有されたときにどのような見た目にしたいかを決めます。summaryはコンパクトな形式です。タイトルと説明を中心に見せ、画像を補助的なサムネイルとして使いたい記事、ドキュメント、商品ページなどに適しています。

未対応の形式を指定すると、不完全なマークアップを黙って生成せず、型の付いた入力エラーを返します。そのため、入力ミスや互換性のない選択が、一見正しそうでも目的のカードを表現できないタグとして公開工程へ流れることを防げます。自動化された処理でも、問題のある指定を生成時点で明確に検出できます。

HTMLで安全に使える内容を指定します

タイトルは必須で、空白以外の文字を含める必要があります。説明と画像は任意です。指定しなかった項目のタグは出力から省略され、空のタグやnull値で補われることはありません。相対パスはご自身のサイト内では動作しても、ソーシャルクローラーが独立して取得できないため、この生成ツールでは受け付けません。

テキストは二重引用符で囲まれたHTML属性に安全に入るようエスケープされます。アンパサンド、引用符、山括弧、アポストロフィは文字参照へ変換され、表示内容を保ちながら属性の境界を壊さない形になります。構造化されたタグ情報には正規化された読みやすい値を保持し、HTMLブロックにはマークアップ用にエスケープした表現を収録します。

この区別により、アプリケーションはメタデータを確認・保存する処理と、文書のheadへ挿入する断片を扱う処理を分離できます。

生成したタグを設置して確認します

返されたHTMLの各行を、共有対象ページのhead要素内へコピーしてください。公開後は、一般公開URLからページソースを確認し、サーバーが初期HTML内にタグを実際に出力していることを確かめてください。読み込み後にクライアント側のコードで追加したメタデータはクローラーから見えない場合があります。

また、構文上正しいURLでも、非公開または保護された画像は取得できません。この生成ツールは入力されたメタデータを検証しますが、サイトへのアクセス、画像のダウンロードや寸法測定、ソーシャルサービスによる切り抜き結果の予測は行いません。キャッシュもページを取得するサービス側で管理されるため、タグの更新後もしばらく古いプレビューが表示される場合があります。

活用例

静的サイトのビルドにSNSタグを追加

ネットワークサービスや独自テンプレートを使わず、各ページ向けの構造化データとHTMLを生成します。

未対応のカード指定を事前に検出

互換性のない形式や入力ミスを拒否し、不完全なメタデータが本番環境へ入ることを防ぎます。

よくある質問

画像は必須ですか？

必須ではありません。 imageを省略するとtwitter:imageも省略されます。

説明を省略するとどうなりますか？

twitter:descriptionタグ全体が省略されます。

引用符やアンパサンドはエスケープされますか？

はい。 HTML属性を壊す可能性がある文字はHTML出力で符号化され、構造化データ側では読みやすい値が保たれます。

公開後のカード表示も確認できますか？

いいえ。指定されたメタデータをローカルで生成・検証しますが、ページ取得、画像検査、外部サービスへの接続は行いません。

どちらのカード形式を選べばよいですか？

タイトルと説明を主役にし、画像は小さなサムネイルでよい記事や資料、商品ページには小さな画像の形式を選びます。特集記事や新商品の発表、作品集、レシピなど、画像そのものに意味がある場合は大きな画像の形式が向いています。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/web/twitter-card-generate

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/web/twitter-card-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"card_type":"summary_large_image","title":"A Practical Guide to Accessible Forms"}'

const res = await fetch("https://api.kit.forhosting.com/web/twitter-card-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "card_type": "summary_large_image",
    "title": "A Practical Guide to Accessible Forms"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/twitter-card-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "card_type": "summary_large_image",
    "title": "A Practical Guide to Accessible Forms"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/twitter-card-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"card_type":"summary_large_image","title":"A Practical Guide to Accessible Forms"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"card_type":"summary_large_image","title":"A Practical Guide to Accessible Forms"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/twitter-card-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "card_type": "summary_large_image",
  "title": "A Practical Guide to Accessible Forms"
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.twitter_card_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

制限

`timeout_sec`	30
`max_crawl_pages`	25

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

技術的な注記

プレビューに合うカード形式を選びます

summary_large_imageは画像を大きく表示するため、特集記事、新製品の発表、ポートフォリオ、レシピ、ビジュアル自体が重要な情報を伝えるページに向いています。この生成ツールが汎用的な2形式に限定しているのは、カード形式、タイトル、説明、画像だけで完全なタグを構成できるためです。それ以外のTwitter Card形式には、この入力仕様に含まれない追加項目が必要です。

HTMLで安全に使える内容を指定します

画像を指定する場合は、HTTPまたはHTTPSの絶対URLが必要です。

生成したタグを設置して確認します

twitter:cardとtwitter:titleを1つずつ配置し、任意の値がある場合はtwitter:descriptionとtwitter:imageも続けます。自動公開で利用するAPIは1リクエスト$0.002で、ブラウザー版も同じ決定的なロジックを使用します。

連携の活用例

新しい記事のメタデータを準備

見出し、概要、メイン画像のURLから、貼り付け可能なsummary_large_imageタグ一式を作成します。

技術的な質問

対応しているTwitter Card形式は何ですか？

summaryとsummary_large_imageに対応しています。それ以外の形式ではinvalid_inputエラーを返します。

APIでの生成料金はいくらですか？

APIは1リクエスト$0.002です。ブラウザー版は同じ決定的なアルゴリズムをローカルで実行します。

KITの完全なドキュメントを見る →

Twitter Cardメタタグ生成ツール｜SNSプレビュー用

無料で実行

プレビューに合うカード形式を選びます

HTMLで安全に使える内容を指定します

生成したタグを設置して確認します

活用例

静的サイトのビルドにSNSタグを追加

未対応のカード指定を事前に検出

よくある質問

関連ツール

開発者向け — APIアクセス

エンドポイント

お使いのスタックから呼び出す

リクエスト例

レスポンス例

料金

制限

エラー

技術的な注記

プレビューに合うカード形式を選びます

HTMLで安全に使える内容を指定します

生成したタグを設置して確認します

連携の活用例

新しい記事のメタデータを準備

技術的な質問

ありがとう