OGPの記述でつまずいた件。結局「xmlns」か「prefix」かどっちなのか。

8.15
2013

あるサイトのURLをFacebookのデバッガーにかけた際に「URL解析エラー:Error parsing input URL, no data was scraped.」と出てしまうトラブルがありまして。

Stackoverflowにはこんなスレッドがありました。

Facebook won’t share a link to my site
I am trying to share a link to my site on on Facebook. The page displays correctly in my browser, but when I share it via the API or front end it does not show up. When I put my URL into the Graph API debugger it gives me an error “Error Parsing URL: Error parsing input URL, no data was scraped.”

ざっとまとめると、該当のURLがブラックリストになってるか、そもそも該当のURL(ディレクトリもしくはファイル)のアクセス権限の問題か、もしくは構文エラーじゃないか、と。
ただ、いまどきW3C準拠100点のマークアップが実現できているページなんてそうそうna・・

まあ置いといて、そのサイトの読み込みが遅かったりもしたので改善しつつ、「og:url」に記載していたURLの末尾に「/(スラッシュ)」が無く、サイトにアクセスする際は「/」が補間されていたので、「/」を足したところ無事デバッガーで読み込まれました。

まあでも、なんかog:urlに関しては、いろいろ試してみたんですが別にサイトにアクセスするときは「/」付きで行けて、og:urlの記述に「/」が無いようなケースでも問題ない場合もあるんですよね。
「/」があるかどうかというより、実際のサイトのURLがどうなってるか(サーバー側なりで「/」の補間おこなってるかどうか)とも関係あるんで、よくわかりません。
困ったらURLを見直してみてはいかが?

それよりも、OGPに関して色々とググっていたところ、かなり色々な記述方法が存在しており、また厄介なことにそのどれもが正しく動作するようで、なんかもやもやします。
大きく分けると、「xmlns」を使った指定と、「prefix」を使った指定とあるみたいですね。

以前、facebookのデバッガーでエラーが出て困っていた時に、この辺の記述を変えたらうまく行ったことがあります。

そのあたりについて調べていたところ、↓こんなサイトを見つけました。

HTMLの名前空間(namespace)について掘り下げてみる | girigiribauer.com
例えば、 『こういうのを HTML に埋め込んでください』とか、 『この記述を入れておきましょう』とか、 『こ・・・

非常に勉強になりましたが、これでいくと、どうやら「xmlns」の記述はXHTMLで書かれたサイトで利用するもののよう。
じゃあOGP本家やFacebook推奨の「prefix」の記述は何なのかというと、HTML5で書かれたサイトで利用するのがいいみたいです。

実際のところこの辺の記述は実はなくても問題ないようで、metaタグさえ書かれていれば問題ないという意見もありますが、とりあえずHTML5に移行している場合は「prefix」を使い、まだXHTMLで組んでいる場合は「xmlns」を使っておけば、問題ないのかなー、と。

というわけでこのブログではシンプルにこうしました。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#" lang="ja">
<head>
<meta property="fb:app_id" content="***********"/> 
<meta property="og:site_name" content="Sunday In The Park"/>
<meta property="og:image" content="画像URL"/>
<meta property="og:description" content="説明テキスト"/>
<meta property="og:title" content="タイトル"/>
<meta property="og:url" content="URL"/>
<meta property="og:type" content="article"/>
</head>