Posted on by nagashy

OGPが正しく設定されていないので直した話

こんばんは、ながしーです。 冬休み中に書くつもりだったのですが、気がついたら冬休みも終わりもう12日になってました・・・。
ちなみに、OGPはOpen Graph protocolの略です。

きっかけ

気がついたのはゆゆゆが今更ながら「Twitterにシェアしたときにうまくサムネがでない」と何気なく言ったのです。 サイト運営してもう数ヶ月経つというのにバグだと思っていなかった我慢していたようです。

原因調査

Card validator

まずは、Twitter社が提供しているCard validatorを使ってみました。 ゆゆゆの発言どおりサムネイルがでませんでした。

サムネイルなしの様子

HTMLのソース確認

次に、HTMLのソースを確認してみます。 
<meta property="og:title" content="あん餅雑煮を作りました | おえかきsmile" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://oekaki-smile.com/blog/2019/01/02/5766/" />
<meta property="og:image" content="/wp-content/uploads/2019/01/zouni.png" />
<meta property="og:site_name" content="フリー素材イラストサイト｜おえかきsmile" />

一見すると、og:imageを設定していて問題ないように見えます。 しかし、og:imageは相対パスではなく絶対パスにする必要があります。

All valid URLs that utilize the http:// or https:// protocols
出典元： The Open Graph protocol

The Open Graph protocolには明確に、相対パスがNGとは書いていないのですが、プロトコルの指定まであるので絶対パスが想定されているようです。





解決方法

原因はog:imageを絶対パスでURLを指定しないことによるものだったことが分かりました。

OGPの実装確認

本サイトではAll in One SEO Pack（以下、AIOSP）を利用しています。 OGPはAIOSPに任せていました。 Google先生に聞いたところ「Wordpressを相対パスで運用している場合は、うまく動作しないことがある」と書いてあるブログを案内してくれましたが、解決方法を教えてくれませんでした・・・。 仕方なく、AIOSPのソースを読んだところopengraphに関係するフィルターを発見しました。 ずばり、 aiosp_opengraph_meta です。

フィルターの追加

テーマのfunctions.phpにコードを追加しました。 
// 相対パスで画像を入稿しているので、https://oekaki-smile.comを後付する
add_action('aiosp_opengraph_meta', function($value, $sns, $field) {
	if (strpos($field, 'thumbnail') !== FALSE && strpos($value, 'http') === FALSE && strpos($value, '/wp-content/') !== FALSE) {
		return 'https://oekaki-smile.com'.$value;
	}
	return $value;
}, 10, 3);

確認

サムネイルありの様子

無事にサムネイルが表示されました。