OGPタグ・メタタグ生成(SNSシェア用)
ページのタイトル・説明・URL・画像から、SEOとSNSシェア用のメタタグ(title・description・OGP・Twitterカード)を生成します。
OGPタグ・メタタグ生成について
OGP(Open Graph Protocol)は、WebページがSNSでシェアされたときに、表示されるタイトル・説明・画像を指定するための仕組みです。適切に設定すると、シェアされたときの見栄えがよくなり、クリックされやすくなります。
ページのタイトル・説明・URL・画像のURLを入力すると、title・description・canonical・OGP・Twitterカードのタグを生成します。HTMLの<head>内に貼り付けて使います。タイトルは30〜35文字程度、説明は120文字前後が、検索結果での表示の目安です。
こんなときに使えます
- Webサイトを、SNSでシェアされたときの表示に対応させる
- 新しいページの、メタタグを一式つくる
- 検索結果のタイトル・説明の文字数を確認する
使うときのポイント
- OGP画像は、横長(1200×630px程度)が推奨されることが多い
- SNS側のキャッシュで、更新が反映されるまで時間がかかる場合がある
計算例
入力欄の初期値のまま計算すると、次の結果になります。条件は、ページのタイトルが便利ツールラボ - 無料の計算ツール集、ページの説明(120字程度まで)がローン計算・文字数カウント・単位変換など、日常で使える無料ツールを集めました。、ページのURLがhttps://example.com/、シェア用の画像URL(任意)がhttps://example.com/ogp.png、サイト名(任意)が便利ツールラボです。数値を変えると、この結果もそれに合わせて変わります。
| タイトルの文字数 | 19文字(目安: 30〜35文字以内) |
|---|---|
| 説明の文字数 | 39文字(目安: 120文字前後まで) |
使い方
- タイトル・説明・URLを入力します(画像とサイト名は任意)。
- 生成されたタグをコピーして、HTMLの<head>内に貼り付けます。
計算方法・仕組み
title・description・canonical(正規URL)・OGP(Open Graph)・Twitterカードの基本タグを生成します。内容に含まれる記号(&や"など)は自動でエスケープします。
知っておきたい基礎知識
OGP(Open Graph Protocol)は、WebページのURLをSNSでシェアしたときに、表示される、タイトル・説明・画像などを指定する、メタタグの規格です。og:title・og:description・og:image・og:urlなどのタグを<head>の中に書きます。OGPを設定すると、シェアされたときの見た目が整い、クリックされやすくなります。
OGP画像は、1200×630ピクセル程度の、横長の画像が、推奨されています。タイトルは、短く、内容が伝わる文章に、説明文は、100〜120文字程度に、まとめると、多くのSNSで、表示が、途切れにくくなります。また、title・descriptionタグや、canonicalタグも、あわせて設定すると、検索エンジンに、ページの内容を正しく伝えられます。
間違えやすいポイント
- 画像のURLは、絶対URL(https://から始まる)で、指定する
- SNS側が、以前の情報をキャッシュしていると、変更が、すぐに反映されない
- タイトルや説明文に、引用符などの記号が含まれる場合は、エスケープが必要(このツールが、自動で行う)
よくある質問
- OGP画像の、おすすめのサイズは?
- 1200×630ピクセル(縦横比、約1.91:1)が、広く推奨されています。ファイルサイズは、小さめにしておくと、表示が、速くなります。
- 設定が反映されているか、確認するには?
- 各SNSの公式サイトにある、シェアのデバッグツールで、URLを入力すると、取得されている情報を確認できます。