w
ドキュメント コアツール Open Graph Meta Generator

基本的な使い方ガイド

このガイドでは、ツールを使って Open Graph メタタグを生成するための基本手順を順番に説明します。

ステップ 1: ツールにアクセスする

メインのツールページから Open Graph Meta Generator を開くか、URL を直接入力してアクセスします。

ステップ 2: 基本情報を入力する

ページタイプ

ページに適したコンテンツタイプを選択します。

  • Website: 一般的な Web ページ
  • Article: ブログ記事、ニュース記事、チュートリアル
  • Book: 書籍ページ、電子書籍
  • Profile: 個人またはビジネスのプロフィール
  • Music: 楽曲、アルバム、プレイリスト
  • Video: 動画コンテンツ、映画、テレビ番組

タイトル

ページ用の魅力的なタイトルを入力します。

  • 最適な表示のため、60 文字以内に抑える
  • 内容が伝わりやすく、興味を引く表現にする
  • 関連キーワードを自然に含める

説明文

コンテンツの内容が分かる説明文を書きます。

  • 150〜160 文字程度を目安にする
  • ユーザーがページで得られる内容を要約する
  • クリックしたくなるように魅力的に書く

ページ URL

ページの完全な URL を入力します。

  • 絶対 URL を使用する（https:// を含める）
  • URL に正しくアクセスできることを確認する
  • 分かりやすく説明的な URL を使う

サイト名

Web サイトまたはブランド名を入力します。

  • これはソーシャルメディアの投稿に表示される
  • すべてのページで統一する
  • 正式なブランド名を使う

ステップ 3: 画像設定を行う

画像 URL

ソーシャルメディアで表示する画像の URL を入力します。

  • 絶対 URL を使用する（https:// を含める）
  • 画像が公開アクセス可能であることを確認する
  • 推奨サイズ: 1200x630 ピクセル

画像の Alt テキスト

アクセシビリティのための説明的な Alt テキストを追加します。

  • 画像に何が写っているかを説明する
  • 短くても内容が伝わる表現にする
  • スクリーンリーダー利用者にとって重要

画像サイズ

画像の幅と高さを指定します。

  • 幅: 通常は 1200 ピクセル
  • 高さ: 通常は 630 ピクセル
  • これによりソーシャルプラットフォームでの表示が最適化される

ステップ 4: Twitter 設定を行う

カードタイプ

適切な Twitter Card タイプを選択します。

  • Summary: タイトル、説明、サムネイルを含む基本カード
  • Summary with Large Image: 大きな画像付きの強化カード
  • App: モバイルアプリのプロモーション向け
  • Player: 動画や音声コンテンツ向け

サイトアカウント

Web サイトの Twitter ハンドルを入力します。

  • 形式: @yourhandle
  • Twitter の投稿に表示される
  • 任意だが設定を推奨

クリエイターアカウント

コンテンツ作成者の Twitter ハンドルを入力します。

  • 形式: @authorhandle
  • 記事やブログ投稿で特に有用
  • 任意

ステップ 5: メタタグを生成してコピーする

すべての情報を入力したら、次の流れで進みます。

  1. メタタグはリアルタイムで自動生成される
  2. 出力欄で生成された HTML を確認する
  3. 「Copy Meta Tags」ボタンをクリックしてクリップボードにコピーする
  4. プレビュー欄でソーシャルメディア上の表示を確認する

ステップ 6: Web サイトに実装する

コピーしたメタタグを Web サイトの HTML の <head> セクションに追加します。

<head>
  <!-- Your existing head content -->

  <!-- Open Graph Meta Tags -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Your Page Title" />
  <!-- ... other meta tags ... -->

  <!-- Twitter Meta Tags -->
  <meta name="twitter:card" content="summary_large_image" />
  <!-- ... other Twitter meta tags ... -->
</head>

クイックヒント

より良い結果を得るには:

  • 常に高品質で関連性の高い画像を使う
  • ソーシャルメディアのデバッグツールでメタタグを確認する
  • タイトルと説明文は推奨文字数の範囲に収める
  • すべてのページで一貫したブランド表現を保つ

避けたいよくあるミス:

  • 絶対 URL ではなく相対 URL を使う
  • 画像の Alt テキストを入れ忘れる
  • 小さすぎる、または大きすぎる画像を使う
  • プラットフォームごとの見え方を確認しない

メタタグをテストする

実装後は、以下のツールでメタタグを確認できます。

これらのツールを使うと、共有時の見え方を正確に確認でき、問題の発見にも役立ちます。

次のステップ

基本を理解したら、Advanced Features ガイドに進み、さらに高度な設定やカスタマイズ方法を確認してください。

このページは役に立ちましたか？