『これは欲しい』毎日使える!人気アプリ10選FacebookやTwitterなどのSNSで記事がシェアされた時、リッチに表示されるOGPの設定をプラグインを使わず実装します。OGPについてよくわからない方は、予備知識として、こちらの記事に目を通してください。Facebookなどでサイトが共有された時、リッチ表示するOGPの設定また、プログラミング言語のphpの知識も必要になります。ドットインストールなどのプログラミング学習サイトで基礎知識をつけておきましょう。あとがきOGPの設定手順OGPの設定で必要となるコードやタグを、大きく2つに分けてみました。<meta>要素のproperty属性に「og:」「fb:」などの記述を使えるようにする指定です。FacebookなどのSNSにページの内容を伝えるためのタグです。この値によってシェアされた時のタイトルやURL、アイキャッチなどが変わります。静的ページなら、このサンプルコードを運営しているサイトの内容に合わせて書き換えて、記入すればOGPの設定は完了です。Sessionsの内容を踏まえて、ページによって表示を変えてみます。Sessions条件分岐してarticleとwebsiteを分けて出力する「og:image」にはサムネイル画像を指定、なければコンテンツ内から画像を探す。「og:description」にはコンテンツから80~90文字抜粋する実装手順<head>タグ内にprefixを書く関数にする<meta>タグを書く関数にする確認する注意コードを編集する前には必ずバックアップを取っておきましょう。間違いに気づかないで、WordPressの表示が真っ白になってしまってもすぐ元に戻すことができるので安心できます。Gitを覚えると楽になります。<head>タグ内にprefixを書くまずOGPの<meta>要素のproperty属性に「og:」「fb:」などの記述が使えるように、<head>内にprefixを指定します。WordPressでは、記事ページとそれ以外のページがあるので、記事ページには、オブジェクトタイプのarticleを指定して、「article:」も使えるようにしたいと思います。http://ogp.me/ns/website#">上記のコードを条件分岐して、表示すれば手っ取り早く実現できます。WordPressの場合、header.php内に<head>...</head>タグがあると思います。そこに書いてみましょう。条件分岐には、個別の記事を表示しているかどうかチェックするするis_singularが使えます。?>これで表示の切り替えができました。実際にページを開いて確認して見てください。これではheader.php内に同じようなコードが増えて見通しが悪いと思いませんか?あとで編集するにも邪魔になりそうです。prefixを関数にするWordPressのfunctions.phpにまとめて関数にしてしまった方が良さそうです。header.phpではその関数を使って表示するようにしてみましょう。functions.phpにogp_prefixという名前で関数を作ってみます。関数の行う処理は、とりあえず先ほどと同じような処理にしておきます。http://ogp.me/ns/website#">';}}}これで<head>タグを表示する関数ができたので、header.phpも関数を使って表示するように変更しましょう。?>...</head>変更したら表示が正しいか確認して見てください。header.phpもスッキリしましたね。prefix関数の最適化しかし、また問題が発生してしまいました。header.phpをみた時</head>の閉じタグはあるのにどこから始まっているかわかりません。あとで編集するとき困りそうです。改良を加えてみましょう。<head>タグはheader.phpに残します。条件分岐しているタグも同じような部分があるので、まとめて、異なる部分だけ条件分岐するようにしてみます。?>>...</head>これでheader.phpは<head>タグが分かるようになり、関数も追加や編集が効きそうになりました。prefix部分は、これで完成にしておきます。<meta>タグを書くまずは、prefixを書いた時のように表示したいコードを書きます。今回8つのpropertyを取り扱います。それぞれについてどのように値を入れるか説明していきます。content="FacebookアプリのID">prefixの時の記述を踏まえて、先に関数にしてしまいましょう。下記コードはcontentの値は変数にして表示するようにしてみました。$post;で関数内から変数$postを扱えるようにしています。?>...</head>この<meta>タグを土台にして、contentの内容を入れていきます。contentに値を入れるcontentに値をog:typeから順に入れていきます。Sessionsで実現したいことも含めてコードを書いていきます。og:typeog:typeには、記事ページにはarticleそれ以外をwebsiteを指定したいと思います。URLを指定してみます。esc_url(home_url('/'));og:titleタイトルは記事ページは記事タイトル、それ以外はサイト名を指定してみます。サイト名は後述する$site_name変数を先に書いておいてそれを使用します。$site_name;og:imageシェアされた時のアイキャッチとなる画像は、まずデフォルトの画像を用意して、記事ページでは、サムネイルがある時はサムネイルを設定して、ない場合はコンテンツの中の最初の画像を設定されるようにします。サムネイルもコンテンツ内にも画像がない場合は、デフォルトの画像を設定させます。esc_url($match[1]);}}サムネイル画像を取得するとき、引数にfullを入れているのは、デフォルトだと150×150pxを取得するからです。これでは、Facebookの最低ラインの200×200pxより小さいくなってしまいます。fullにしておけばFacebookの推奨する1200×630pxのサイズに近づけるでしょう。og:site_nameサイト名を指定します。esc_attr(get_option('blogname'));サイト名を変更することがなければ直接書いてもいいと思います。og:description記事ページでは、コンテンツの抜粋をここでは90文字で指定します。それ以外では、サイトの説明文を指定します。esc_attr(get_option('blogdescription'));}fb:app_idFacebookアプリを先に作っておいてください。作成したらapp_idを指定します。'000000000000000';article:publisherFacebookページをもっていたらFacebookページのURLをしていします。指定するとFacebookでシェアされた時Followボタンが表示されます。'">';}}}これでOGPの設定ができました。見て分かるようにかなり無駄が多いです。現段階で表示は正しくされるか確認してみましょう。<meta>タグのコードを最適化OGPの設定はできましたが、<meta>タグの共通する部分があるのでもっとコンパクトにまとめれそうです。私は、以下のようにまとめてみました。header.phpに関数を書いて表示していたのから関数を取り除いて、wp_headのアクションに追加して表示されるようにしています。'ogp_meta');もっといい方法があれば教えて下さい、お願いします。OGPコードのまとめ、最終確認ここまでのコードを全てまとめると以下のようになっています。Debuggerで確認してみましょう。下記サイトで、サイトURLを入力すると調べる事ができます。Debuggerエラーがなければ問題ありません。OGPについて詳しい説明はしませんでした。こちらの記事ではもう少し詳しく書きましたので合わせてお読みいただくと理解が深まるかもしれません。Facebookなどでサイトが共有された時、リッチ表示するOGPの設定あとがき誰か一人でも参考になる人がいてくれれば幸いです。ブログを書く時、偉そうに説明なんか書いていいものか悩むのですが、どこかのブログ論では曖昧な言い方より、見えを張って書くべきだとのことですので、もっと自信をもって頑張ります。/仕事ITマーケティングライフスタイル。