メタタグ生成ツール（OGP・Xカード対応）
SEO用のメタタグ、OGP（Open Graph）タグ、Xカードのタグを作成し、Googleの検索結果やSNSでシェアしたときの見え方をプレビューできます。
メタタグ生成ツール — SEO・OGP・Xカードのタグをプレビューしながら作成
ページのhead内にあるタイトルとディスクリプションはGoogleでの見え方を決め、OGP（Open Graph）とXのタグは、Facebook、LinkedIn、WhatsApp、Slack、Xでリンクがシェアされたときの見え方を決めます。このツールは短いフォーム1つからそれらをすべて書き出し、入力に合わせて3つのプレビューを表示します。読者より先に、タイトルが途中で切れていることに気づけます。
サーバーには何も送信されません。このページが行う通信は、プレビューに表示するためにシェア画像をそのアドレスから読み込むことだけです。
使い方
- ページタイトル、ディスクリプション、ページのアドレス（canonical URL）、シェア画像のURLを入力します。
- 文字数カウンターと、Google、Facebook、Xのプレビューを確認します。
- コンテンツの種類とXカードのスタイルを選び、アカウントがあればXアカウントを入力します。
- コピーを押し、ページの
<head>内にコードを貼り付けます。
既存のページを改善するには、HTMLからタグを読み込むを押してページのソースを貼り付け、項目に反映を押します。貼り付けたHTMLは読み取られるだけで、実行されることはありません。
各タグの役割
| タグ | 使われる場所 | ヒント |
|---|---|---|
<title> | ブラウザーのタブ、Googleの検索結果 | 約50～60文字。検索される語句を先頭に置く |
meta description | Googleのスニペット | 約120～155文字で、そのページが読者に何を提供するのかを書く |
link rel="canonical" | 複数のURLで同じページが表示されるとき、検索結果に出すべき1つのアドレス | |
og:title、og:description | Facebook、LinkedIn、WhatsApp、Slack | 検索用のタイトルより短く、目を引く表現にしてもよい |
og:image | すべてのシェアプレビュー | 1200 × 630ピクセル、https://で始まる完全なアドレス、約5 MB未満 |
twitter:card | X | 横長の画像ならsummary_large_image、小さな正方形ならsummary |
meta robots | 検索エンジン | インデックスやリンクをたどることをオフにしたときだけ追加される |
文字数の上限
Googleはタイトルを文字数ではなく幅で切り、その幅はおよそ580ピクセルです。これは通常の英文でおよそ60文字にあたり、WやMのような幅の広い文字が多いと早く埋まります。ディスクリプションは、パソコンではたいてい約155～160文字で切られ、スマートフォンではそれより短くなります。カウンターは、無理のない長さを超えるとオレンジに、ほぼ確実に切られる長さになると赤に変わります。
公開したあとに
- SNSは各リンクのプレビューをキャッシュしています。FacebookのシェアデバッガーやLinkedInのPost Inspectorを使って、新しいタグを読み直させてください。
- ページの本文のほうがディスクリプションより検索語句に合う場合、Googleは独自に抜粋を選びます。また、ページの内容を表していないタイトルは書き換えることがあります。
- ページごとに固有のタイトルとディスクリプションを付けてください。サイト全体で同じものを繰り返すと、検索結果がどれも似て見えます。
関連ツール
シェア画像を適切な形式とサイズで作るには画像変換ツールを、HTMLの特殊文字を手作業でエスケープするにはHTMLエンティティ変換ツールを使ってください。次のタスクページでは、1つのプレビューに絞ってこのツールが開きます：OGPタグ作成、Twitterカード作成、Google検索結果プレビュー。