サイトをSSL対応にする際の注意点

サイトをSSL化(https://)しても、Google Chromeに「このサイトで目にする画像は、悪意のあるユーザーによって差し替えられたものである可能性があります」と繰り返し表示される場合(Googleの解説はこちら)は、そのページ内の画像のURLがhttp://のままで残っている可能性が高いです。ひとつでも未解決だと「信用度の低いサイト」となってしまいます。

今回、2件のサイトをSSL化しましたが、独自スタイルシート内の画像のURLの変更を忘れていて随分と時間を取られましたので、備忘録として書いておきます。深いレベルのところにまさかの生URLがありました(‘_’) 当時のデザイナーの癖と言えばそれまでですが。例えば、次のような記述です。

background-image: url(“http:// ・・・ “);

残念ながらChromeのF12でソースコードを表示して「http://」と書き忘れていたところを検索しても何も出てきません。その部分は、スタイルシート内にあるからです。さらに、そのスタイルシートが入れ子構造になっている場合は、もっと見つけにくいと言えます。独自関数を入れ子にしている場合なども注意してください。子テーマのサブフォルダの中など、独自スタイルシートの多いサイトでは、結構見落としがちなので注意しましょう。

変更する際は、RFC3986の勧告書式に従い、”//www.xxx.com/yyy…”とするのがベストです。直すのであれば、”https://…”と書かずに、以下の推奨のように書くとよいと思います。

 background-image: url(“https:// ・・・ “);
(推奨)  background-image: url(“// ・・・ “);

<12月15日修正>

すみません。上記のようにお勧めしましたが、Google Search Console(旧ウェブマスターツール)→クロール→サイトマップでエラーが続出しました。よって以下のように修正させていただきます。(https://をきちんと付けてください)

(推奨) background-image: url(“https:// ・・・ “);