WordPressのプラグインを利用せずにOGPを表示するやり方

OGPのコードを用意する

wordpressでOGPを表示させるには、プラグインを使うのが簡単ですが、細かい設定をする場合は、自分で条件分岐をしながら作成しないと出来ないこともあります。
OGPの仕様はわりと変更が多いので、自分で理解して持っておくと、変更に対して早い対応が可能かなとも思います。

といっても、自分でも理解できてない部分も多く、ネットで拾ってきた情報をカスタマイズして作成したOGPセットです。
よろしければ、ご利用ください。

twitter:cardの情報も入っているセットになります。

コードサンプル

使い方は、サンプルコードの下の記事に書いてあります。


使い方

上記のコードをコピーするだけでは利用できません。
次の準備をしてください。

OGPの利用について

カスタムフィールドを利用して、記事個別でOGP画像をアップロードできるように、設定をしておきます。
OGPをアップロードしなければ、それがない時という条件が適応されますが、シェアが生まれやすい記事の場合は、入れたくなりますので、作っておくと良いかと思います。

設定が必要な部分

■で囲っている部分を適宜変更してください。
3種類、合計5箇所あります。
  • twitterアカウント
  • ogp画像までのパス
  • FacebookのOpen Graph Tagsコード

分岐の説明

上記のコードの、気になる部分に簡単な解説を入れてみます。

サイトの情報を表示させる関数で。nameは、管理画面のサイトタイトル


ブログのURL


記事ページか、個別ページの場合


記事のタイトル|サイトの名前


もし、「OGPFileUpload」カスタムフィールドに値が入っている場合に、画像パスを表示させる


もしくは、アイキャッチがある場合はサムネイルのサイズで表示する


それ以外は、全部この画像を表示する


条件分岐おわり


ページの条件おわり


もしindexページのとき


サイトの情報を表示させる関数で。nameは、管理画面で設定された「キャッチフレーズ」


第3パラメータ seplocation を使って、タイトルの右側にセパレータ(–)を表示させます。


現在のページのURLを取得



以上が解説です。
個別の記事ページのOGPimageの設定が、やや特徴的です。
自分のブログに合うように、カスタマイズしていくと良いかと思います。