metaタグ・OGP生成ツール（title・description・Xカード）

使い方

1. 「タイトル」と「説明文」を入力します。入力欄の下に文字数と、全角を2・半角を1と数えた幅（全角換算）が出ます
2. 「ページのURL」「サイト名」「画像のURL」を入力します。どれも空でかまいませんが、URL は https:// から書きます
3. 必要なら「ページの種類」「言語と地域」「X のカードの種類」「アカウント」「検索結果に表示する」を選びます。「article」を選ぶと公開日と更新日を入力できます
4. 「チェック」で、直したほうがよい点と注意を確かめます
5. 「生成されたタグ」を「すべてコピー」して、HTML の <head> の中に貼り付けます。基本のタグ・OGP・X のグループごとにもコピーできます
6. 「表示の目安」で、Google の検索結果、X のカード、Facebook や LINE のリンクの見え方を確かめます

「例を入れる」を押すと、架空のページの例が入ります。入力した内容はブラウザの外へ送信されず、保存もされません。

出力するタグ

• 基本のタグ: <title>、<meta name="description">、<link rel="canonical">。「検索結果に表示する」か「リンクをたどらせる」を外したときだけ <meta name="robots"> を出します（何も書かなければ index, follow と同じだからです）。「文字コードと viewport のタグも出力する」を選ぶと、<meta charset="utf-8"> と <meta name="viewport"> も付けます
• OGP: og:title、og:description、og:type、og:url、og:site_name、og:image、og:image:width、og:image:height、og:image:alt、og:locale。article のときは article:published_time と article:modified_time も出します
• X（旧Twitter）: twitter:card、twitter:site、twitter:creator、twitter:image:alt。X は twitter:title・twitter:description・twitter:image が無いときに OGP の値を使うので、同じ内容を二重には書きません

空の欄のタグは出力しません。" & < > は " などに置き換えるので、タイトルに記号があってもタグが壊れません。改行や続いた空白は1つの空白にまとめます。

具体例

「例を入れる」で入る次の内容から、タグを作ります。

• タイトル: パーセント計算ツール｜割引・増減率・割合をすぐ計算 | サンプル工房
• ページのURL: https://example.com/tools/percent
• 画像のURL: https://example.com/images/ogp-percent.png（1200×630px）
• サイトのアカウント: @example

出力の一部は次のとおりです。

<title>パーセント計算ツール｜割引・増減率・割合をすぐ計算 | サンプル工房</title>
<link rel="canonical" href="https://example.com/tools/percent" />
<meta property="og:image" content="https://example.com/images/ogp-percent.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />

このタイトルは全角換算で32.5文字あり、パソコンの検索結果で末尾が省略されやすい長さなので、「注意」が出ます。「表示の目安」の Google の検索結果でも、末尾が「…」になります。

チェックする内容

• 文字数: タイトルは全角30文字（半角60文字）ほど、説明文は全角80〜120文字ほどが目安です。検索結果は文字数ではなく表示の幅で切れるので、全角を2・半角を1と数えた幅で判定します。X のカードの上限（タイトル70文字、説明文200文字）も確かめます
• URL: /ogp.png のような相対パスや、example.com/ogp.png のように https:// が無い書き方は、SNS が読み取れないので「要修正」になります。http:// は注意を出します
• 画像: SVG は X や Facebook で表示されません。幅と高さを入力するか手元の画像を選ぶと、大きさと縦横比を確かめます。Facebook は幅・高さのどちらかが200px未満の画像を使わず、X は大きな画像のカードに300×157px以上、小さな画像のカードに144×144px以上が要ります。大きな画像のカードで 1.91:1〜2:1 から外れる画像は、上下か左右が切り取られます。おすすめは 1200×630px です
• アカウント: example、@example、https://x.com/example のどれを入力しても @example にそろえます。X のユーザー名として使えない文字があれば知らせます

手元の画像で確かめる

「手元の画像で確かめる」で画像ファイルを選ぶと、幅と高さが入り、プレビューにその画像が表示されます。5MBを超える画像（X が使わない大きさ）や SVG も知らせます。画像はブラウザの中で読むだけで、アップロードはしません。画像のURLに書いた画像は読み込まないので、公開前の画像でも、まだサーバーに置いていない画像でも確かめられます。

FAQ

OGP とは何ですか？

Open Graph Protocol の略で、ページを SNS やチャットでシェアしたときに表示するタイトル・説明・画像を、<meta property="og:..."> のタグで指定するしくみです。Facebook が始めたもので、LINE、Slack、Discord なども読み取ります。X は独自の twitter: のタグを持っていますが、無い項目は OGP の値で補います。

meta keywords は入れなくてよいのですか？

Google は検索順位の判断に meta keywords を使っていないと公表しているので、このツールでは出力しません。入れても害はありませんが、効果もありません。

タイトルを OGP と別にできますか？

このツールでは <title> と og:title に同じ文字列を使います。検索結果では「| サイト名」まで含めたタイトル、SNS ではページ名だけ、のように分けたいときは、出力した og:title の値だけを書き換えてください。

タグを入れたのに、SNS で古い画像やタイトルのまま表示されます

SNS は一度読み取ったページの情報をしばらく保存しています。Facebook はシェアデバッガーで「もう一度スクレイピング」すると新しい情報を読み直します。X や LINE も時間をおいて読み直すので、少し待つか、URL の末尾に ?v=2 のような文字を付けてシェアすると、新しいページとして読み取られます。

fb:app_id や <head prefix="og: ..."> は必要ですか？

どちらも無くても、OGP は読み取られます。fb:app_id は Facebook のインサイトで統計を見る場合に使うもので、Facebook のシェアデバッガーは無いと注意を出しますが、表示には影響しません。

プレビューは実際の表示と同じですか？

各サービスの見た目をまねた目安です。検索結果のタイトルや説明文は、Google がページの内容に合わせて書き換えることもあります。公開した後は、各サービスの確認ツールや実際のシェアで確かめてください。

入力したデータは保存されますか？

いいえ。タグの生成はすべてブラウザ内で行い、入力した内容や選んだ画像を送信したり保存したりしません。ページを再読み込みすると消えます。