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

API リファレンス

このドキュメントでは、Open Graph Meta Generator の技術的な詳細と基盤となる機能について説明します。

ツール概要

Open Graph Meta Generator は、Open Graph と Twitter Card プロトコル向けの HTML meta タグを生成するクライアントサイドツールです。ユーザー入力を処理し、正しい形式の HTML meta タグを出力します。

入力パラメータ

基本情報

パラメータ型必須説明例
pageTypestringはいコンテンツタイプ"website", "article", "book"
titlestringいいえページタイトル"My Awesome Website"
descriptionstringいいえページ説明"A great website for developers"
urlstringいいえページ URL"https://example.com/page"
siteNamestringいいえサイト名"My Company"

画像設定

パラメータ型必須説明例
imageUrlstringいいえ画像 URL"https://example.com/image.jpg"
imageAltstringいいえ画像の Alt テキスト"Company logo"
imageWidthstringいいえ画像の幅（ピクセル）"1200"
imageHeightstringいいえ画像の高さ（ピクセル）"630"

Twitter 設定

パラメータ型必須説明例
twitterCardTypestringはいTwitter カードの種類"summary_large_image"
twitterSitestringいいえサイトの Twitter ハンドル"@example"
twitterCreatorstringいいえ作成者の Twitter ハンドル"@author"

出力形式

このツールは次の形式の HTML meta タグを生成します。

Open Graph タグ

<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="Site Name" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:alt" content="Image description" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Twitter タグ

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@author" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

コンテンツタイプ

サポートされるページタイプ

タイプ説明用途
website一般的な Web サイトページホームページ、About ページ、お問い合わせページ
articleブログ記事、ニュース記事ブログ記事、ニュース記事、チュートリアル
book書籍ページ、電子書籍書籍一覧ページ、電子書籍ページ
profile個人または企業プロフィールユーザープロフィール、企業ページ
music音楽トラック、アルバム音楽配信、アルバムページ
video動画コンテンツ動画ページ、映画一覧ページ

Twitter Card の種類

タイプ説明最適な用途
summaryサムネイル付きの基本カードブログ記事、ニュース記事
summary_large_image大きな画像付きカードビジュアルコンテンツ、商品
appモバイルアプリのプロモーションApp Store ページ
player動画/音声コンテンツ動画ページ、Podcast

データ処理

HTML エスケープ

すべてのユーザー入力は、XSS 攻撃を防ぐために自動的にエスケープされます。

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}

URL の検証

URL は、正しい形式であることを確認するために検証されます。

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (_) {
    return false;
  }
}

コンテンツ長の制限

このツールでは推奨される長さ制限を適用します。

  • タイトル: 最大 60 文字
  • 説明: 最大 160 文字
  • URL: 有効な URL 形式であること

ブラウザ互換性

サポート対象ブラウザ

ブラウザバージョンサポート
Chrome60+完全対応
Firefox55+完全対応
Safari12+完全対応
Edge79+完全対応

必要な機能

  • ES6+ サポート
  • Clipboard API サポート
  • Local Storage サポート
  • CSS Grid サポート

パフォーマンスに関する考慮事項

クライアントサイド処理

  • すべての処理はブラウザ内で行われる
  • サーバーリクエストは不要
  • 即時に生成とプレビューが可能
  • メモリ使用量は最小限

キャッシュ

  • 生成された meta タグはブラウザストレージにキャッシュされる
  • 履歴はローカルに保存される
  • 外部依存はない

エラーハンドリング

入力検証エラー

// Example error handling
if (!title.trim()) {
  showError("Title is required");
  return;
}

if (url && !isValidUrl(url)) {
  showError("Please enter a valid URL");
  return;
}

画像読み込みエラー

// Handle image loading errors
function handleImageError(event) {
  const img = event.target;
  img.style.display = "none";
  showWarning("Image failed to load");
}

統合例

WordPress 統合

// Add to functions.php
function add_open_graph_tags() {
    if (is_single()) {
        $title = get_the_title();
        $description = get_the_excerpt();
        $image = get_the_post_thumbnail_url();

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />';
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />';
        echo '<meta property="og:image" content="' . esc_url($image) . '" />';
    }
}
add_action('wp_head', 'add_open_graph_tags');

React 統合

// React component example
function OpenGraphMeta({ title, description, image, url }) {
  return (
    <>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
    </>
  );
}

Next.js 統合

// Next.js Head component
import Head from "next/head";

function MyPage() {
  return (
    <Head>
      <meta property="og:title" content="My Page Title" />
      <meta property="og:description" content="My page description" />
      <meta property="og:image" content="https://example.com/image.jpg" />
    </Head>
  );
}

テストと検証

ソーシャルメディアデバッガー

自動テスト

// Example test for meta tag generation
describe("Open Graph Meta Generator", () => {
  test("generates correct meta tags", () => {
    const input = {
      pageType: "website",
      title: "Test Page",
      description: "Test description",
    };

    const output = generateMetaTags(input);

    expect(output).toContain('<meta property="og:type" content="website" />');
    expect(output).toContain('<meta property="og:title" content="Test Page" />');
  });
});

トラブルシューティング

よくある問題

  1. 画像が表示されない: URL の形式とアクセス可否を確認する
  2. タグが機能しない: ソーシャルメディアデバッガーで検証する
  3. 内容が切り詰められる: 文字数制限を確認する
  4. キャッシュの問題: デバッグツールでキャッシュを更新する

デバッグモード

詳細情報を確認するにはデバッグモードを有効にします。

// Enable debug logging
localStorage.setItem("debug", "true");

今後の拡張

予定している機能

  • Schema.org 構造化データのサポート
  • 多言語サポート
  • 一括生成機能
  • サーバーサイド生成用 API エンドポイント
  • 高度な画像最適化
  • 分析機能との統合

コントリビュート

Open Graph Meta Generator に貢献する場合は、次の手順に従ってください。

  1. リポジトリを Fork する
  2. 機能ブランチを作成する
  3. 変更を加える
  4. テストを追加する
  5. pull request を送る

サポート

技術サポートや質問がある場合：

  • FAQ を確認する
  • Examples を確認する
  • メインサイトからサポートに問い合わせる
このページは役に立ちましたか？