FastOG
トピック

PHP & Laravel でのOG画像

このガイドでは、FastOGを使ったPHP & LaravelでのOG画像について説明します。バックエンドでHMAC URLに署名し、それをmetaタグに配置するだけで、ブログ記事に動的なOpen Graph画像が自動的に設定されます。サブスクリプション制で無料アカウント（Dynamic APIプランを選択し、ダッシュボードでAPIキーを作成）を利用できます。配線する前に、無料のOG画像テスターでテンプレートをプレビューしてみてください。

PHPとLaravelでHMAC署名付きOG画像URLを実装するための完全ガイドです。

クイックスタート

1. サイナーサービス（signer service）の作成

php
// app/Services/QuickogSigner.php
namespace App\Services;

class QuickogSigner
{
    public function generateSignedOgUrl(array $params, array $options = []): string
    {
        $baseUrl = $options['base_url'] ?? config('services.fastog.base_url', 'https://fastog.com/api/v1/og');
        $apiKey = $options['api_key'] ?? config('services.fastog.api_key');
        $hmacSecret = $options['hmac_secret'] ?? config('services.fastog.hmac_secret');

        if (!$apiKey || !$hmacSecret) {
            throw new \RuntimeException('Missing FASTOG_API_KEY or FASTOG_HMAC_SECRET');
        }

        // Canonical query: every param except `s`, including `key`
        $all = array_merge($params, ['key' => $apiKey]);

        $pairs = [];
        foreach ($all as $k => $v) {
            $values = is_array($v) ? $v : [$v];
            sort($values, SORT_STRING);
            foreach ($values as $vv) {
                $pairs[] = rawurlencode((string) $k) . '=' . rawurlencode((string) $vv);
            }
        }
        sort($pairs, SORT_STRING);
        $canonical = implode('&', $pairs);
        $signature = hash_hmac('sha256', 'GET/api/v1/og' . "\n" . $canonical, $hmacSecret);

        return $baseUrl . '?' . http_build_query(array_merge($all, ['s' => $signature]), '', '&', PHP_QUERY_RFC3986);
    }
}

なぜ rawurlencode なのか？ 正規のクエリはRFC-3986に従ってパーセントエンコードされます（スペースは %20 になり、+ にはなりません）。rawurlencode はこれと完全に一致しますが、urlencode は一致しません（+ を生成するため）。これにより署名が壊れ、invalid_signature が返されます。PHP_QUERY_RFC3986 を http_build_query に渡すことで、最終的なURLが同じエンコーディングで維持されます。

2. 設定

php
// config/services.php
return [
    // ...
    'fastog' => [
        'api_key' => env('FASTOG_API_KEY'),
        'hmac_secret' => env('FASTOG_HMAC_SECRET'),
        'base_url' => env('FASTOG_BASE_URL', 'https://fastog.com/api/v1/og'),
    ],
];
bash
# .env
FASTOG_API_KEY=sk_your_full_api_key_here
FASTOG_HMAC_SECRET=your_64_char_hex_secret_here

3. シングルトンとして登録

php
// app/Providers/AppServiceProvider.php
use App\Services\QuickogSigner;

public function register(): void
{
    $this->app->singleton(QuickogSigner::class);
}

Laravel Blade

blade
{{-- resources/views/blog/show.blade.php --}}
@extends('layouts.app')

@section('head')
    <meta property="og:image" content="{{ $ogImageUrl }}" />
    <meta property="og:title" content="{{ $post->title }}" />
    <meta property="og:description" content="{{ $post->excerpt }}" />
@endsection

@section('content')
    <article>
        <h1>{{ $post->title }}</h1>
        <p>{{ $post->excerpt }}</p>
    </article>
@endsection

コントローラー

php
// app/Http/Controllers/BlogController.php
namespace App\Http\Controllers;

use App\Services\QuickogSigner;
use App\Models\Post;

class BlogController extends Controller
{
    public function show(Post $post, QuickogSigner $signer)
    {
        $ogImageUrl = $signer->generateSignedOgUrl([
            'template' => 'blog',
            'title' => $post->title,
            'subtitle' => $post->excerpt,
            'author' => $post->author->name,
        ]);

        return view('blog.show', compact('post', 'ogImageUrl'));
    }
}

API ルート

php
// routes/api.php
use App\Services\QuickogSigner;
use Illuminate\Http\Request;

Route::get('/og', function (Request $request, QuickogSigner $signer) {
    $validated = $request->validate([
        'title' => 'required|string',
        'template' => 'nullable|string',
    ]);

    $ogImageUrl = $signer->generateSignedOgUrl([
        'template' => $validated['template'] ?? 'default',
        'title' => $validated['title'],
    ]);

    return response()->json(['ogImageUrl' => $ogImageUrl]);
});

