Archipela / SEO / OG・Twitterカード生成

📱 OG・Twitterカード生成

OGP（Open Graph）とTwitter Cardのメタタグを入力するだけで自動生成し、SNSでシェアされたときのカード表示をリアルタイムにプレビューします。データはサーバーに送信されません。

推奨サイズは 1200×630px（アスペクト比 約1.91:1）。この比率に近い画像だと、多くのSNSで見切れずに表示されます。

シェア対象ページの正規URL（canonical）を指定します。

SNSカード プレビュー

画像なし
EXAMPLE.COM
ページタイトルがここに表示されます
ここに説明文（og:description）のプレビューが表示されます。実際の見え方はSNSごとに異なります。

📘 使い方

  1. 「og:title」「og:description」に、SNSでシェアされたときに見せたいタイトルと説明文を入力します。入力すると自動でプレビューとタグが更新されます。
  2. 「og:image」にカード画像のURLを入力します。推奨サイズは 1200×630px で、右のプレビューに反映されます。
  3. 「og:url」に正規URL、「og:site_name」にサイト名を入力します。og:type はコンテンツ種別に合わせて選びます。
  4. 「Twitterタグも生成する」がオンなら、twitter:* タグも一緒に生成します。空欄の項目は自動的に og の値で補完されます。
  5. 「コピー」または「ダウンロード」で生成タグを取得し、ページの <head> 内に貼り付けます。

❓ よくある質問

OGP（Open Graph）とは何のために使うのですか？

OGPは、FacebookやLINE、Slackなどでページのリンクをシェアしたときに、タイトル・説明文・画像を「カード」として表示させるための仕組みです。設定しておくと、リンクだけの味気ない表示ではなく、目を引くカードで表示されるため、クリック率やシェア率の向上が期待できます。

og:image の推奨サイズは？

一般的な推奨は 1200×630px（アスペクト比 約1.91:1）です。この比率に合わせておくと、多くのSNSで上下左右が見切れずに表示されます。ファイルサイズが大きすぎると読み込まれないことがあるため、5MB以下を目安にし、絶対URL（httpsから始まるフルパス）で指定してください。

Twitter Cardの summary と summary_large_image の違いは？

summary は小さな正方形の画像がタイトル横に並ぶコンパクトなカード、summary_large_image は横長の大きな画像が上部に表示される目立つカードです。ブログ記事やビジュアル重視のページでは summary_large_image が効果的です。大きな画像を使う場合は 1200×628px 前後を推奨します。

OGPタグがあれば、Twitter用のタグは省略できますか？

多くの場合 X（旧Twitter）は twitter:* タグが無くても og:* タグにフォールバックしますが、twitter:card の種類指定や、SNSごとに別の画像・文言を出し分けたい場合は twitter:* タグを併記するのが確実です。すべてのプラットフォームが必ずOGPにフォールバックするとは限らないため、両方を用意しておくと安心です。