メタタグ生成ツールとは?
メタタグは、検索エンジンや SNS が読むための情報で、HTML の <head> に置きます。このメタタグ生成ツールは、いくつかの項目を入力するだけで SEO の title/description、Open Graph、Twitter Card タグを即時生成し、Google スニペットのプレビューも表示するので、入力しながら効果を確認できます。すべてブラウザ内で処理します。
使い方
- タイトル・説明・ページ URL・プレビュー画像 URL を入力します。
- 右側に検索プレビューと文字数がリアルタイムで表示され、下に完全なタグが生成されます。
- 「すべてコピー」を押し、サイトの
<head>に貼り付けます。
活用シーン
- 新しいページに SEO と SNS 共有のタグを一括で追加。
- タイトルや説明が検索結果で切り詰められないか確認。
- 構造化データや他のツールが必要?JSON 整形で JSON-LD を整えられます。
リンクを共有してもサムネイルやタイトルが更新されないのはなぜ?
Open Graph タグを入れてページを公開し、意気込んで Facebook や Slack に貼ったのに、サムネイルが古いまま、あるいは真っ白——これはたいていタグの間違いではなく、SNS 側がプレビューをキャッシュしているからです。プラットフォームは初回にページを取得するとコピーを保存し、以後は同じ URL を毎回取り直しません。解決策は、各プラットフォームの公式デバッガ/再取得ツール(Facebook Sharing Debugger など)で強制的に取り直すことです。ほかによくある三つの落とし穴:一つ目は og:image に相対パスを使い SNS 側で解決できないこと——必ず https:// で始まる絶対 URLにします。二つ目は画像が小さすぎること——多くは最低 200×200、推奨は 1200×630。三つ目はタグの置き場所で、<head> 内に置く必要があり、<body> では無視されます。すべて確認しても変わらないなら、まず再取得ツールを走らせましょう。ページの JSON-LD 構造化データを整えるには JSON 整形と併用できます。
完全な一組はどんな形で、どの長さを見るべき?
このページが 5 つのフィールドから生成する完全な出力:
<title>Free Online Toolbox</title>
<meta name="description" content="Image and PDF converters that run in your browser.">
<link rel="canonical" href="https://yunknow.cc/">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Free Online Toolbox">
<meta property="og:description" content="Image and PDF converters that run in your browser.">
<meta property="og:url" content="https://yunknow.cc/">
<meta property="og:image" content="https://yunknow.cc/og.png">
<meta property="og:site_name" content="Yunknow">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Online Toolbox">
<meta name="twitter:description" content="Image and PDF converters that run in your browser.">
<meta name="twitter:image" content="https://yunknow.cc/og.png">注目点が 3 つ。og:type があること(最も忘れられがちなタグ)。twitter:card が summary_large_image であること(横長プレビューが出るのはこれのおかげで、省くと小さな正方形)。そして説明が名前空間ごとに 3 回繰り返されていること —— どの利用側も他の名前空間の分を読まないからです。フィールド横のカウンターは飛ばされがちな部分です。あのタイトルは Title 19 chars、説明は Description 50 chars と報告しました。フィールド幅ではなくカウンターに合わせて書いてください。