OGPタグ facebookシェアで画像とテキストが反映されません

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 6,824
退会済みユーザー

退会済みユーザー

前提・実現したいこと

OGPタグを設定せずに、アップロードしていたところ、
いざフェイスブックでシェアをしようとしたところ
過去にアップした情報が出てきてしまいました。
現在は上書きしており、該当の情報はhtmlにはありません。

おそらく画像のキャッシュかと予想しているのですが
デバッガーの206エラーが突破できず、OGPタグが反映していないようなので
お知恵を拝借したいです。

最終目的は、facebookシェアでOGPが正常に動くようにし
正しい画像とテキストが表示できるように修正することです。

発生している問題・エラーメッセージ

<エラーメッセージは3つです>
【1個目】Image Unavailable 画像はご利用いただけません。

Provided og:image, http://example.com/img/admin_fb.jpg 
could not be downloaded because it exceeded the maximum allowed sized of 
8Mb or your server was too slow to respond.

(翻訳)それは許可された最大は8Mバイトのサイズにしたり、
サーバーがに遅すぎるため、admin_fb.jpg をダウンロードすることができませんでした

【2個目】Could Not Follow Redirect Path パスをリダイレクト従いませんでした

Using data from http://example.com/ 
because there was an error following the redirect path.

(翻訳)http://example.com/からのデータを使用したリダイレクト・パス次のエラーがあったため。

【3個目】不正なレスポンスコード

URLがエラーHTTPステークスコードを返しました。

該当のソースコード

<htmlにはOpen Graph Protocol用の属性を指定してます。>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

<head内に設定したOGPタグ>

<meta property="fb:app_id" content="●●●●●●●●●●●●●●●" />    
<meta property="og:title" content="●●●●●●●" /> 
<meta property="og:type" content="website" /> 
<meta property="og:url" content="example.com/" /> 
<meta property="og:image" content="example.com/img/example.jpg" /> 
<meta property="og:site_name" content="●●●●●●●" /> 
<meta property="og:description" content="●●●●●●●" />

試したこと

【1個目に対して・・・】
8Mの規定には引っかかっていないと思うのですが、
他サイトで200成功がでるサンプルを拝見したので
それに習い、画像を600*600の正方形に変更。

画像サイズ557KBだったものを、176KBまで落とし、jpgで保存。
FTPでアップロード後、フェッチしてから、Sharing Debuggerで再デバッグ。
ですが、同じ8Mのエラーが出ます。

【2個目に対して・・・】
アップロードしたURLをそのままデバッガーに張り付けました。
エラーが出るので、スラッシュなしも試しましたが、結果は同じです。

【3個目に対して・・・】
206エラーでした。
部分的にできてると言われているみたいですが
何も反映されていないです。

補足情報(言語/FW/ツール等のバージョンなど)

Wordpress等CMSは使用しておりません。
本番環境です。

【10/4:補足情報】
一度、別のテスト環境で「A社の案件:にわとり」を構築しました。
その後クライアントが「A社の案件:にわとり」を別ドメインで本番環境へアップしたところ、
facebookでシェアがおかしいと連絡が来ました。

OGPに関して知識がなくこの時点で設置はしておりまでんでした。
自身でシェアをし確認すると、別の案件名「A社の案件:たか」がテキストに表示されている状態でした。

「A社の案件:にわとり」のhtmlを確認しましたが、
「A社の案件:たか」の情報は入っておらず、
過去案件「A社の案件:ひよこ」をベースにカスタマイズして作ったので、
「ひよこ」の情報がキャッシュされているならわかるのですが、
なぜ関係ない「A社の案件:たか」の情報が表示されるのかが、わかりません。

クライアントのサーバーの問題かもしれないのですが
自身持っているの共有サーバーとドメインで問題を解決できるか調査している
というのが今回の詳細になります。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m6u

    2016/10/04 13:19

    例示するときは example.com とか使おうね。

    キャンセル

  • kei344

    2016/10/04 13:31

    コメント欄を含め、例示用ドメインはご自身で所有されていない限りexample.comを利用してください。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2016/10/04 14:14

    m6u 様 kei344 様

    ご指摘ありがとうございます。
    修正いたしました。

    キャンセル

  • kei344

    2016/10/04 14:15

    コメント欄も編集可能なので、よろしくお願いします。

    キャンセル

回答 2

+3

ひとまずキャッシュクリアを試してみてはいかがでしょう?
また何かサーバに制限(BASIC認証、IP制限、海外からのアクセス制限など)はかかっていませんか?

facebookデバッガーで消せないOGPキャッシュをクリアする方法

あと206に関してこんな記事見つけました。

ブログに設置した Facebook コメント欄で、[ 警告:〜に到達できません。] というエラーが出て困る件

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/04 12:58 編集

    「たか」「にわとり」「ひよこ」は同じドメインなんですか?<サブドメインで分けてたり
    「たか」にはもともとOGPが設定されていたのですか?
    canonicalを使用してたりしますか?

    キャンセル

  • 2016/10/04 13:02 編集

    本番環境では、同じドメインに、
    それぞれディレクトリが分かれており「たか」「にわとり」「ひよこ」があります。

    例:http://www.example.com/たか
      http://www.example.com/にわとり
      http://www.example.com/ひよこ

    こちらすべてOGPは設定せず本番に上がっています。

    「canonical」はhttp://www.example.com/の中の今回気にしていなかったものに
    設定されているのを見つけました。
    仮にhttp://www.example.com/うさぎ とします。
    こちらに関しては、今回の作業で全く触れておりません。

    キャンセル

  • 2016/10/04 14:09

    m6u 様

    スーパーリロード、一次ファイルの削除、ブラウザの変更をし、
    そのままfacebookを立ち上げシェアを試みましたが、ダメでした。

    例示の件ご指摘ありがとうございます。
    修正しておきます。

    キャンセル

check解決した方法

+1

【結論】サーバー、ドメインを変えるなどやれる手は行いましたが
最終的に、facebookの仕様で「修正が効かない」と総合的に判断に至りました。
おそらく本番環境での「いいね」の取得回数の問題で、
どうしてもキャッシュが消えないという事象が発生しているようです。

皆様、ご協力ありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる