プラグイン使うのやめてプラグインレスなOGPを実装することにしました

ちょっとこの2〜3日、当ブログ内のいろんなところを、目に見えるところから目に見えないところまでガツガツいじくり倒してます。

その一環として、これまでOGPの実装を「WP-OGP Customized」にまかせていた部分を、プラグインレスな実装に変更することにしました。

Facebook Open Graph

「WP-OGP Customized」については、以前にこんな記事を書いています。

手間もかからないですし、それはまぁ相当便利なプラグインではあるのですが、うちのブログはいかんせんプラグインの数が多く、どうもそのあたりがボトルネックになっているのか、サーバーから呼び出す際の待ち時間がどうにも長いんですよね。

この辺りを解消すべく、現在なるべくプラグインレスにできるものはしていこうと、内部施策の改善も兼ねてゴリゴリゴリゴリ。

で、そんな中、やや重めの「WP-OGP Customized」を外し、プラグインレスにしてみました。

参考にさせていただいたのは以下の記事。

要は条件分岐して、それに合わせてOGPのmetaタグを吐くようにするという方法です。

ただ、どうにもこの方法だとOGPのイメージが思ったように狙ったサムネイルになってくれなかったりするので、ちょこちょこ改変したりしています。

<?php if(is_single()): ?>
<meta property="article:publisher" content="https://www.facebook.com/mbdb.jp">
<meta property="article:section" content="<?php $cat = get_the_category(); $cat = $cat[0]; echo $cat -> cat_name; ?>">
<?php
$posttags = get_the_tags();
if ($posttags) {
     foreach($posttags as $tag) {
          echo '<meta property="article:tag" content="' . $tag->name . '">';
}} ?>
<?php else: endif; ?>
<meta property="og:locale" content="ja_JP">
<meta property="fb:admins" content="your-admin">
<meta property="fb:app_id" content="your-appid">
<?php if (is_single()) {//single
if(have_posts()): while(have_posts()): the_post();
	echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">';echo "\n";
	endwhile; endif;
	echo '<meta property="og:type" content="article">';echo "\n";
	echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//Entries Title
	echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//Entries URL
} else {//index/archive
	echo '<meta property="og:type" content="website">';echo "\n";
	echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//WP Settings Description
	echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//WP Settings BlogTitle
	echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//WP Settings BlogURL
} ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php $str = $post->post_content; $searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//Search Post Image
if (is_single()) {//Single
if (has_post_thumbnail()) {//Has Post Thumbnail
	$image_id = get_post_thumbnail_id();
	$image = wp_get_attachment_image_src( $image_id, array(600,315), false, '');
	echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//Has Post Image
	echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//Don't have Thumbnail&Image
	echo '<meta property="og:image" content="http://your-domain/wp-content/uploads/default.jpg">';echo "\n";
}
} else {//index/archive
	echo '<meta property="og:image" content="http://your-domain/wp-content/uploads/default.jpg">';echo "\n";
} ?>

基本的な記述はほぼ変えずにちと整形しなおしたのと、アイキャッチ画像がうまく引っ張れなかったため、array(300,300)array(600,315)というのを加えて、300px四方のアイキャッチ画像をムリヤリ取得させるようにしました。

また、「WP-OGP Customized」では吐き出されなかった

  • article:section
  • article:tag

というのも吐くようにしました。これ足して何かあるか? と言われると、多分そんな大して意味はないと思いますが、まぁ一応。

あとはog:typeも出し分けするようにしています。

ちなみに、og:typeからblogという指定が消え去っていまして、以前その代わりにwebsiteを「WP-OGP Customized」を使って指定したことがあったんですが、そのときは思いっきりデバッガーでエラーが返されていたんですけど、今回プラグインレスに変更して、改めてwebsiteを指定してみたところ、エラーが返ることなくレスポンスコード:200という結果に。

いやー、これは思わぬ副産物的な効果。プラグイン的に変更ができなかっただけなのかもしれませんが、正直og:typeでエラーが返ってきていたのは気になっていたところだったので、解消できたのは地味に嬉しい。

あくまで自分用にちょびっと書き換えただけですが、他のWPユーザーさんでも使ってみようという奇特な方がいましたら、サラッとコピーして使ってみてくださいな。

「WordPressカスタマイズ」新着記事

ソーシャルメディアのトータルシェア数を条件にして記事をランダム表示する方法

ホシナ カズキ

チャット風の会話形式コンテンツをプラグインなしで実装する方法

ホシナ カズキ

【WordPress】パーマリンクからカテゴリーベースを取り除く方法

ホシナ カズキ

ディレクトリを切ってインストールしたWordPressをドメイン直下で表示させる方法

ホシナ カズキ

「RSS Footer」が開発終了したならfunctions.phpで同じことやればいいじゃない

ホシナ カズキ

もっと見る

モバデビはモバイルやウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく