※PHPを動作するレンタルサーバーが別途必要です。
自前でやらないのなら、BloggerSpice
<meta property='og:image' expr:content='"http://bloggerspice.appspot.com/postimage/" + data:blog.url'/>
上記のようにテンプレートに埋め込めばOKです。
http://bloggerspice.appspot.com/postimage/[記事のURL] のように指定すると記事URLの画像をリダイレクト？してくれるようです。
http://bloggerspice.appspot.com/
仕様とかは上記に書かれています。
やっぱり自前でやりたいな
<meta property='og:image' expr:content='"http://tool.example.com/test/ogp_img_url.php?url=" + data:blog.url'/>
http://tool.example.com/test/というところに、「ogp_img_url.php」という名前で以下のPHPスクリプトを置いてあるという前提で上記のようになります。
http://tool.example.com/test/ogp_img_url.php?url=[記事のURL] と指定すると、指定したURLの記事の内容の最初のpicasaかflickr画像を探し出して、そこにリダイレクトするという動作をします。
<?php
//-------------
$first_img = "https://3.bp.blogspot.com/-47AYv50cSZg/TschruSBxDI/AAAAAAAAA_M/i3TcO8EiZIM/Blogger_icon.png"; //画像が存在しないときの代替え画像
//-------------
$url = $_GET['url'];
$content = file_get_contents($url);
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*?>/i', $content, $matches);
foreach( $matches [1] as $value ){
if( preg_match("/(.blogspot\.com)|(.blogger\.com)|(.flickr\.com)/", $value) ){ $first_img = $value;
//print($first_img );
break;
}
}
header("HTTP/1.1 301 Moved Permanently");
header("Location: ".$first_img);
?>
補足
・RSSでなくて、直接記事のHTMLを読みに行ってます。・記事外でpicasaやflickr画像が使われてると、そちらが採用される危険性はある
・一番上の$first_imgのところを書き換えると、画像がないときの代替画像を変更できます。
・preg_matchのところに、保存している画像のURLのドメイン部分を書けば、picasaやflickr以外でも対応できます。|(.example\.com)のような感じで後ろに追加するとよいでしょう。
・動作確認はブラウザ上で直接URLを入力して、リダイレクトすれば動作しています。
適当に改造してください(^^;
■ 改造ポイント
if(strcmp($value,"除外したい画像のURL) ==0){
continue;
}
２つあるのなら、その下に同じものを書けばよい
ちゃんと動作しているか確認したい
facebook デバッガーhttps://developers.facebook.com/tools/debug
ここでOGPを確認したい記事URLを入れれば、どういう情報が取得できているかを確認できます。
スポンサーリンク
コメント一覧
名前:smart_icoca :
初めまして。
この様なスクリプトの公開ありがとうございます。
自前でやるためのスクリプトを少し私なりに改良しました。
主に3行目の代替画像と13行目のところの最初のURLを自分のドメインにしただけです。
これで、まず最初にちゃんと動作するか確認を行いました。
http://www.sir-2.net/dablg/ogp_img_url.php?url=http://www.sir-2.net/dablg/index.php?e=7837
すると、ちゃんとリダイレクトされて画像が出てきました。
しかし、シェアデバッガーでやると、以下のメッセージが表示されてしまいます。
【推測されるプロパティ
値が他のタグから推測される場合でも、og:imageプロパティは明示的に指定してください。】
コードは206です。
プレビューでは、画像をちゃんと拾っているのですが、何故かFacebookやTwitterには画像が出てきません。
ブログは既に閉鎖された「ぶろぐんPlus」です。
これは、仕様の違いでしょうか？
2022/01/29 11:45
名前:管理人 :
<meta property="og:image" content=" サムネイル画像の URL" />
conten=""を指定してないのでは？
<meta property='og:image' expr:content='"http://tool.example.com/test/ogp_img_url.php?url=" + data:blog.url'//>
もし記事通り「expr:content」と書いてたら、認識しないと思う。
これ、Bloggerのテンプレート用の書き方で、実際のHTMLとは違うので・・。
■
<html>
<head>
<meta property="og:type" content="article" />
<meta property="og:title" content="テスト">
<meta property="og:image" content="http://www.sir-2.net/dablg/ogp_img_url.php?url=http://www.sir-2.net/dablg/index.php?e=7837" />
</head>
<body>
テスト
</body>
</html>
上記のようなHTMLファイルをtest.htmlとして作成して、
http://blog.example.com/test.html
として配置して、
シェアデバッガーで確認すると
画像が小さすぎます
指定されたog:image URL「http://www.sir-2.net/dablg/ogp_img_url.php?url=http://www.sir-2.net/dablg/index.php?e=7837」は最小サイズ制限(200 x 200ピクセル)を満たしていないため無効となりました。
となるので、認識はしてると思う
2022/01/29 12:51
名前:smart_icoca :
早々のコメントありがとうございます。
どうも、「ぶろぐんPlus」の仕様っぽい気がしてきました。
テンプレートでメタタグを次のように作成しています。
こうすると、記事は表示できなくなり、ソースを見るとこんな感じで出てきます。
<meta property="og:image" expr:content='"http://www.sir-2.net/dablg/ogp_img_url.php?url=http://www.sir-2.net/dablg/index.php?e=7841<!--
-->"' />
どうも、「expr:content」を実行していないように見えてきました。こうなると、貴殿のツールが原因ではない気がしてきました。
ありがとうございました。
2022/01/29 17:12
名前:管理人 :
「expr:content」と書いているところを「content」と、書かないと、動作しない
「expr:」をつけるのは、Bloggerだけの作法
2022/01/29 18:32