I log …

WordPressでOGPの自動出力をする方法

目次

  1. この記事の趣旨
  2. 使うもの
  3. こんな感じ
  4. php
  5. og:imageの指定
  6. まとめ

この記事の趣旨

 最近、GatsbyJSでOGP画像の動的生成にチャレンジしてみた | Learn Something Newという記事を読みました。
 さっそく真似しようと思ったのですが、既に運用してるのに追加でnode.js入れるの嫌だな(ていうかわからん)、と思い、PHPでやることにしました。

使うもの

  • 既存のWP
  • PHP
  • 画像(あれば楽に整うというだけ。なくてもいい)
  • フォント

 PHPファイルと画像、フォントは同じディレクトリにアップします。

こんな感じ


 背景色にサイト名だけ入れた画像に、タイトルテキストを載せたものです。

php

 こちらで画像の上に指定したテキストを載せます。
 一つだけ注意が必要なのが縦位置。文字のベースラインが基準となっているため、縦位置に0を指定するとテキストが画像の外に行ってしまいます。
 また、いい感じの改行などはしてくれないので、実際には改行させたりなどもう少し記述が必要です。
 少し面倒だなと思ったのが、headerでContent-Type: image/pngを送信しているため、phpファイルを見てもエラーなどが表示されなくて自分がどこで詰まっているのかわからなかった点ですかね。ローカルサーバーで総当たりして辿り着いたって感じです。
 

og:imageの指定

 画像のURLを入れるところに、先程作ったimg.phpを入れます。
 渡すテキストをパラメータとして渡せば、画像に載せるテキストが変わります。

まとめ

 画像の代わりにPHPファイルを読み込み、生成させる。

 PHPのイメージ関数を知っている方には当然の内容だったかもしれないのですが、私はイメージ関数というものがあることすら知らなかったです。できないかな~ってググったらあったよ、まじかよ…(ちょっと引く)くらいの感じでした。
 また、imgタグにphpファイルを指定できるのも初めて知りました。てことは、デフォルト画像なんかも用意してましたが、作れるってことですね。いや、デフォルトは普通に画像作った方が早いかな。

 自分の中のJamstackに挑戦するための理由をまた一つ潰してしまったな…という感じです。