FacebookにリンクをシェアしたときにOPGの内容が表示されない場合の対応方法

先日書いた自分のブログの記事をFacebookにシェアしようとしたら、設定したOGPがFacebookに反映されないという事態が発生しました。

FacebookでシェアしようとしてもOPG内容がプレビューされない

Facebookに何か問題があるのかもと思い、他のブログ記事を試してみたところ通常にOPGが反映されたので、どうやらこの記事そのものに問題があるようです。

【スポンサーリンク】

Open Graph Debuggerで原因を特定する

FacebookのOpen Graph DebuggerでURLを検証してみたところ、下記のようなエラーが発生してました。
Open Graph Debuggerとは、webページに設定したOGPの内容を確認するツールです。以前はURLデバッカーという名称でした。

Open Graph Debuggerで検証してみる

エラーは“Error parsing input URL, no data was scraped.”という内容でした。
「あなたのURLが確認できなかったよ!」という意味ですね。

OPGは下記のように記述してあります。

<meta property="fb:app_id" content="293235367356472">
<meta property="og:title" content="第1回ウェブライタードラフト会議に行ってきた - nezu.log">
<meta property="og:site_name" content="nezu.log">
<meta property="og:description" content="7月6日(日)の夜に阿佐ヶ谷ロフトAで行われた「第1回ウェブライタードラフト会議」に行ってきました。">
<meta property="og:type" content="article">
<meta property="og:url" content="https://blog.nzakr.com/web-writer-draft-vol1/">
<meta property="og:image" content="https://blog.nzakr.com/wp-content/uploads/2014/07/writer_event_catch.jpg">

特に記述に問題はなく、他に思い当たる原因がありませんでした。友人に聞いてみたところ、URLに “-“(ハイフン) が複数含まれているとエラーになることがあるらしいです。

今回シェアしようとしたURLは
https://blog.nzakr.com/web-writer-draft-vol1
なので、ハイフンが3つ含まれています。他の記事でハイフンが2つのものは無事表示されたので、一つ減らして以下のような感じに変更してみました。

変更前
https://blog.nzakr.com/web-writer-draft-vol1

変更後
https://blog.nzakr.com/webwriter-draft-vol1

変更後のURLを再度デバッカーにかけてみました。

Open Graph Debuggerで検証して正しく認識される

無事正しく認識されたようです。
今回はハイフンを2つに減らしたことで無事認識されましたが、FacebookはURLにハイフンを含むことを推奨していないらしいので、極力使わず「_」アンダースコア等で代用するのがいいかもです。

この記事についたタグ
この記事を書いた人
ねづ
『NEZU.log』運営管理者。Webエンジニアの傍ら、趣味でこのブログを運営。シェアハウス在住。2015年は海外情報(主にアジア圏)と効率のよい生活の情報発信がテーマ。
この記事が面白かったらいいねしよう!
記事のタイトルとURLをコピーするコピーしました!
こちらの記事もどうぞ
こちらの記事もどうぞ

コメントを残す

コメント※必須
名前※必須
メールアドレス※必須(非公開)

FacebookにリンクをシェアしたときにOPGの内容が表示されない場合の対応方法
このブログを書いている人

運営者 : ねづ

主にWebの企画、開発の仕事をしています。
海外が好きで、仕事、旅行問わずよく行きます。
フィリピン(セブ)で10週間留学後、現在はカナダ(バンクーバー)に滞在。留学、海外生活や旅行記をこのブログで書いています。

詳しいプロフィールはこちら

LINE@作成しました!お気軽にどうぞ!
友達登録は下記QRコードを読み取ってください
LINE@ QRコード

カテゴリ一覧
キーワードで記事を探す
下記から更新情報を受け取れます!