OGPの設定に最低限必要なタグは？

og:title、og:description、og:image、og:url、og:type の5つと、X 向けの twitter:card です。

titleとog:titleは同じでいい？

同じで問題ありません。SNS 向けに少し短く、目を引く表現に変えることもあります。

OGP画像のサイズは？

1200×630px（縦横比 1.91:1）が推奨です。

Next.jsでの設定方法は？

App Router では page.tsx や layout.tsx で metadata をエクスポートします。このツールの「Next.js」タブでそのまま貼れるコードを出せます。

🏷️OGP・metaタグ生成

ページのタイトル・説明文・画像の URL を入れるだけで、title、description、OGP、X（Twitter）カードの meta タグをまとめて生成します。Next.js（App Router）の metadata の形式でも出力できます。

タイトル20文字（目安 30〜60）説明文45文字（目安 80〜120）

ページの URLOGP 画像の URL（1200×630）サイト名X のアカウント（任意）og:type

head に貼る HTML

<title>Moodly - 1タップで続く気分日記</title>
<meta name="description" content="気分を1タップで記録して、グラフで振り返れる日記アプリ。続けるほど自分のことが分かります。" />
<link rel="canonical" href="https://example.com/" />
<meta property="og:title" content="Moodly - 1タップで続く気分日記" />
<meta property="og:description" content="気分を1タップで記録して、グラフで振り返れる日記アプリ。続けるほど自分のことが分かります。" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:image" content="https://example.com/ogp.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Moodly" />
<meta property="og:locale" content="ja_JP" />
<meta name="twitter:card" content="summary_large_image" />

公開後の見え方は OGP確認ツールでチェックできます。

出力されるタグ

タグ	役割
title / description	検索結果のタイトルと説明文
canonical	正規の URL（重複ページ対策）
og:*	SNS でシェアされたときの表示
twitter:card	X でのカードの種類

設定したら OGP確認ツールで実際の見え方を確認できます。構造化データは構造化データ生成で作れます。

よくある質問

Q. OGPの設定に最低限必要なタグは？: og:title、og:description、og:image、og:url、og:type の5つと、X 向けの twitter:card です。
Q. titleとog:titleは同じでいい？: 同じで問題ありません。SNS 向けに少し短く、目を引く表現に変えることもあります。
Q. OGP画像のサイズは？: 1200×630px（縦横比 1.91:1）が推奨です。
Q. Next.jsでの設定方法は？: App Router では page.tsx や layout.tsx で metadata をエクスポートします。このツールの「Next.js」タブでそのまま貼れるコードを出せます。

ほかの無料ツール

ツール一覧を見る

個人開発のプロダクトを、仲間に見てもらおう

Solomaker は個人開発者のためのコミュニティです。作ったプロダクトを登録して、開発の記録を発信できます。

プロダクトを登録する（無料）