ツイッターやFacebookでURLをシェアする際、OGP画像が設定されているとより目を引きやすくなります。特に、ツイッターなどでよく見かける匿名で質問を受け付けるサービスがこのOGP画像を上手に利用しています。
![](https://fukasawa-shoten.com/wp-content/uploads/2020/06/e41c1eb89aa59c765e940159734b43f6.png)
これを少し参考にして、運営している川柳投稿サイトに投稿された川柳をOGP画像として設定させるという処理を行ってみました。
Imagickを使えるようにする
まずは画像処理のためのPHP拡張モジュールであるImagickを使えるようにする必要があります。
Imagickをを有効にするためには、php.iniに「extension=imagick.so」という記述を一行追加するだけでOKです。
FTPでアップすることもできますが、さくらのレンタルサーバーでは、管理画面からphp.iniを編集することができます。
![](https://fukasawa-shoten.com/wp-content/uploads/2020/06/ae46b1f460ee46f789c27b264a6cb421-800x606.png)
![](https://fukasawa-shoten.com/wp-content/uploads/2020/06/5d5bad817a129c53ca70a4e8f1a1c715.png)
phpinfo()で状態を確認すると、imagickの情報が表示されます。
![](https://fukasawa-shoten.com/wp-content/uploads/2020/06/1627150f9c3030f6aa01834e1cf0cb0f-800x565.png)
描画スクリプト
画像を生成するプログラムに関してはこちらを参考にさせていただきました。
画像生成だけならもっとシンプルなものでもよいのですが、川柳の文字数が長った場合に適切に折り返してくれる処理に対応していたためです。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9UEhQJUUzJTgxJUE3aW1hZ2VNYWdpY2slRTQlQkQlQkYlRTMlODElQTMlRTMlODElQTYlRTMlODAlODElRTclOTQlQkIlRTUlODMlOEYlRTMlODElQUIlRTMlODMlODYlRTMlODIlQUQlRTMlODIlQjklRTMlODMlODglRTMlODIlOTIlRTYlOEMlODclRTUlQUUlOUElRTUlQjklODUlRTMlODElQTclRTYlOEElOTglRTMlODIlOEElRTglQkYlOTQlRTMlODElOTclRTMlODElQTYlRTYlOEYlOEYlRTclOTQlQkIlRTMlODElOTklRTMlODIlOEIlRTMlODIlQjUlRTMlODMlQjMlRTMlODMlOTclRTMlODMlQUImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTgxN2Q0MjUyZDRhMTI0YzA1ZGM2ZDVlZjVmZWFmZmJm&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtYXR0X2tlaXRoJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yYTg2OWY3OTAxMjVjNGVmMmU3MTI2NGVjODQ2M2ZkMw&blend-x=142&blend-y=486&blend-mode=normal&s=a2d46b6f9d0be070bbc2590d89c266eb)
そのままだとエラーが出たので微修正をしましたが、基本的なところはおおよそこのままで動作。
サイト環境に合わせて、川柳、お題、投稿者を関数に渡す改変などを施し、川柳ごとに画像を作成・保存しています。
動作状況
OGP画像自体は前から設定していましたが、どの川柳についても同じロゴ画像を表示させていました。
今回の修正により、新しく投稿された川柳ページをシェアした際に、川柳、お題、投稿者が記載されたOGP画像が表示されるようになりました。
各SNSについて
ツイッターのほか、Facebookでも同じようにOGP画像が表示されます。
LINEやはてなダイアリーでもOGP画像が適用されますが、画像サイズの都合でツイッターやFacebookほどきれいには表示されません。
また、noteでもTwitterやFacebookと同じように表示されるはずなのですが、本日現在(2020/6/26)、どういったわけかちゃんと表示されません。
note側でなにか変なキャッシュが残ってしまっているのかと推測していますが、今のところ原因不明です。
(2020.6.30)きちんと表示されることを確認しました。
なお、このブログのプラットフォームであるWordpressにおいては、こんな感じで表示されます。
![](https://marusenryu.com/img/ogp/senryu/367930.png)
コメント
[…] 運営している川柳投稿サイト「まるせん」に設定したOGP画像が、なぜかnote記事に張り付けたときに動作しなかった件について。 […]
[…] PHP拡張モジュールであるImagickを使い、文字を画像として出力させる処理については以前おこいました。 […]