「SEOの2倍のアクセスを稼ぐFacebook活用術。皆が知らない「いいね！」ボタンと「OGP」の設定方法、超解説」を読んで、このブログにも設定してみました。
上記の記事ではlivedoor blogでの設定方法が解説されていますが、Wordpressの場合は指定するコードが違うこともあり、Wordpressのテンプレートタグを利用してコードを変えて実装してみました。
目次
metaタグのコードをこう書いてみた。
・タイトル
<meta property="og:title" content="<?php wp_title();?>" />
ページタイトルの呼び出しは、<?php wp_title();?>を指定。
このテンプレートタグは現在の記事のタイトルを表示します。
・タイプ
<meta property="og:type" content="blog" />
タイプはblogを指定。
・URL
<meta property="og:url" content="<?php the_permalink(); ?>" />
記事のURLは<?php the_permalink(); ?>を指定。
このテンプレートタグは現在の記事のパーマリンクURLを表示します。
・画像
<?php if(has_post_thumbnail()) { ?>
<meta property="og:image" content="<?php get_featured_image_url(); ?>" />
<?php } else { ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/○○○.jpg" /><?php } ?>
画像表示の指定は少し変則的にしてみました。
ブログの記事では画像がない場合も多いです。そんなときに指定した画像を表示するようにしました。Wordpressではアイキャッチ画像を指定する機能があります。こちらを利用して、アイキャッチ画像が指定されている場合はアイキャッチ画像を表示、指定がない場合は/images/に置いた画像を表示するようにしました。
僕はアイキャッチ画像がない場合はサイトロゴを表示するようにしてみました。
・サイト名
<meta property="og:site_name" content="koziii.com" />
サイト名を入力。
・アプリID
<meta property="fb:app_id" content="アプリID" />
取得したアプリIDを入力。
・説明文
<meta property="og:description" content="<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>"/>
WordPressでAll In One SEOプラグインを使ってdescriptionを記事毎に入力しているので、そこで指定したdescriptionを呼び出すタグ<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>を指定してみました。
実はもうOGPを設定するプラグインがあった！
この記事を書いている途中に調べてみたら、FacebookのOGPを設定してコードを挿入してくれるプラグイン「WP-OGP」がリリースされていました。
プラグインの新規追加で検索するか、WordPress › WP-OGPからダウンロードしてください。
プラグインをインストールしたら、アプリIDと管理者ユーザーIDを入力して設定すれば基本的にはOK。URLリンターで内容を確認してみてください。
画像はプラグインフォルダ直下にdefault.jpgが置かれていて、こちらを表示しているようだったので（アイキャッチ画像がない場合かな？）好きな画像に入れ替えればいいでしょう。
ソースコードを見るとdescriptionは全文を取得しているようだが、Facebookの投稿フィードを見ると途中で切ってくれてるので大丈夫そうですね。
今回のように新しい機能や仕様を追加するのもWordpressだったら対応プラグインが出ていることも多く非常に柔軟に簡単にスピーディに実装できていいですね。