このツールに問題がありますか？

「メタタグ生成 オンライン」について

できること

メタタグ生成ツールは、短いフォームをそのままページに貼り付ける HTML に変換します。SEO タグ、Open Graph（og:）タグ、Twitter Card（twitter:）タグを一度に作り、ソーシャルカードのライブプレビューを表示するので、公開前にリンクの見え方を確認できます。すべてブラウザ内で瞬時に動き、何も保存されません。

出力されるタグ

中心となる SEO タグ — <title>、<meta name="description">、<link rel="canonical"> — に加え、Open Graph の og:title、og:description、og:image、og:url、og:type、og:site_name が得られます。X 向けには twitter:card、twitter:title、twitter:description、twitter:image を追加します。どのページにも必要な基本タグ — <meta charset="utf-8">、レスポンシブな viewport タグ、<meta name="theme-color"> — も埋めます。

なぜ重要か

検索エンジンはタイトルと説明を読み取って結果ページのスニペットを作るため、明快なタグはより多くのクリックを得ます。誰かがあなたのリンクを X、Facebook、LinkedIn、Slack、WhatsApp に貼ると、これらのアプリは og: と twitter: タグを読み、見出し・要約・画像を備えたリッチなプレビューカードを描きます。タグがなければ素の URL だけ、あれば注目を集めるカードになります。

プライベートで即時

この生成ツールはあなたのページを取得せず、どこにもログインせず、何も保存しません。値を入力すると、ツールがブラウザ内でタグを組み立て、あなたが結果をコピーします。テキストだけなので、項目を変えて何度でも再生成できます。

このツールの使い方

手順

  1. 情報を入力する。ページタイトル、説明、正規 URL、画像 URL を入力し、サイト名、コンテンツタイプ、Twitter カードの種類、テーマカラーを設定します。

  2. プレビューを確認する。ライブのソーシャルカードが更新されるのを見て、見出し・要約・画像が正しく見えるか確かめます。

  3. タグをコピーする。コピーを押して、生成された <meta> タグのブロック全体を取得します。

  4. ページに貼り付ける。タグを HTML の <head> 内に置いて公開します。

ヒント

  • タイトルは約 60 文字、説明は約 155 文字に保つと、検索エンジンが途中で切らずに表示します。
  • 約 1200×630 ピクセルの絶対 HTTPS 画像 URLを使いましょう — ソーシャルアプリは相対パスを無視し、小さい画像を拒否します。
  • タグはページの <head> に置き、本文には置かないでください。さもないとクローラーが見ないことがあります。
  • og:url を正規 URL に合わせると、共有と検索が同じアドレスを指します。

似たツール