【WordPress】Facebook ogpとTwitter Cardをプラグイン無しで実装する

WordPressCard, Facebook, ogp, Twitter, WordPress, プラグイン, 実装, 無し

スポンサーリンク

レビューログはWordPressで構築されており、PHPとWordPressの知識を身につけるため、出来るだけプラグインを使う必要のない自作テーマを作成しています。

プラグインの多い環境は、いらないコードの読み込みによるページ表示速度の低下を招き、SEO的にもよろしくありません。

meta keywordsやmeta descriptionのプラグイン(ALL in One SEO)を使わない実装方法や、meta robotsの制御を実装してきましたが、今回はFacebook ogpとTwitter Cardのプラグインを使わない実装になります。

※なぜmetaタグ周りの実装ばかり?かと言うと、自作テーマのheader.phpを作っているからです。

スポンサーリンク

WordPressでFacebook ogpとTwitter Cardをプラグイン無しで実装しよう

Facebook ogpとTwitter Cardとは?=ソーシャルでのシェア時の見た目をリッチにすること

論より証拠、見てみましょう。

Facebook ogpを使った例

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-19-23-51-42

Twitter Cardを使った例

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-12-19-23-47-58

大きな画像に、タイトルと説明文が記述されています。

それぞれ画像は記事のサムネイルから、タイトルと説明文は投稿記事より取得しているのですが、投稿記事以外のトップページや404ページ、カテゴリーページといった他の全てのページがシェアされることを考慮した実装を、以下にまとめます。

Facebook ogpとTwitter Cardは一緒に実装した方がコード量が減って楽

前置きが長いですが、下記はFacebook ogpとTwitter Cardを同時に実装する時の内容になっています。

Facebook ogpを実装せず、Twitter Cardのみの場合はコードを追加する必要があるので、ご注意ください。(普通は同時に実装するので問題ないと思いますが。)

header.php内でPHPの処理は書きたくないので、functions.phpに外出ししています。

コメント参照して頂ければと思いますが、実装で不明点やこれ違うのでは?という点があれば、コメント頂ければお返しします!

処理自体は特に複雑なことはしていません。

WordPressにデフォルトでインクルードされてる関数が、基本的に優秀なのでやりたいことは大抵実現出来るメソッドがあります。

さて、後はfunctions.phpに記述した関数を使って、実際にmetaタグを記述している部分について。(別ディレクトリに格納しました。functions.phpにmetaタグダラダラ書きたくなかったのです。。)

Facebook ogpの実装は多くのmetaタグが必要ですが、これを全て実装すればTwitter Cardの実装分のmetaタグは非常に少なくなります。

Facebook ogp公式ドキュメントTwitter Card公式ドキュメントには他にも多くのmetaタグが記載されています。(どちらも日本語ドキュメント)

動画を埋め込んだり、写真を複数表示したりと多彩な表現が出来るので、気になる方はぜひ見に行ってみては如何でしょうか。

WordPressをスクールで学んでみませんか?

スポンサーリンク