クリックしたくなるリンクに
メタタグがないと、共有されたリンクは裸のURLしか表示しません。タグがあれば画像・タイトル・説明付きのカードになり、ずっと魅力的です。このツールはそれらを生成し、公開前に表示を確認できます。
-
項目を入力
タイトル、説明、ページと画像のURL、サイト名。
-
プレビューを確認
ソーシャルカードがSNSと同じようにライブ更新されます。
-
タグをコピー
HTMLページの <head> に貼り付けます。
生成されるタグ
| タグ | 役割 |
|---|---|
| <title> / description | 検索エンジン向けのタイトルと要約 |
| og:title / og:description | Facebook・LinkedIn 等が表示する文章 |
| og:image | カードの画像（1200 × 630 推奨） |
| twitter:card | X でのカード形式（大きい画像か要約） |
すべてブラウザ内で計算されます。画像には絶対URLを使ってください。そうしないと各ネットワークが読み込めません。
よくある質問
Open Graph とは？
Open Graph は Facebook が作成したプロトコルで、「og:」タグを通じてウェブページを記述します。リンクが共有されると、各ネットワークはこれらのタグを読み、生のURLの代わりにタイトル・説明・画像を表示します。
共有画像のサイズは？
「大きい画像」カードでは 1200 × 630 ピクセル（1.91:1 の比率）を目安に。これは Facebook・LinkedIn・X が推奨するサイズです。ネットワークは相対パスをたどらないため、絶対URL（https://…）を使ってください。
Open Graph に加えて Twitter タグは必要？
X（Twitter）は Open Graph を優先的に読みますが、形式（大きい画像か要約）を選ぶには「twitter:card」が役立ちます。他の twitter:* タグは無い場合 og: にフォールバックします。含めておくと予期せぬ表示崩れを防げます。
タイトルと説明の長さは？
タイトルは約60文字、説明は110〜160文字を目安に。それを超えると各ネットワークや検索エンジンが文章を切り詰めます。ライブプレビューが実際の表示を即座に示します。