メタタグ1行追加で画像リンクがhttp→httpsに!SSL化作業の効率化に一役。

SEOヒント
メタタグ1行追加で画像リンクがhttp→httpsに!SSL化作業の効率化に一役。

ご存知の通り、2018年7月24日以降、Google Chromeでアクセスすると、SSLで保護されていない全てのページにおいて「安全でない」と警告表示されるようになります。

もっとわかりやすく言いますと、ホームページアドレスが[http://*****.com/]のままだと警告表示されてしまいますので[https://*****.com/]にする必要があります。

この手続きとしてSSLサーバー証明書をとり、運用中のWebサイトをSSL化しますよね。

 

「301リダイレクト対応もして画像リンクも貼り替えた!準備万端!」

 

…と、それなのに何故かmixed content(混合コンテンツ)になりスッキリしない。

デベロッパーツールを使って調べても、ソースを調べてもどこを直せばいいのか分からない…

 

「どうして『保護された通信』の文字がでないのぉ~~!!」

こんなに時間を使って頑張っているのに…ボソ

 

という場合に朗報です。

「タタグ1行追加で画像リンクがhttp→httpsに!」の手順

メタタグにわずか1行記述するだけで、httpで画像リンクしている箇所がhttpsのリクエストとして指示されるようになります。

記述する内容はコレ↓
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

<head>セクションの<meta>に追記するだけでOKです。

※.htaccessに記述する方法もありますが、今回は簡単なメタタグ追記のご紹介です。

SSL化作業

注意点(1)

httpsでアクセスした画像リンクが生きていなければ表示されない。
今回の方法は、タグ指定でhttpのリンクを強制的にhttpsとして取扱います。httpsでアクセスしたときもきちんと画像が表示される状態でなければ、当然ながら画像がリンク切れになってしまいますので注意しましょう。

注意点(2)

「upgrade-insecure-requests」はすべてのブラウザでカバーされておりません。下記のリンクから対応ブラウザをご確認ください。

Can I use… Support tables for HTML5, CSS3, etc

上記のリンク、赤い部分は非対応という意味です。OperaやIE11あたりでは、このタグは非対応となっています。

まとめ

今回はSSL化対応作業の効率化としても役に立ちそうな「upgrade-insecure-requests」タグについてのご紹介をいたしました。

ブラウザによっては対応されないため注意ですが、この点がクリアされる場合は有効だと思います。

もちろん、WordPressではプラグインを使った一括置換などもできますが、こんな方法もあるよ~ということで、ご参考まで。

最後までお読みいただきありがとうございました。

▼「Upgrade Insecure Requests」の仕様詳細
https://www.w3.org/TR/upgrade-insecure-requests/

Sponserd Links

Midori Design Works © 2016 All Rights Reserved.

Midori Design Works ミドリデザインワークス