Eコマースの例

php
// app/Http/Controllers/ProductController.php
public function show(Product $product, QuickogSigner $signer)
{
    $ogImageUrl = $signer->generateSignedOgUrl([
        'template' => 'ecommerce',
        'title' => $product->name,
        'price' => $product->formatted_price,
        'image' => $product->image_url,
    ]);

    return view('products.show', compact('product', 'ogImageUrl'));
}

ブログ記事の例

php
// app/Http/Controllers/ProfileController.php
public function show(User $user, QuickogSigner $signer)
{
    $ogImageUrl = $signer->generateSignedOgUrl([
        'template' => 'blog',
        'title' => $user->name,
        'subtitle' => $user->bio,
        'author' => $user->name,
    ]);

    return view('profile.show', compact('user', 'ogImageUrl'));
}

プレーンPHP（フレームワークなし）

php
// lib/fastog-signer.php
function generateSignedOgUrl(array $params, array $options = []): string
{
    $baseUrl = $options['base_url'] ?? 'https://fastog.com/api/v1/og';
    $apiKey = $options['api_key'] ?? $_ENV['FASTOG_API_KEY'];
    $hmacSecret = $options['hmac_secret'] ?? $_ENV['FASTOG_HMAC_SECRET'];

    $all = array_merge($params, ['key' => $apiKey]);

    $pairs = [];
    foreach ($all as $k => $v) {
        $values = is_array($v) ? $v : [$v];
        sort($values, SORT_STRING);
        foreach ($values as $vv) {
            $pairs[] = rawurlencode((string) $k) . '=' . rawurlencode((string) $vv);
        }
    }
    sort($pairs, SORT_STRING);
    $canonical = implode('&', $pairs);
    $signature = hash_hmac('sha256', 'GET/api/v1/og' . "\n" . $canonical, $hmacSecret);

    return $baseUrl . '?' . http_build_query(array_merge($all, ['s' => $signature]), '', '&', PHP_QUERY_RFC3986);
}
php
// index.php
require_once 'lib/fastog-signer.php';

$ogUrl = generateSignedOgUrl([
    'template' => 'blog',
    'title' => 'My Blog Post',
]);
?>
<!DOCTYPE html>
<html>
<head>
    <meta property="og:image" content="<?= htmlspecialchars($ogUrl) ?>" />
    <meta property="og:title" content="My Blog Post" />
</head>
<body>
    <h1>My Blog Post</h1>
</body>
</html>

よくある落とし穴

誤ったメッセージへの署名

❌ 誤り: hash_hmac('sha256', 'GET/api/v1/og' . $canonical, $hmacSecret) — 改行セパレーターが欠落しています。 ✅ 正しい: hash_hmac('sha256', 'GET/api/v1/og' . "\n" . $canonical, $hmacSecret) — メソッド＋パス、改行、その後に正規化クエリ。

key を署名から除外する

❌ 誤り: コンテンツパラメータのみに署名し、key を後からURLに追加する。 ✅ 正しい: key は正規化クエリを構築する前にパラメータにマージされ、最終的なURLにも含まれます。

繰り返しパラメータ（配列）

配列値を generateSignedOgUrl に渡し、http_build_query にURLの生成を任せてください。ブラケットキー（features[0]=a&features[1]=b）を出力する一方、正規化ではプレーンな繰り返しキー（features=a&features=b）に署名します。URL内で features=a&features=b を手動で構築しないでください。PHPは繰り返しキーをスカラー値（最後の値が優先）にデコードするため、サーバー側で異なる正規化が再構築され、invalid_signature で拒否されます。

401 missing_signature / invalid_signature

missing_signature（401）は、key または s がURLから欠落していることを意味します。invalid_signature（401）は正規化が一致しなかったことを意味します。署名メッセージ内の改行、両側で同じ hmac_secret、すべてのキーと値に rawurlencode（urlencode ではなく）、URL内の繰り返しパラメータにブラケットキーを使用していることを確認してください。

HMACシークレットの公開

FASTOG_HMAC_SECRET をフロントエンドのJavaScriptや公開設定ファイルに絶対に公開しないでください。

完全なAPIリファレンス

無料で試す — サインアップ不要

動的OG画像を数秒でプレビューおよびテスト。

無料のOG画像テスターを開く
LocaFile AI AI localization for games, apps, subtitles & sites SubtoVTT Convert & clean subtitle files BeCaSimulations Indie game studio

A BeCaSimulations site