20. 11月 2013 · WordPress SEO by YOAST で出力される og:image をいじってみた はコメントを受け付けていません。 · Categories: WEB制作 · Tags: , ,

wp-seo-by-yoastWordPressを使った機械的な部分のSEOについては、もうこのプラグイン使っちゃえば、あとは別にいらないんじゃないかと思っている昨今です。

むしろオススメあったら教えてください。

参考:WordPress › WordPress SEO by Yoast « WordPress Plugins

Facebook でページをシェアする時に表示される画像の話です

Facebook とかでシェアする時に、サムネイル画像が表示されるのを見たことがあるかと思います。あれは、「このURLの画像を使ってね〜」と教えてあげると、それらを参照します。(og:image として設定します)

でも Facebook は 1,500px だか 2,000px だか(どんどん大きくなってる)を推奨しているので、小さい画像だと無視されちゃって、ページ内の他の画像をサムネイルとして使ってしまいかねない場合もあります。

Facebook はちょこちょこ仕様が変わるのですが、「また変わるのー?勘弁してよー!」と思うより、「ああ、解像度のめちゃ高い画面に最適化しようとしてるのね〜。時代がそうなっていくのを見越してるのね〜」と思っていたほうが精神衛生上お勧めです。

WP SEO は OGP タグを自動的に出してくれるのですが

さて、本来ならその元画像を og:image として設定しておけば、投稿内の画像をサムネイルとして使うことができるようになります。

手作業でやるのはちょっと面倒なので、WP SEO を使うと、投稿内にある画像を og:image として自動的に設定してくれます。何も考えなくて良いので嬉しいですね!

ですが、元々の画像は大きくても、表示するために小さめの画像(中サイズとか)を設定している場合があります。これが問題。

元画像を og:image に設定できる方法はないものかな?
ってことで、プラグインの中身覗いてみました。

WP SEO でフルサイズの画像を og:image として設定する方法

本題です。

WP SEO を有効化しているという前提で、下記を functions.php にコピペして保存すればOKです。

久しぶりに PHP いじったので、変な書き方だったらご指摘ください。英語はわかればなんでもいいです。

何をやってるかというと、WP SEO では og:image を出力する時に、一旦 content を参照してイメージタグを取得しているのですね。その content で使っている画像の、元画像ではないファイル(-300×240とかついている画像)のサイズ指定部分を取っ払ってから読み込ませているわけです。

直接プラグインをいじるより、フックしたほうが安全なのでこれで実現できました。

・・・うん、まあ、動かなかったら該当ページ教えてください。改良してみます。

画像がでなかったり、シェアする時におかしかったら?

Facebook でシェアするときとかに「サムネイルがちゃんとでなーい!」「何か変!」という場合には、下記のページにURLを突っ込んで、確認すると良いですよ。ここでキャッシュさせると表示されるよーって話も見かけました。

参考:Debugger – Facebook Developers


Comments closed