ホーム > ブログ > concrete5 > コンクリのOGP画像の設定を変更してみた

コンクリのOGP画像の設定を変更してみた

2015.11.18

銀ねこです。

どうしても前から気になっていたコンクリのOGP画像の設定を変更してみました。

OGP画像はFacebookなどでシェアしたときに表示できるキャッチーな画像

OGPはFacebookなどSNSでシェアしたときに表示される画像です。

画像サイズによってリサイズのされ方も変わります。

1.jpg

もともとデフォは用意していたのですが、前から記事ごとに違う画像が出たほうがいいなーって思ってたので重い腰を上げて、以下の通り整理してみました。

  • 特別な記事はリッチなやつを追加したいときは手動で設定
  • 記事にサムネイルがあるときはサムネイル画像を代用
  • それ以外はデフォのサムネイル画像を使用

リッチなOGPを使いたいときはページ属性を利用して手動で設定

記事によっては写真など大きくてきれいな画像を使いたいので、手動で設定できるようにします。
コンクリにはページ属性というものがあってページに画像やテキストなどの属性を設定することができます。
なのでページ属性の画像を利用します。

管理画面>ページとテーマから属性を選択。ページ属性検索でもオッケー。

属性を追加をクリックして画像/ファイルを追加します。

2.jpg

ハンドル名は任意です。ここではogpimageに。

リッチな画像にしたいのとモスキートノイズを防ぐためPNG/8bitでサイズは1200×630pxのものを準備します。

モスキートノイズ (mosquito noise) は、デジタル画像圧縮画像(特にJPEG静止画およびMPEG動画)において輪郭部分や色の変化の激しい部分で起こる画像の乱れ(ノイズ)。
蚊(英:mosquito)の大群がまとわり付いている様に見えるため、この名前で呼ばれる。画像の空間周波数の高周波数成分が失われたために起こる現象である。

Wikkipedia/モスキートノイズ

PNG32bitだと大きすぎてサーバーに負荷がかかるのでここではあえての8bit。
大き目に作ってもFacebook側で圧縮されてちょうどいい感じになるはずです。

3.jpg

これでページ設定から、ページに紐付いたOGP画像が設定できるようになりました。

4.jpg

あとは以下のようにコードを書いて属性から画像を出力できるようにします。

コンクリにはヘルパーという画像や、html、テキストを成形できる便利な機能があります。
これを利用して画像をリサイズしたり画像のパスを出力したりできます。

現在のページ情報から属性「ogpimage」情報から画像のパスを取得します。
OGP画像のパスは絶対パスで取得する必要があるのでBASE_URLでサイトのURLも付与します。

  1. $c = Page::getCurrentPage();//現在のページ情報を取得
  2. $imgHelper = Loader::Helper('image');//イメージヘルパーを使えるようにする
  3.  
  4. $ogpimage = $c->getAttribute('ogpimage');//属性ogpimageを取得
  5. $ogpimage = $imgHelper->getThumbnail($carrentogpimage, 1200, 630,false);//イメージヘルパーでファイル情報を取得
  6. $ogpimage = BASE_URL.$ogpimage->src;//パスだけ抜き取る

サムネイルブロックを取得

このサイトでは記事のサムネイルは「Thumbnail Image」という名前のエリアにおいた画像ブロックを利用してます。

ここのエリアはブロック追加の数を1個に制限してありますが、通常エリアにはブロックは複数投稿できるため「Thumbnail Image」のブロック>1個目のブロック(配列の1個目)といった感じで情報を取得します。

今回は400×400でリサイズします。

600×600でリサイズするとFacebook側で変なところで横長にリサイズされます。
このブログのサムネイルは正方形なので中途半端なところで切れてしまうので仕方なく小さくしました。

Page::getCurrentPage();で現在のページ情報の取得する必要があるのですが、属性の時に取得してるので省きます。

 

  1. $thumb = $c->getBlocks('Thumbnail Image');//エリアの情報を取得
  2. $thumb = $thumb[0]->getInstance();//ブロックの情報を取得
  3. $thumb = $thumb->getFileObject();
  4. $thumb = $imgHelper->getThumbnail($thumb, 400 , 400,false);
  5. $ogpimage = BASE_URL.$thumb->src;

デフォの画像

デフォルトの汎用OGP画像は、テーマフォルダを格納しているimagesフォルダの中にでも入れておきます。

 

まとめると…

優先順位として、

ページ属性を利用して手動設定したきれいなOGP>2サムネイル画像を代用>3何もない時はデフォルトOGP

といった感じです。

なのでまとめてコードを書くとこんな感じ。

ページによってはサムネイルの「Thumbnail Image」のエリアがないので、エリアがあるかないか判定してやる必要があります。

判定入れないと「そんなエリアない」ってエラー吐くよ。

  1. <?php
  2. $c = Page::getCurrentPage();
  3. $imgHelper = Loader::Helper('image');
  4. $ogpimage = BASE_URL.$this->getThemePath() . '/images/ogp_img.png';//$ogpimageをテーマ内にあるOGPをデフォにセット
  5. $carrentogpimage = $c->getAttribute('ogpimage');
  6.  
  7. if ($carrentogpimage) { //属性に画像があった場合
  8. $ogpimage = $imgHelper->getThumbnail($carrentogpimage, 1200, 630,false);
  9. $ogpimage = BASE_URL.$ogpimage->src;//$ogpimageを属性で設定した画像をセット
  10.  
  11. } elseif ($c->getBlocks('Thumbnail Image')) { //サムネイルエリアにブロックがあった場合
  12. $thumb = $c->getBlocks('Thumbnail Image');
  13. $thumb = $thumb[0]->getInstance();
  14. $thumb = $thumb->getFileObject();
  15. $thumb = $imgHelper->getThumbnail($thumb, 400 , 400,false);
  16. $ogpimage = BASE_URL.$thumb->src;//$ogpimageにサムネイル画像をセット
  17.  
  18. }?>
  19. <meta property="og:image" content="<?php echo $ogpimage;?>" />

古い記事だと画像が小さいんですよね。。。

なので、さらにこりたければ元画像のサイズを判定してどういったサイズでリサイズするか判定してもっと細かく設定してもいいかも。

でも今日のところはこの辺で勘弁してやります。

この記事のタグ