Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

Apache Facebook OGP 小技集

FacebookのOGPを設定したのに、URLリンターが反映しないレアケース

投稿日:


このブログのMTに、あるいはTumblrにもOGP設定してみたわけですが、ある環境でOGPがうまく反映されないケースがあったので紹介します。
OGPのタグについては、Open Graph protocol – Facebook開発者などを参考にしながら正しいコードが出力されていることを確認しているのに、URLリンターでチェックしてみると、設定した情報が全く反映されていないという事例がありました。URLリンターに反映されないので当然「いいね!」などを押しても想定した画像がサムネイルにならないなどしばらくハマってしまいました。


で、改めて色々調べたのですが、Facebookで「いいね!」したときやURLリンターでチェックしたときは、Facebookのクローラー(スクレイパー?)が対象のURLにアクセスしてきて情報を持っていく仕組みになっています。サーバのアクセスログを閲覧できるのであればログの中に「facebookexternalhit」という文字列が入ったUser-Agentを見つけることができると思います。
→参考:外部ユーザーエージェントテキスト – ウェブマスターのためのヘルプ
OGPのタグはJavaScriptが解析してFacebookに渡すというよりも、最終的な情報はクローラーがHTTPアクセスしてきて確認しているので、どうやらこのクローラーさんがうまくソースを読んでくれていないという予測が立ちました。こういうときは文字コードとかが問題になることが多いとなんとなーく気付いてApache(Webサーバ)の設定をチェックしてみたのですが、原因となっていた設定値を見つけることができました。

AddDefaultCharset Shift_JIS

この対象サーバは複数のVirtualHostで複数のサイトを運営していたのですが、メインのサービスの文字コードが(いまどき?)Shift_JISだったため、ApacheにAddDefaultCharsetが指定されていました。
→参考:core – Apache HTTP サーバ
AddDefaultCharsetによって、Content-Type が text/plain あるいは text/html のURLへのアクセスに対して、レスポンスに自動的に文字エンコーディングの名前が入ってしまいます。普通のブラウザではHTMLのmetaタグで指定したcharsetを見ているようですが、クローラーはレスポンスヘッダーの文字エンコーディングを優先し、文字化け状態でOGPを認識出来なかったことになります。
対応としては、OGPを設定したいサイトのVIrtualHost内で、

AddDefaultCharset utf-8

という記述を足して解決しました。HTMLにmetaを記入しているのであれば、

AddDefaultCharset Off

として無効にしてしまっても問題ないように思います。

まとめ

まあ、あんまり文字コードが混在している環境というのもあまりない・・・と信じたいわけですが、まああるかもしれないので。レアケースとは思いますが、どうしてもうまくいかずに同じような状況の場合は、Apacheの設定確認してみてください。

-Apache, Facebook, OGP, 小技集

執筆者:

関連記事

picplzの全投稿サマリーを統計してバックアップできる「thx!picplz」を作りました

・picplzが7月3日で全サービス終了→一括ダウンロード方法など [C!] 先日、picplzのサービス終了を速報でお知らせしたのですが、以前作ったPHPでのダウンローダーはやはり敷居が高かったよう …

Googleドライブのフォーム機能は初期値をセットできる

とても便利なのにあまり知られていないらしいことが分かったのでエントリー。 Googleドライブのフォームは本当に便利で、アンケートやお問い合わせフォームが本当にサクッと数分でできちゃいます。以前書いた …

Public Domain classic のクラシック音源、約4200曲をPHPで遠慮なくダウンロード

パブリックドメイン・クラシック 数日出遅れていますが、日本での著作権保護期間が終了し、パブリックドメインとなったクラシック音源を約4200曲も公開しているスゴイサイトが話題になっています。MP3形式で …

【更新】ソーシャルメディアに共有するボタンの設置方法(Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ)

ソーシャルメディアの各サービスがこぞって「いいね!」などの共有ボタンをリリースしています。ブログやニュースメディアでも頻繁に目にする昨今ですが、色々なソーシャルボタンの設置方法をまとめて紹介したいと思 …

Ffmpegで複数動画を結合して一つの動画に出力

いつも、動画変換においてやりたいことがあってもコマンドを思い出せないFfmpeg。今回もこのごろ良く使うものを自分用のメモを兼ねて記録しておきます。

スポンサードリンク

スポンサードリンク