タグ: OGP

Facebookタイムラインの「OGPイメージ」の採り方がちょっと変わったようだ

投稿日:

　Facebookは月々日々夜々仕様が変わる。最近何となく気づいていたのは、ブログに画像を置いて、その記事へのURLをシェアした時の「OGP(Open Graph protocol)画像」の扱いが変わったことだ。いつの間にか、ブログの画像が採用されなくなった。

　大した話ではないので「まあいいや」で放っておいたのだが、今度は「FBページ」のほうの画像の扱いが少し変わったように思う。たくさん画像を貼ったブログ記事へのURLをポストすると、「どの画像をどの順番で出すか」ということを選択させるインターフェイスが表示され、画像の順序、表示の有無等を選べるようになった。右がそれを使ってポストした記事だ。

　ブログのエントリは、Jetpackを使ってFacebookとTwitterにクロスポストしている。Facebookのクロスポスト先はFacebookページに向けることも可能だが、ページは誰も見ちゃいない(笑)ので、タイムラインに向けている。

　これまで「人に見せたい写真」などをブログ側で一元管理できていたわけだが、タイムラインに写真が載らないとなるとこれが期待できないので、うーん、どうしたものかな、と思案が要(い)るところだ。

　今確かめてみると、Jetpackによる自動クロスポストを使わず、手動でFacebookのタイムラインにブログ記事のURLを貼ると、ブログ内画像を選ぶインターフェイスが表示されることが判った。しかし、いちいち手動で記事の共有など、面倒臭くてやってられない。

　Instagramも楽しんでいるが、TwitterのタイムラインにはInstagramからのクロスポストでは写真が載らなくなった。これはつまらない。ところが、ブログからのクロスポストだと、Twitterには載る。

　この辺のところ、引き続き観測が必要だ。

JetpackのOGPイメージがブランクなのが気に入らないので

投稿日:

　ブログからFacebookやTwitterへのクロスポストをするのに、jetpackというプラグインをありがたく使わせていただいているが、エントリに画像を特に載せなかった場合、Facebookなどへ送られるイメージがブランクになるのが気に入らない。

　FacebookやTwitterは、「OGP」と言われる仕組みを使ってアイキャッチ画像を載せる。htmlヘッダのmetaタグに「property」という属性を置いて、これに「og:image……」などと記載し、content属性に画像のURLを書いておけば、それがFacebookやTwitterなどに読み取られ、使われるのである。例えば、FacebookやTwitterにリンクを張った際に「http://k.yimg.jp/images/top/sp2/event/newyear/2016/omikuji2016_logo.png」という画像を載せたければ、ヘッダに書くタグは次のとおりである。

<meta property="og:image" content=http://k.yimg.jp/images/top/sp2/event/newyear/2016/omikuji2016_logo.png" />

(ヤフーさんに迷惑がかかるので、よいこの皆さんはこういう悪ふざけをしてはいけません。)(笑)

　なので、これを適当に書いてやれば、特に画像を使用していないブログのエントリでも、適当な画像がSNSにバナーのようにポストされる。

　前に、自分のプロフィールイメージが載るようにここを書き換えてみていたのだが、毎回毎回自分のむさくるしいイメージ(コレ(笑))が載るのも鬱陶しい。さりとて、いちいちアイキャッチ画像を毎回載せるのも面倒なので、適当な画像素材を1000個くらい見えるところにアップロードし、乱数で適当なものを選ぶようにしてみた。

　プラグインファイルの編集機能を使い、「jetpack/functions.opengraph.php」というファイルを次のように書き換えるのである。

(該当箇所抜粋)

	if ( empty( $image ) ) {
		/**
		 * Filter the default Open Graph Image tag, used when no Image can be found in a post.
		 *
		 * @since 3.0.0
		 *
		 * @param string $str Default Image URL.
		 */
		//$image['src'] = apply_filters( 'jetpack_open_graph_image_default', 'https://s0.wp.com/i/blank.jpg' );
		$randimage = "https://satotoshio.net/blog/wp-content/uploads/2015/12/PHM14_" . sprintf("%04d", rand(1, 1000)) . ".jpg";
		$image['src'] = apply_filters( 'jetpack_open_graph_image_default', $randimage);
	}

　この方法を使うと、jetpackがアップデートされるたびにこの部分を書き換えなければならなくなるが、まあ、いいや、そんなに頻繁にアップデートはないし。