メタタグ 生成 — OGP・Xカードのタグを作成
検索結果とSNSシェア用のメタタグを作る生成ツール（リンクプレビューの見本付き）
ブラウザー内で処理・アップロード不要
例の値が入っています。ご自身のページの内容に置き換えてください。
https://（またはhttp://）で始まる完全なアドレスを入力してください。
リンクをシェアしたときに表示される画像の完全なアドレスです。プレビューはそのアドレスから画像を直接読み込みます。
@はあってもなくてもかまいません。空欄ならこのタグは出力しません。
生成されたタグ
12行のタグを生成しました（確認が必要な項目 2件）
- 画像がないと、カカオトークやFacebookのプレビューに画像が表示されません。
- 大きな画像のカードを選んでいますが、画像がありません。
<title>文字数カウント — 文字数・単語数をすぐに数える</title> <meta name="description" content="テキストを貼り付けるだけで、スペースあり・なしの文字数、単語数、バイト数をすぐに数えられます。"> <link rel="canonical" href="https://www.example.com/ja/character-counter/"> <meta property="og:type" content="website"> <meta property="og:title" content="文字数カウント — 文字数・単語数をすぐに数える"> <meta property="og:description" content="テキストを貼り付けるだけで、スペースあり・なしの文字数、単語数、バイト数をすぐに数えられます。"> <meta property="og:url" content="https://www.example.com/ja/character-counter/"> <meta property="og:site_name" content="サンプルサイト"> <meta property="og:locale" content="ja_JP"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="文字数カウント — 文字数・単語数をすぐに数える"> <meta name="twitter:description" content="テキストを貼り付けるだけで、スペースあり・なしの文字数、単語数、バイト数をすぐに数えられます。">
HTMLの<head>の中に貼り付けてください。
プレビュー（見本）
文字数カウント — 文字数・単語数をすぐに数える
テキストを貼り付けるだけで、スペースあり・なしの文字数、単語数、バイト数をすぐに数えられます。
example.com
サンプルサイト
https://www.example.com/ja/character-counter/
文字数カウント — 文字数・単語数をすぐに数える
テキストを貼り付けるだけで、スペースあり・なしの文字数、単語数、バイト数をすぐに数えられます。
実際のアプリを模した見本なので、長さや切れる位置は異なる場合があります。Googleのタイトルと説明の幅はSERPプレビューツールで確認してください。カカオトークは一度読み込んだリンクのプレビューをしばらく保持することがあるため、タグを変更した後も古いプレビューが表示されることがあります。
タグ名はOpen Graphプロトコル（ogp.me）とX（Twitter）カードに従います。カカオトーク、Facebook、LinkedIn、Slackはog:title、og:description、og:image、og:urlを読み、Xはtwitter:cardを読んで、それ以外はog:のタグで代用できます。入力したテキストのクォート、<、>、&はHTML用にエスケープします。入力内容が保存・送信されることはありません。
メタタグ 生成ツールとは
検索結果での見え方や、リンクをシェアしたときの表示を決めるheadタグを作るツールです。メッセージアプリやSNSはOGP（Open Graph）のタグからリンクカードを作り、Xは独自のカード用タグも使います。短いフォームに入力するだけで、ページのheadにそのまま貼り付けられるHTMLが得られます。クォートの処理も自動で行い、カカオトークのリンクカードとGoogle検索結果の見本も表示します。
使い方
- タイトル、説明、ページのURLを入力します。最初は例の値が入っています。
- シェア用画像の完全なURLと、画像の短い説明を追加します。画像がないと、シェアしたときのカードに画像が出ないことを警告で知らせます。
- サイト名、ページの種類、言語、Xのカードの種類を選びます。Xのアカウントは省略できます。
- 生成されたタグの下に、相対URLや空のタイトルなど確認が必要な項目が表示されたら修正します。
- タグをページのheadにコピーします。
- プレビューの見本で、おおよその仕上がりを確認します。
仕組み
- タグ名はOpen Graphプロトコル（ogp.me）に従います。og:type、og:title、og:description、og:url、og:site_name、og:locale、og:image、og:image:altと、Xカードのtwitter:card、twitter:site、twitter:title、twitter:description、twitter:imageです。
- ページのURLは、canonicalリンクとog:urlの両方に使います。
- クォート、<、>、&はHTMLエンティティにエスケープし、改行や連続するスペースは1つのスペースにまとめます。空の欄からはタグを出力しません。
- Xのアカウント名は、英字・数字・アンダースコアの1〜15文字だけを受け付けます。
- プレビューは見本です。実際のアプリはそれぞれ独自のフォントや切り詰めの規則を使います。
例
| 入力 | 生成されるタグ |
|---|---|
| タイトル：文字数カウント | <title>文字数カウント</title>、og:title、twitter:title |
| “クォート”を含む説明 | content=""クォート"を含む説明" |
| Xアカウント：toolsnack | <meta name="twitter:site" content="@toolsnack"> |
| 画像 /og.png | 警告：https://で始まる完全なアドレスを使ってください |
よくある質問
リンクプレビューにはどのタグが使われますか？
カカオトーク、Facebook、LinkedIn、Slackはog:title、og:description、og:image、og:urlを読みます。Xはまずtwitter:cardを読み、タイトル・説明・画像はog:のタグで代用できます。
プレビューに画像が表示されないのはなぜですか？
og:imageはhttps://で始まる完全なアドレスでなければなりません。/og.pngのような相対パスはほとんどのクローラーに無視されます。また、画像は誰でもアクセスできる場所に置く必要があります。
タグを変更したのに、古いプレビューが表示されます。
カカオトークなどのアプリは、一度読み込んだリンクのプレビューをしばらく保持することがあります。時間がたてば更新されますし、各プラットフォームの開発者ツールからページの再読み込みを依頼することもできます。
タイトルと説明はどれくらいの長さにすればいいですか？
Googleはスニペットを文字数ではなく表示幅で切り詰めます。タイトルと説明がどこで切れるかは、SERPプレビューツールで正確に確認できます。
入力した内容は保存されますか？
いいえ。タグとプレビューはブラウザー内で作成します。画像のURLを入力した場合は、プレビューを表示するためにブラウザーがその画像を直接読み込みます。
