技術資料

OGP画像作成を効率化:PHPを使った自動生成方法を解説

作成日:2024.11.21

PHP

SNSシェアに欠かせないOGP画像、毎回手作業で作成するのは手間がかかりますよね。本記事では、PHPを使って記事タイトルを含むOGP画像を自動生成する方法を解説します。テンプレート画像を活用した簡単な手順をぜひお試しください。

SNSでシェアされた時などに表示されるOGP画像、ブログ記事などを投稿する時に毎回その記事用に作成するのもなかなか面倒ですね。

ということで、PHPでOGP画像を自動生成する手順を解説していこうと思います。

テンプレート画像の用意

まず前提として、自動生成するのは以下のようなタイトルのみのシンプルなものを想定しています。

ひとまず、全画像で共通のテンプレートとなる画像を用意しましょう。上記の例だと、赤い背景に右下にサイト名があるだけの画像になります。

こんな感じ。

この画像の上に、記事のタイトルを自動で出力することになります。

フォントファイルの用意

出力するテキストに使用するフォントのTTFファイルを用意します。

今回は、Google Fontsで公開されているNotoSansJPを使用します。

「Get font」から「Download All」でTTFファイルがダウンロードできます。

画像生成用のPHPコード

$articleTitle = 'PHPによるCSRF対策入門:トークン生成から認証までの流れを解説'; // 記事タイトル
$baseImage = '/path/to/image/ogp_template.png'; // ベーステンプレート画像のパス
$font = "/path/to/font/NotoSansCJKjp-Black.ttf"; // フォントファイルへのパス

// ベーステンプレートから画像を作成
$ogpImage = imagecreatefrompng($baseImage);
// テキストの色を指定 0,0,0で黒 255,255,255で白
$textColor = imagecolorallocate($ogpImage, 255, 255, 255);
// タイトルの長さに合わせてフォントサイズを指定
$titleLength = mb_strlen($articleTitle);
if($titleLength < 20){
    $fontSize = 85;
}elseif($titleLength < 25){
    $fontSize = 75;
}elseif($titleLength < 30){
    $fontSize = 70;
}elseif($titleLength < 40){
    $fontSize = 65;
}elseif($titleLength < 50){
    $fontSize = 60;
}else{
    $fontSize = 50;
}
// テキストが横幅にいっぱいになったら改行を挿入する処理
$breakPoint = 1175; // 横幅が何px以上で改行を入れるか指定
$displayText = '';
$char = preg_split('//u', $articleTitle, -1, PREG_SPLIT_NO_EMPTY);
foreach ($char as $c){
    // 一文字ずつ後ろに文字を足してみて横幅チェック
    $tmpstr = $displayText.$c;
    $boundingBox = imagettfbbox($fontSize, 0, $font, $tmpstr);
    // 指定の横幅を越えていたら改行
    if (($boundingBox[2] > $breakPoint) && ($displayText != '')) {
        $displayText .= "\n";
    }
    $displayText .= $c;
}

// タイトル出力 20,150のところは描画開始位置(x,y) テンプレートに合わせて調整
imagettftext($ogpImage, $fontSize, 0, 20, 150, $textColor, $font, $displayText);

// 画像出力
header('Content-Type: image/png');
imagepng($ogpImage);
imagedestroy($ogpImage);

フォントサイズや、改行位置、描画開始位置などはテンプレート画像によって異なると思うので、調整してみてください。

この記事を書いた人

※上が私です。

奈良市を拠点に、25年以上の経験を持つフリーランスWebエンジニア、阿部辰也です。

これまで、ECサイトのバックエンド開発や業務効率化システム、公共施設の予約システムなど、多彩なプロジェクトを手がけ、企業様や制作会社様のパートナーとして信頼を築いてまいりました。

【制作会社・企業様向けサポート】
  • 専任エンジニアのいない企業様に対するシステム面の不安を解消
  • 柔軟な契約形態や短納期での対応により、急なニーズにも迅速にサポート
  • システムの企画段階から運用まで、ワンストップでのサービスを提供

Webシステムの開発やサイト改善でお困りの際は、どうぞお気軽にご相談ください。小さな疑問から大規模プロジェクトまで、最適なご提案を心を込めてさせていただきます。

ぜひ、プロフィールWeb制作会社様向け業務案内一般企業様向け業務案内もご覧くださいね。

CodeIgniter 4 モデルの基本 ― CRUD操作とデータ操作ロジックの解説

2025.04.04

本記事では、CodeIgniter 4 のモデルの基本概念から、実際のCRUD(Create, Read, Update, Delete)操作の実装方法までを詳しく解説します。モデルを用いたデータベース操作の簡略化や、ビジネスロジックの分離手法、さらにコントローラとの連携方法など、実践的なコード例を交えながら、効率的なアプリケーション開発に必要な知識を提供します。

CodeIgniter PHP

CodeIgniter4 フォームヘルパー入門 ― HTMLフォーム生成の実践解説

2025.03.25

本記事では、CodeIgniter4 のフォームヘルパーを活用して、HTMLフォームを効率的に生成する手法を解説します。基本的な使い方から、CSRF対策や各種入力要素の生成、バリデーション連携の実践例まで、具体的なコードサンプルを交えながら分かりやすく説明しています。

CodeIgniter PHP

PHPで実装する Response API と Function Calling を活用したチャットボットの開発ガイド

2025.03.24

PHPでOpenAIのResponse APIとFunction Calling機能を活用し、チャットボットにタスク管理機能を実装する方法を解説します。モデルとの再帰的な対話処理や、独自関数によるタスク登録・照会など、具体的なコード例を通して段階的に解説します。

OpenAI API PHP

Response APIのFile Search機能をPHPで実装:ファイルから情報を取得できるチャットボットの作り方

2025.03.18

OpenAIのResponse APIに新しく追加されたFile Search機能を使って、ファイルから情報を取得できるチャットボットをPHPで実装する方法を解説します。Vector Storeの作成から、実際のコード例まで、ステップバイステップで説明していきます。

OpenAI API PHP

阿部辰也へのお仕事の依頼・お問い合わせ

軽いご相談もお気軽にどうぞ!

個人情報の取り扱いについて *必須 プライバシーポリシーをご確認いただき、同意いただける場合は「同意する」にチェックをしてください。

keyboard_double_arrow_up
TOP