Stinger5でOGPを利用してサムネイルを素敵に表示させよう[導入編]

Tips

ブログを書いているとシェアされるとすごくうれしいものです。そのとき、サムネイルが広告だったり、自分の思い通りの表示じゃなかったら残念な気持ちになりますよね。ちゃんとサムネイルを表示させることができれば……！

ニュースサイトなどのWebページでタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示されるのは、「OGP」が設定されているからなんです。

OGP(Open Graph protocol)とは

Facebook・TwitterのOGP設定方法まとめ

この記事は2016年12月2日に更新しました。 Web担当者の皆様、運営しているホームページやWebサイトのOGP設定は行っていますか？ OGPとは「Open Graph …

OGPとは「Open Graph protocol」の略称です。FacebookやTwitter、Google+、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。

WebページにOGPを設定するには、以下の2つの記述が必要となります。

  1. <head>要素にprefix属性への記述を行う
  2. <meta>要素でプロパティを設定する

1.でOGPを使う宣言し、2.でどのように表示させるのか指定しています。こうやって一覧に見ると、たくさんありますね。

<meta>要素で設定するプロパティ

og:type – ページのタイプ（website, articleなど）
og:url – ページのURL
og:title – ページのタイトル（記事タイトルなど指定する）
og:image – 画像の絶対パス（シェアされた時のアイキャッチ画像になる）
og:site_name – サイトの名前
og:description – 説明文（記事の抜粋など指定する）
etc……

カスタマイズしているときに私が使用しているテーマ「Stinger5」では導入されていないことがわかり、FacebookとTwitterでシェアされたとき、サムネイルが表示されるように設定することにしました。

OGPを導入してみよう

目標

私のブログでは、記事ページとそれ以外のページ2つに分けられます。要素で設定するプロパティで設定したいです。

記事ページ

	<meta property="og:type" content="article">
	<meta property="og:url" content="記事ページのURL">
	<meta property="og:title" content="記事タイトル">
	<meta property="og:image" content="アイキャッチ画像、なければ画像URL(ブログアイコン)">
	<meta property="og:site_name" content="サイト名">
	<meta property="og:description" content="記事の抜粋">

それ以外のページ

	<meta property="og:type" content="website">
	<meta property="og:url" content="サイトURL">
	<meta property="og:title" content="サイト名">
	<meta property="og:image" content="画像URL(ブログアイコン)">
	<meta property="og:site_name" content="サイト名">
	<meta property="og:description" content="サイトの説明">

作業をする前にバックアップ

今回修正するソースファイルは以下のとおり。
特にfunction.phpは記述を間違えるとWordPressが動かなくなってしまうので、バックアップは必ず取っておきましょう！（私も、セミコロンの付け忘れで管理画面が表示されなくなってアセッタ経験があります……。）

  • function.php
  • header.php

function.phpに追記する

下のコードを追記します。 ogp_meta()関数の画像のURLは自分のサイトに合わせて変更してください。

//OGPの追加
//head要素の設定
function ogp_prefix() {
	//管理パネルでなければOGPを付ける
	if (!is_admin()) {
		$ogp_ns = 'og: http://ogp.me/ns#';
		$fb_ns  = 'fb: http://ogp.me/ns/fb#';
		if (!is_singular()) {
			$type_ns = 'website: http://ogp.me/ns/website#';
		} else {
			$type_ns = 'article: http://ogp.me/ns/article#';
		}
		printf('prefix="%1$s %2$s %3$s"', $ogp_ns, $fb_ns, $type_ns);
	}
}
//meta要素の設定
function ogp_meta() {
	//管理パネルでなければOGPを付ける
	if (!is_admin()) {
		global $post;
		$format = '<meta property="%1$s" content="%2$s">';
		$type = 'website';
		$url = esc_url(home_url('/'));
		$site_name = esc_attr(get_option('blogname'));
		$title = $site_name;
		$image ='画像のURL';
		$description = esc_attr(get_option('blogdescription'));
		//記事ページの場合
		if (is_singular()) {
			$type = 'article';
			$url = esc_url(get_permalink($post->ID));
			$title = esc_attr($post->post_title);
			$description  = strip_tags($post->post_excerpt ? $post->post_excerpt : $post->post_content);
			$description  = mb_substr($description, 0, 90) . '...';
			//サムネイルがあるかチェック
			if (function_exists('has_post_thumbnail') AND has_post_thumbnail($post->ID)) {
				$attachment = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
				$image = esc_url($attachment[0]);
			} elseif (preg_match('/<img\s[^>]*src=["\']?([^>"\']+)/i', $post->post_content, $match)) {
				$image = esc_url($match[1]);
			}
		}
		$args = array(
			'og:type'  => $type,
			'og:url'   => $url,
			'og:title' => $title,
			'og:image' => $image,
			'og:site_name' => $site_name,
			'og:description' => $description
		);
		foreach ($args as $key => $value) {
			printf($format, $key, $value);
		}
	}
}
add_action('wp_head', 'ogp_meta');

header.phpを修正する

header.phpを修正します。コメントにも書きましたが、wp_head();を呼び出している箇所があれば、そこの1行は追加しなくてよいです。

<head <?php ogp_prefix(); ?>>
...
<?php wp_head(); ?>//すでに記述がある場合は追加しなくてよい。
...
</head>

これでOGPが使用できるようになりました！一度、Embedlyなどで表示されるか動作確認をしてみてください。

まとめ

今回はここまで！次回はFacebook用に設定する方法、Twitterカード用に設定する方法をまとめていきたいと思います。