プラグイン使うのやめてプラグインレスな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ユーザーさんでも使ってみようという奇特な方がいましたら、サラッとコピーして使ってみてくださいな。

「Hacks」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

「Password Checkup」がChromeユーザーのセキュリティを守ってくれるかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

Facebookアプリで3D写真投稿機能をONにするには? 試してみたら本当にできた件

Avatar for ホシナ カズキ

ホシナ カズキ

Twitterアプリに搭載されたデータセーブ機能をONにする方法

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

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

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