Meta タグジェネレーター

生成される内容

• 基本 SEO メタ——title、description、canonical、author、keywords、theme-color、viewport、robots。
• Open Graph——og:type、og:title、og:description、og:url、og:site_name、og:image（width / height / alt 含む）、og:locale。
• Twitter カード——twitter:card、twitter:site、twitter:creator、twitter:title、twitter:description、twitter:image。
• Schema.org JSON-LD——最小の WebPage / Article / Product / Organization ブロック（name / description / url / image）。

開いたときの出力

フォームには本サイトの英語のサンプル値が最初から入っていて、日本語ページでは og:locale が ja_JP になります。何も変えずにコピーすると、次のブロックになります。

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZeroTool — Free browser-based dev utilities</title>
<meta name="description" content="A growing library of one-task tools that run in your browser. No accounts, no uploads.">
<link rel="canonical" href="https://zerotool.dev/">
<meta name="author" content="ZeroTool Workshop">
<meta name="keywords" content="dev tools, meta tags, open graph, twitter card">
<meta name="theme-color" content="#5b3d20">
<meta name="robots" content="index, follow">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="ZeroTool — Free browser-based dev utilities">
<meta property="og:description" content="A growing library of one-task tools that run in your browser. No accounts, no uploads.">
<meta property="og:url" content="https://zerotool.dev/">
<meta property="og:site_name" content="ZeroTool">
<meta property="og:image" content="https://zerotool.dev/og/json-formatter.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="ZeroTool cover image">
<meta property="og:locale" content="ja_JP">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@zerotooldev">
<meta name="twitter:creator" content="@zerotooldev">
<meta name="twitter:title" content="ZeroTool — Free browser-based dev utilities">
<meta name="twitter:description" content="A growing library of one-task tools that run in your browser. No accounts, no uploads.">
<meta name="twitter:image" content="https://zerotool.dev/og/json-formatter.png">

ogp.me がすべてのページに必須としている 4 つ（og:title、og:type、og:image、og:url）がそろっています。Twitter 画像の欄が空なので、twitter:image には og:image と同じ URL が入ります。「言語」のプルダウンは og:locale が空のときに入力例を出すだけで、それ自体はタグを出力しません。locale を変えるときは og:locale の欄を直接書き換えます。公開前に、サンプル値はすべて自分のサイトの値に置き換えてください。

例：日本語のブログ記事に OGP と JSON-LD を付ける

家計ブログの記事を例にします。タイトルには「」と &、説明には < を含めました。og:type を article、Schema.org を Article にして著者名を入れます。同じ出力を得るには、Ctrl/⌘+L でサンプルの文字を消し、viewport のチェックを外し、2 つのサンプル URL を書き換えてから、次の値を入力します。

<title>「はじめての確定申告」e-Tax の手順 &amp; 必要書類まとめ</title>
<meta name="description" content="スマホで e-Tax を使う手順と、事前にそろえる書類を図解でまとめました（所要時間 &lt;30分）。">
<link rel="canonical" href="https://example.jp/tax/e-tax-guide/">
<meta name="author" content="佐藤 花子">
<meta name="robots" content="index, follow">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article">
<meta property="og:title" content="「はじめての確定申告」e-Tax の手順 &amp; 必要書類まとめ">
<meta property="og:description" content="スマホで e-Tax を使う手順と、事前にそろえる書類を図解でまとめました（所要時間 &lt;30分）。">
<meta property="og:url" content="https://example.jp/tax/e-tax-guide/">
<meta property="og:site_name" content="家計メモ帳">
<meta property="og:image" content="https://example.jp/ogp/e-tax-guide.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="スマホの e-Tax 画面と書類">
<meta property="og:locale" content="ja_JP">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@kakeimemo">
<meta name="twitter:title" content="「はじめての確定申告」e-Tax の手順 &amp; 必要書類まとめ">
<meta name="twitter:description" content="スマホで e-Tax を使う手順と、事前にそろえる書類を図解でまとめました（所要時間 &lt;30分）。">
<meta name="twitter:image" content="https://example.jp/ogp/e-tax-guide.png">

