【WordPress】Facebook ogpとTwitter Cardをプラグイン無しで実装する
レビューログは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を使った例
Twitter Cardを使った例
大きな画像に、タイトルと説明文が記述されています。
それぞれ画像は記事のサムネイルから、タイトルと説明文は投稿記事より取得しているのですが、投稿記事以外のトップページや404ページ、カテゴリーページといった他の全てのページがシェアされることを考慮した実装を、以下にまとめます。
Facebook ogpとTwitter Cardは一緒に実装した方がコード量が減って楽！
前置きが長いですが、下記はFacebook ogpとTwitter Cardを同時に実装する時の内容になっています。
Facebook ogpを実装せず、Twitter Cardのみの場合はコードを追加する必要があるので、ご注意ください。(普通は同時に実装するので問題ないと思いますが。)
<!-- headのprefixは呪文。何も考えずに実装しましょう --> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"> <?php facebook_ogp(); ?> <?php twitter_card(); ?> <?php wp_head(); ?> </head>
header.php内でPHPの処理は書きたくないので、functions.phpに外出ししています。
// twitter cardの呼び出し
function twitter_card() {
// 以下のディレクトリにファイルを格納しています。
get_template_part('lib/module/twitter_card');
}
// facebook ogpの呼び出し
function facebook_ogp() {
get_template_part('lib/module/facebook_ogp');
}
// facebook ogpのtype制御・表示
function facebook_ogp_type() {
// ルートドメイン以降を取得して、「/」より深いディレクトリならばog:typeを変更
if ($_SERVER['REQUEST_URI'] == "/") {
echo "website";
} else {
echo "article";
}
}
// 現在のページのurl取得・表示
function rl_url() {
if (is_home() || is_front_page()) {
$url = home_url();
} else {
$url = home_url().$_SERVER['REQUEST_URI'];
}
echo $url;
}
// タイトル取得・表示
function rl_title() {
if (is_singular()) {
$title = get_the_title();
} elseif (is_home() || is_front_page()) {
$title = get_bloginfo('name');
} elseif (is_category()) {
$title = single_cat_title()." | ".get_bloginfo('name');
} elseif (is_tag()) {
$title = single_tag_title()." | ".get_bloginfo('name');
} elseif (is_author()) {
$title = get_the_author_meta('display_name', get_query_var('author'))."の投稿記事 | ".get_bloginfo('name');
} elseif (is_404()) {
$title = "404 not Found 指定のページは見つかりませんでした。。。".get_bloginfo('name');
} elseif (is_search()) {
$title = get_search_query()." | ".get_bloginfo('name');
} else {
$title = get_bloginfo('name');
}
$ogp_title = esc_html(strip_tags($title));
echo $ogp_title;
}
// ogp用画像取得・表示
function facebook_ogp_image() {
// 現在のページのサムネイル(アイキャッチ画像)のIDを取得
$thumbnail_id = get_post_thumbnail_id();
// 取得したIDのサムネイルのURLを取得
$thumbnail = wp_get_attachment_image_src($thumbnail_id, 'full');
$default_thumbnail = "【デフォルトで表示する画像のURL】";
if (is_singular()) {
if (has_post_thumbnail()) {
echo $thumbnail;
}
} else {
echo $default_thumbnail;
}
}
コメント参照して頂ければと思いますが、実装で不明点やこれ違うのでは？という点があれば、コメント頂ければお返しします！
処理自体は特に複雑なことはしていません。
WordPressにデフォルトでインクルードされてる関数が、基本的に優秀なのでやりたいことは大抵実現出来るメソッドがあります。
さて、後はfunctions.phpに記述した関数を使って、実際にmetaタグを記述している部分について。(別ディレクトリに格納しました。functions.phpにmetaタグダラダラ書きたくなかったのです。。)
<!--Facebook ogp設定-->
<meta property="og:type" content="<?php facebook_ogp_type(); ?>" />
<meta property="og:locale" content="ja_JP">
<meta property="fb:app_id" content="【あなたのFacebook App ID】" >
<meta property="og:url" content="<?php rl_url(); ?>" />
<meta property="og:title" content="<?php rl_title(); ?>" />
<meta property="og:description" content="<?php rl_description(); ?>" />
<meta property="og:image" content="<?php facebook_ogp_image(); ?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"
<!--Twitter Card--> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@あなたのtwitterアカウント名">
Facebook ogpの実装は多くのmetaタグが必要ですが、これを全て実装すればTwitter Cardの実装分のmetaタグは非常に少なくなります。
Facebook ogp公式ドキュメント、About Twitter Cards — Twitter Developersには他にも多くのmetaタグが記載されています。(前者は日本語、後者は英語ドキュメント)
動画を埋め込んだり、写真を複数表示したりと多彩な表現が出来るので、気になる方はぜひ見に行ってみては如何でしょうか。
