Open Graph 生成
og: と twitter: の完全なセットを生成し、貼り付ける前にシェアカードのプレビューをリアルタイムで確認できます。
HTML スニペット
シェアカードのプレビュー
example.com
Page title
このツールは完全にブラウザ内で動作します。データは端末から出ず、サーバーへアップロードされることはありません。
使い方
- 1ページのタイトル・説明・正規 URL を入力します。
- 2シェア画像の URL(1200 × 630px が無難)を追加し、カードタイプを選びます。
- 3タグを <head> にコピーし、プレビューカードを確認します。
Open Graph 生成
リンクが X・Facebook・LinkedIn・Slack・iMessage でシェアされると、プレビューカードはほぼ Open Graph タグから構成され、twitter: タグが不足分を補います。このジェネレーターは og:title・og:type・og:url・og:image・og:image:alt・og:site_name・og:description・og:locale に加え、twitter:card・twitter:site・twitter:creator も出力します。
twitter: タグが欠けていても多くのプラットフォームは og: タグにフォールバックするため、差分だけ追加すれば十分です。ライブプレビューで大型画像カードと summary カードの表示を確認できます。
よくある質問
og:image の推奨サイズは?
1200 × 630px(1.91:1)が Facebook・X・LinkedIn 共通の安全なサイズです。ファイルは 8MB 未満、絶対 URL を使い、アクセシビリティのため og:image:alt も必ず設定してください。
og: と twitter: の両方が必要?
twitter:title・twitter:description・twitter:image は og: の値にフォールバックします。og: セットに加えて必要なのは twitter:card(summary または summary_large_image)、twitter:site、任意で twitter:creator だけです。
og:type はどれを選ぶ?
トップページや汎用ページは website、ニュースやブログ記事は article(可能なら article:published_time を追加)、EC の商品ページは product を使います。タイプによってプラットフォームの分類が変わります。
関連ツール
メタタグ生成
title・description・keywords・robots・viewport などのメタタグを生成し、<head> にそのまま貼れる HTML をリアルタイム出力します。
すべてのツール →
SERP プレビュー
デスクトップとモバイルで Google のスニペットをプレビュー。ピクセル単位の切り詰めと title・description の長さメーターを表示します。
すべてのツール →
構造化データ(スキーマ)生成
Organization・LocalBusiness・Product・Article・FAQPage・HowTo の 6 種類の JSON-LD を生成。エスケープ済みでそのまま貼り付けられます。
すべてのツール →
UTM リンク生成
任意の URL に utm_source・medium・campaign・term・content を追加し、正しくエンコードされた計測リンクを即座に作成します。
すべてのツール →
ツールを埋め込む
1 行であなたのサイトにツールを。訪問者のブラウザ内で動きます。
<iframe src="https://zoyku.com/ja/tools/open-graph-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — open-graph-generator" loading="lazy"></iframe>