<!-- Schema.org JSON-LD -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "name": "「はじめての確定申告」e-Tax の手順 & 必要書類まとめ",
  "description": "スマホで e-Tax を使う手順と、事前にそろえる書類を図解でまとめました（所要時間 \u003c30分）。",
  "url": "https://example.jp/tax/e-tax-guide/",
  "image": "https://example.jp/ogp/e-tax-guide.png",
  "author": {
    "@type": "Person",
    "name": "佐藤 花子"
  }
}
</script>

属性の中では & が &、< が < になり、「」はそのまま残ります。JSON-LD では < だけが \u003c に置き換わります。値に </script> が含まれていても、貼り付け先のページで script 要素が途中で終わらないようにするためで、JSON として読めば元の < に戻ります。

文字数カウンターはタイトルが 30 / 60、説明が 49 / 160 と表示します。JavaScript の文字列の長さを数えているので、全角も半角も、スペースも 1 文字です。Google のスニペットのドキュメントには、meta description の長さに上限はなく、検索結果では必要に応じて、たいていは端末の幅に合わせて切り詰めるとあります。60 と 160 は目安として使ってください。

LINE とはてなブックマークでの見え方

生成したタグのうち、LINE とはてなブックマークが何を使うかは、それぞれ次のように説明されています。

• LINE：LINE Developers の FAQ は「LINEで使用されるのは上記の3つのOGPタグのみです」としています。3 つとは og:title・og:description・og:image です。上の例なら、トークのプレビューにはタイトル、説明、e-tax-guide.png が使われ、og:site_name の「家計メモ帳」や og:image:alt はプレビューには使われません。
• はてなブックマーク：はてなブックマーク開発ブログ（2021-11-10）によると、エントリーの画像に og:image を使っていることに合わせて、og:title が設定されていればエントリーのタイトルにそれを優先して使うようになりました。このツールは <title> と og:title に同じタイトルを入れるので、<title> にだけサイト名を付けたい場合は、コピー後に <title> の行を書き換えます。

制限事項

• JSON-LD は最小限です。name・description・url・image と、Article の場合の author だけです。Google の Article のドキュメントは headline や datePublished を推奨しており、Product が商品のリッチリザルトの対象になるには offers・review・aggregateRating のいずれかが必要です。必要な項目は手で追加し、Google のリッチリザルト テストで確認してください。
• 対応する項目がない選択肢があります。Twitter の player と app カードには twitter:player や twitter:app:* が必要ですが、このツールは出力しません。og:type の product は ogp.me に定義された型ではありません。article:published_time、og:image:type、hreflang も出力しません。
• robots は常に出力されます。index, follow はクローラーの既定の動作と同じなので、noindex や nofollow にしないなら行ごと削除してかまいません。
• プレビューは見た目の近似です。正規 URL が空のときはサイト名からプレビュー用のドメインを作りますが、「家計メモ帳」のように半角英数字を含まない名前では example.com と表示します。実際のカードは公開後に各サービスのデバッガーで確認してください。
• 通信について：タグの内容はブラウザー内にとどまりますが、Facebook・Twitter・Discord のプレビューは入力した画像 URL を読み込むので、画像のホストにはリクエストが届きます。最初に表示される Google のプレビューには画像がありません。
• Ctrl/⌘+L で消えるのはテキスト欄だけです。og:locale やテーマカラーの文字欄を含むテキスト欄が空になり、URL 欄・数値欄・プルダウン・viewport のチェックは残ったまま head が作り直されます。

画像サイズ早見表

出力をどこに貼るか

生成されたメタブロックは <head> の中、<meta charset> の後、サードパーティのスクリプトより前に置くのがおすすめです。クローラーは順番を気にしませんが、SNS 用のメタタグを 1 か所にまとめておくと、あとで確認しやすくなります。

同じ SEO の作業でよく併用するツール：Robots.txt ジェネレーター（クロール規則）と Favicon ジェネレーター（アイコンセット）。