メタタグは、検索エンジンや SNS がページ本体の代わりに読む、head セクション内の数行です。タイトルと説明は Google のスニペットを形作り、Open Graph と Twitter カードのタグはリンク共有時に表示される画像・見出し・本文を決めます。このツールは一つのフォームからすべてを書き出し、実際の見え方で結果を表示します。

手順

1. 1 ページのタイトルと説明を入力します。カウンターは検索結果に通常収まる長さ — 約 60 文字と 160 文字 — を示します。
2. 2 正規 URL、サイト名、1200×630 の画像を追加します。コンテンツの種類、ロケール、カードのレイアウトを選ぶと、3 つのプレビューが入力と同時に更新されます。
3. 3 生成されたタグをコピーしてページの head セクションに貼り付け、既存のタイトルと説明のタグを置き換えます。

タイトルと説明

title タグは検索結果の青い見出しであり、ブラウザーのタブ名でもあります。約 60 文字以内に収め、特徴的な語を先頭に置いてください。Google はピクセル幅で切るため、幅の広い文字ほど早くスペースを使います。説明はランキング要因ではありませんが、検索結果の中の広告です。ページが何を提供し、なぜクリックすべきかを 150〜160 文字で伝えます。Google がより適切と判断すれば、ページ内の文章に置き換えられることもあります。

Open Graph

Facebook、LinkedIn、WhatsApp、Slack、ほとんどのチャットアプリは og:title、og:description、og:image、og:url を読んでリンクプレビューを作ります。画像は 1200×630 ピクセル（1.91:1）、8 MB 未満、絶対 URL で指定します。og:type はほとんどのページで website、記事なら article。og:site_name は一部のサービスで見出しの上に表示されます。これらのタグがないと、共有時にページ内の無関係な画像が出たり、画像が全く出なかったりします。

Twitter カード

X は独自のタグを使いますが、足りないものは Open Graph にフォールバックします。主に必要なのは、レイアウトを選ぶ twitter:card — 全幅画像なら summary_large_image、小さな正方形サムネイルなら summary — と、クレジットするアカウントを示す twitter:site です。タイトル・説明・画像は、twitter: 系のタグしか読まないサービスのためにここでも繰り返されます。

正規 URL と robots

canonical リンクは、同じ内容が複数の URL（パラメーターの有無、http と https、末尾のスラッシュ）で到達できるときに、どのアドレスが原本かを検索エンジンに伝えます。必ず完全な絶対 URL を使ってください。robots タグはたいてい不要で — index, follow が既定値 — noindex でページを検索結果から外すときだけ追加する価値があります。