[WordPress]プラグインに頼らずOGP設定してみる

Wordpress

その他

こんにちは、中の人です。
WordpressではSEO周りの設定を勝手にやってくれる「All in One SEO」が有名ですが、サイトの表示が遅くなるというデメリットもあります。
そこで、functions.phpでSEO表示用の関数を作ってwp_head();に出力してしまおうと、筆者はそう思ったんですね。

下準備

下準備という程では無いですが、header.phpの<head>~</head>に<?php wp_head(); ?>を追記します。
ここ忘れると上手く出力できません。

functions.phpにコピペでOK

早速ですが、下記をfunctions.phpにコピペするだけで勝手にmetaタグを生成してくれます。

//headにOGPを出力
add_action('wp_head','my_meta_ogp');

function my_meta_ogp() {
	if( is_front_page() || is_home() || is_singular() ){
		global $post;
		$ogp_title = '';
		$ogp_descr = '';
		$ogp_url = '';
		$ogp_img = '';
		$insert = '';

		if (is_front_page() || is_home()) { //フロントページまたは投稿インデックスページの場合
			$ogp_title = get_bloginfo('name');
			$ogp_descr = get_bloginfo('description');
			$ogp_url = home_url();
		} elseif(is_singular()) { //投稿ページまたは固定ページの場合
			setup_postdata($post);
			$ogp_title = $post->post_title;
			$ogp_descr = mb_substr(get_the_excerpt(), 0, 100);
			$ogp_url = get_permalink();
			wp_reset_postdata();
		}

		//og:type
		$ogp_type = (is_front_page() || is_home()) ? 'website' : 'article';

		//og:image
		if (is_singular() && has_post_thumbnail()) {
			$ps_thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
			$ogp_img = $ps_thumb[0];
		} else {
			$ogp_img = '●アイキャッチが無い場合に表示されるOGP画像のパス●';
		}

		//出力するOGPタグ
		$insert .= '' . "\n";
		$insert .= '' . "\n";
		$insert .= '' . "\n";
		$insert .= '' . "\n";
		$insert .= '' . "\n";
		$insert .= '' . "\n";
		$insert .= '' . "\n";
		$insert .= '' . "\n";
		$insert .= '' . "\n";

		echo $insert;
	}
}

少し注意点

下記の2箇所は任意のものに変更してください。

デフォルトOGP画像のファイルパス

$ogp_img = '●アイキャッチが無い場合に表示されるOGP画像のパス●';

TwitterのアカウントID

$insert .= '' . "\n";

設定できたらFacebookのシェアデバッガーで確認

上手く設定できているか確認しましょう。
スクレイピングしても反映されない場合は恐らく設定に誤りがあります。

心からオススメしたいRecommend

JavaScript

ライブラリ

「Luxy.js」を使って慣性スクロールやパララックス効果を簡単に実装してみる

CSS

擬似要素

テキストリンクの下線を擬似要素を用いて表示させる方法

広告PR