PHPでリンク先のOGPタグを読み取りサムネイルを表示する方法
FacebookしかりTwitterしかり、最近のSNSではURLを貼るだけでサムネイルと概要が表示されたりしますよね。
今回はそれと同じような機能をPHPで実装してみよう、というお話。
OGPとは
Open Graph Protocolの略で、元はFacebookが策定した仕様のようですが、今ではほかのSNSでも普通に使われており、ぜひとも商品写真を表示してほしいショッピングサイトなどでは積極的にOGPタグを導入している傾向があるようです。
例えばこちらは楽天市場に出店しているニトリのワーキングチェアのURLですが、
https://item.rakuten.co.jp/nitori/6620531-/
このページにもこんなOGPタグが埋め込まれています。
<meta property="og:title" content="【楽天市場】ワークチェア(エルゴクエスト) ニトリ 【玄関先迄納品】 【5年保証】：ニトリ">
<meta property="og:image" content="https://shop.r10s.jp/nitori/cabinet/66205/6620531-01.jpg">それなら、このタグをPHPで読み取ってあげれば商品名とサムネイルの表示をすることも可能だよね、ということです。
ちなみに、この商品をサンプルにした意味は特にありません。強いていえば、6年前に買ったお気に入りの椅子がだいぶ傷んできていて、そろそろ新しいの欲しいなぁ～と最近思っているので目についただけですｗ
DomDocumentを使ってOGPを読み取るサンプル
PHPのソースコード
//OGPを取得したいURL
$url = 'https://item.rakuten.co.jp/nitori/6620531-/';
//Webページの読み込みと文字コード変換
$html = file_get_contents($url);
$html = mb_convert_encoding($html, 'HTML-ENTITIES', 'auto');
//DOMDocumentとDOMXpathの作成
$dom = new DOMDocument;
@$dom->loadHTML($html);
$xpath = new DOMXPath($dom);
//XPathでmetaタグのog:titleおよびog:imageを取得
$node_title = $xpath->query('//meta[@property="og:title"]/@content');
$node_image = $xpath->query('//meta[@property="og:image"]/@content');
if ($node_title->length > 0 && $node_image->length > 0) {
//タグが存在すればサムネイルとタイトルを表示してリンクする
$title = $node_title->item(0)->nodeValue;
$image = $node_image->item(0)->nodeValue;
echo '<a href="'.$url.'">';
echo '<img src="'.$image.'">';
echo $title;
echo '</a>';
}実行結果
【楽天市場】ワークチェア(エルゴクエスト) ニトリ 【玄関先迄納品】 【5年保証】：ニトリ
解説
コード中のコメントに書いたとおりですが、
- file_get_contentsで指定したURLのWebページを取得
- DOMDocumentクラスでロードする
- XPathを使ってmetaタグのpropertyがog:titleとog:imageのcontent属性を取得
- XPathでの取得に成功したらサムネイルとタイトルを表示
という流れです。
注意点としてはfile_get_contentsで読み取れないWebサイトがあるので、その場合はcurlを使う等の対処が必要です。
例えば、こんな自前のfile_get_contents_curl関数を作ると良いかも知れません。
function file_get_contents_curl($url, $timeout = 30){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, $timeout);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36');
$result = curl_exec($ch);
curl_close($ch);
return $result;
}ざっくり言うと、
- SSLのサーバー証明書に問題がある場合（期限切れてるサイトとか）
- リダイレクトヘッダーが送られてきた場合
- HTTP_USER_AGENTの指定がないと弾かれる場合
などに対応したfile_get_contentsみたいなものです。
更に詳しく知りたい場合は過去にこんな記事を投稿しているので良ければ参照してみてください。
あるいは、DOMDocumentについて更に詳しく知りたい場合はこちらの記事も併せてどうぞ。
ちまちま正規表現でHTMLタグを解析するよりもDOMDocumentとXPathを使ったほうが可読性が高くなるためオススメです。
まとめ
SNSでよくあるURLを貼るだけでサムネイルとタイトルも表示される、という仕組みを自分でも実装してみたくなったのでDOMDocumentとXPathを使って作ってみました。
自前の掲示板システムなどを作る場合に入力されたURLにリンクを貼るような仕組みを実装することがあると思いますが、ついでにOGPタグを読み取って、リンク先のサムネイルとタイトルを表示すると使い勝手がよくなりそうです。
