SNSボタンの動作がおかしい！
ウェブサイトに必ずと言っていいほど追加するSNSボタン。
だけど意外とトラブルが多く、対処法を知らないと焦ってしまいます。
この記事では、トラブルの原因を探る方法とその対処法をいくつかまとめます。
case.1 - OGP画像が出ない＆新しい画像に切替わらない
まず「デバッカー」を試してみてみましょう。
デバッカーをすることで、metaタグの記述エラーや画像が表示されない原因など大抵の事がわかります。
▽分かる事
- OGP画像がサーバーにアップロードされてるか？
- metaタグの記述方法が正しいか？
- FacebookはアプリIDが間違ってないか？
デバッカーを試す
URLを入れるだけで、OGPの見え方をチェック出来ちゃいます。
デバッカーはエラーを見つけるだけではなくキャッシュを最新に更新する事もできますので、OGP画像を変更した時は必ずデバッガーで確認しキャッシュクリアする癖をつけるといいと思います。
Cache Bustingでキャッシュをコントロールする
更新したCSS・JS・画像のパスにGETパラメータ(クエリ文字列)を追加してみる。
「?」の後に任意の文字列を付与するとブラウザは異なるURLだと認識し、
ブラウザはキャッシュを読まずに、更新されたファイルを新たに読みに行きます。
https://xxxxxx.jp/poster.jpg?v=4
追加できる文字列は下記のようなものでも可です。
更新日時/現在日時 (例：src=”style.css?date=201901301000″)
バージョン (例：src=”style.css?ver=1.0.1″)
ランダムな数値 など
それでも解決しない場合
ソースコード側に何かしらのエラーは無いか疑ってみよう。
【W3C Markup Validation Service】
World Wide Web Consortium (W3C) によって作られた、HTML文書がHTMLやXHTML標準へ準拠しているかどうかを検証するためのサービス
case.2 - テストサイトでボタンが表示されない
htascessでパスワードつけたテストサイトだと、
何故かボタンが表示されたりされなかったりする事良くあります。
多分CSS側でボタンの幅と高さを指定したら表示されるはず。
case.3 - 今まで表示出来てたのにボタンが消えてしまった
記述方法が変更になってるかもしれません。
FacebookやTwitterはころころ仕様を変えるのでアップデート情報をチェックしよう。
それでも無ければSNS側のサーバーが原因で一時的に見えなくなっているだけな事も多いので少し時間を置いて待ってみよう。