腫瘍学レ点ノート

2020-06-02

SSLサイトでOGPの画像URLが取得できなくてハマった話

Top > 日記 > 2020年 > 06月02日 > SSLサイトでOGPの画像URLが取得できなくてハマった話

いつのまにかOGPの画像URLがSSL対応していた

Pubmedのウェブサイトデザインが変更になって、それにともなってOGP情報の画像URLがog:imageからog:image:secure_urlに変更になりました。

世の中のウェブサイトデザインはSSL化(HTTPS化)が常識になりつつあって、SSLに非対応だとChromeやiPhoneのSafariに「安全でないサイトです」と警告文を表示されちゃう世の中です。したがって、ウェブサイトをSSL対応していただくのは大いに結構なのですが、しかしOGP情報のURLを変更してしまうのはいただけません。当サイトでもPubmedに多数のリンクを貼っていますが最近はOGP画像が正しく取得できずに空白になっているページが増えていました。

当初はOGPのURLが変更になっていることにすら気づいていなかったのですが、どうやらPubmedのOGP画像のURLがog:image:secure_urlに変更になったのがOGP画像が表示されなくなった原因らしいということに気がついて、修正を試みました。自作のOGPプラグインはopengraph.phpを使用しています。

OGPを超簡単にパース可能な OpenGraph.php Open Graph protocolを超簡単にパースするスクリプトを見つけましたのでご紹介します。 その前にOGP(The Open Graph protocol)とは何ですか? 割と最近までOGPの存在すら知らなかったのですが、FacebookなんかであるURLをシェアしたり、タイムラインの中にURLを書き込んだりすると FacebookのOGP取得結果 こんな風に写真やちょっとしたテキストが表示されます。 SNSとウェブページを連携させるための情報をコンピュータが読めるように記述したもの それがOGPですね。 FacebookOGPの書き方 タイムラインなど、URLがシェアされたとき ここぞ、と言うところの画像やテキストを指定します。 ヘッダー内に書くのが基本ですね。 これはある日あるときの私のTweetpicのOGP情報です。 こんな風に、metaタグとして、ヘッダーに書いてあげまず。 ここからが本題。OGPのパース方法
http://www.kaasan.info/archives/1982

そこで、opengraph.phpでog:image:secure_urlのデータを取得できているかどうかをvar_dumpで確認してみました。Pubmedのページで試してみると、従来はog:imageで取得できていたURLはog:image:secure_urlとして取得できているようです。それならif関数で、og:image:secure_urlが存在するならそれを、存在しないならog:imageを使えば良いと思いました。しかし、ここで見事にハマってしまいました。

コロンを含むオブジェクトのプロパティ値の扱いに四苦八苦

opengraph.phpはPHPでcurlを使ってOGP情報を配列ではなくオブジェクトとして取得します。実はぼくは昨日までは配列とオブジェクトの違いもあまり良くわかっていなかったのでした。opengraph.phpの使い方のサイトを見ると$graph->url$graph->titleというプロパティの値の取得の仕方がよく出てきているので、似たようなつもりで$graph->image:secure_urlとやって見ました。しかしこの方法ではどうしてもコロン(:)のせいでPHPエラーになります。

よくわかっていないものだから$graph->image\:secure_urlとエスケープしてみたり$graph->"image:secure_url"と引用符でくくってみたりしますがどれもうまくゆきません。これはオブジェクトだから良くないのであって、配列に置き換えればコロンが含まれていてもうまくいくのではないかと考えて、$array=json_decode(json_encode($object), true);としてみたり$array=(array)$graph;とキャストしてみても、やっぱりうまくゆきません。

なんとかする方法はないかと色々ググっていると、「オブジェクトのプロパティの値を取得しようとしたがプロパティのキーにカッコが入っているためにPHPに怒られてしまった」という人のqiitaが出ていたのを見つけました。そして、ようやくこれを見て波括弧でくくればよいのだということに気づいたのです。

LaravelでDBクエリビルダを使ってレコードを取得した時に、stdClassが返って来てて、値だけ欲しいんだけどな〜と悩んでいたけど実は簡単にプロパティの値を取得出来た。 通常は、以下のようにしてプロパティの値にアクセス出来る。...
https://qiita.com/Yorinton/items/2ef447d2c699e2fcdda1

ということで、最終的には以下のようにして解決しました。

改造前

if ($graph) {
$title = $graph->title;
$url = $graph->url;
$description = $graph->description;
$src = $graph->image;
}

改造後

if ($graph) {
$title = $graph->title;
$url = $graph->url;
$description = $graph->description;
if( isset($graph->{'image:secure_url'}) ){
 	$src = $graph->{'image:secure_url'};
} else {
	$src = $graph->image;
}
}

これで、ようやくPubmedのOGP情報(特に画像のURL)が取得できるようになったのでした。下のPubmedのリンクは、そのテストです。ちゃんとPubmedのロゴ画像が表示されていますね!

Findings from the KEYNOTE-177 study indicate that pembrolizumab is superior to the current standard of care, significantly improving progression-free survival when deployed up front to treat patients with metastatic DNA mismatch repair/microsatellite instability-high colorectal cancer.
https://pubmed.ncbi.nlm.nih.gov/32482631/
記事
Pukiwikiに様々なカスタマイズを加えてきたが、一般のブログサイトに似せたデザインにはできてもOGPの実装がなかなか難しいと感じていた。このPukiwikiのほかに「はてなブログ」を使っていたので、はてなブログの「ブログカード」は魅力的だと感じていた。また、このPukiwikiのURLをTwitterなどのSNSに貼ってもらった場…

Tag: pukiwikiカスタマイズ OGP