OGPメタタグジェネレーター

OGPメタタグジェネレーターとは#

OGPメタタグジェネレーターは、ページのOpen Graph・X(Twitter)カード用メタタグを作成するツールです。必要な項目を入力すると、コピーしてページの<head>に貼れる形でタグが生成されます。

入力した項目だけがタグになります。他の項目に値があればog:typeとtwitter:cardが自動で付くため、タイトルと画像だけでもそのまま使えるタグになります。

使い方#

1. ページのタイトルと説明を入力します。
2. ページURL・画像URL・サイト名を加えます。
3. 生成されたタグをコピーしてHTMLの<head>に貼ります。

ページの種類・言語・画像サイズ・Xアカウントは詳細設定にまとまっています。

項目の説明#

基本項目#

• タイトル: og:titleになります。60文字前後が多くの共有カードに収まります。
• 説明: og:descriptionになります。長い説明はカード上で切れるため、160文字前後が目安です。
• ページURL: og:urlになります。ページの正規URLを入力します。
• 画像URL: og:imageになります。クローラーが取得できる公開URLを使います。
• サイト名: og:site_nameになり、カードの提供元として表示されます。

詳細設定#

• 種類(og:type): コンテンツの種別です。記事・製品・プロフィールでなければwebsiteのまま使います。
• 言語(og:locale): ja_JPのようなページのロケールです。初期状態は未設定で、選ぶまで出力されません。
• 画像の説明(og:image:alt): 画像の内容を短く表した文です。画像URLがあるときだけ出力されます。
• 幅/高さ(og:image:width・og:image:height): 画像の寸法をピクセル単位で表します。画像URLがあるときだけ、入力した方だけが出力されます。
• カードの種類(twitter:card): 既定は大きな画像です。小さな概要カードにしたいときは概要を選びます。
• サイトアカウント/投稿者アカウント(twitter:site・twitter:creator): Xアカウントです。先頭の@がなければ自動で補います。

画像チェックは画像を原寸で表示します。1200×630(約1.91:1)前後は多くのSNSで大きく表示され、比率が大きく外れると警告が出ます。画像が読み込めると検出サイズが幅・高さの欄に入ります。手で編集もできます。

活用シーン#

• ブログ記事や製品ページの共有カードの見た目を整えるとき。
• CMSや静的サイトに貼るタグを用意するとき。
• 既存ページのOGPを作り直すとき。

よくある質問#

注意点#