SSL化したはずなのに「保護されてない」表示が！できてない時の解決方法

ずっとSSL化できていると思っていた当ブログ、実はちゃんとSSL化できていないことが発覚しました！

Twitterで指摘していただきました。ありがとうございます。

そもそも勘違いしていたのは、ブログのURLがhttps～になっていればSSL化できていると安心していたからです。

みずー

URLのhttps～は、サーバー側がSSL化しているだけだったんです。
サイト内は一部SSL化できていませんでした！

一番わかりやすい確認方法は、アドレスバーに表示されるURLの先頭に鍵マークがついているかいないかです。

【SSL化できていない】

【SSL化できている】

※Google Chromeの画面です

なぜこのようなことが起きるのか
なんちゃってSSL化状態を常時SSL化にするための解決方法
http～のアクセスをすべてhttps～にする301リダイレクト設定の方法

をわかりやすく説明します。

SSL化できていない原因はサイト運営途中のSSL化

これは、サイトの運営途中でSSL化設定をした場合によく起こる現象です。

これはあるあるなので、皆さんにシェアします。

特に、運営開始後ある程度経過してから「SSL化」を行ったサイト（ブログ含む）がこの症状のほとんどです。

これからブログ運営を始める方は、SSL化は初期設定時に行っておきましょう！

後回しにすると、マジでめんどくさいですよ。#経験者は語る https://t.co/nYH89r9mgJ

— かゆうまゾンビ@WordPress大好き!!! (@kayuuma_zombie) March 18, 2019

かゆうまゾンビさん(@kayuuma_zombie)のツイートで、なるほどと思いました。

途中でSSL化すると、初期のURL(http～)がサイト内のあちこちに残ってしまうことが原因です。

たしかに私も、ブログを運営し始めてしばらく経ってからSSL化しました。
最初は「SSL化」という言葉すら知らなかったのです。

みずー

画像URLや内部リンク指定URLがhttp～のままになってしまっているため、完全なSSL化ができません！

SSL化はサイトの初期設定時に行う

これが基本です。

みずー

今回の私のようにSSL化をサイトの運営途中で行った場合は、
サーバーのSSL化後にあたらめて設定を行う必要があります。

サーバーのSSL化が終わったあとに必ずするべき設定は、5つです。

ワードプレス内のURL変更
301リダイレクト設定
画像のURL変更
Googleアナリティクスの設定
Search Consoleの設定

これら5つの設定方法は、まるちゃん(@shokoofficial1)の記事に詳しく紹介されています。

まるちゃん(@shokoofficial1)のブログ記事
=>ブログのSSL化後に必ずするべき3つの設定

目次に戻る▶▶

常時SSL化するための確認ポイント

サイトを常時SSL化するためには、サイト内の全ての画像やリンクなどのURLがhttps～になっている必要があります。

みずー

つまり、サイト内すべてのURLがhttps～になっていればOK！

正確にはSSL化はされてるけど、SSL化されていないコンテンツが混ざって完全じゃない状態（混在コンテンツ）ですね(*´-`)

この場合、画像URLがhttpのままになってることが多いですw https://t.co/2XcYsiRZcP

— アラフォー父ちゃん (@ara4ikuji) 2019年3月18日

依頼をいただいてSSL化をすることが多いのですが、投稿記事や固定ページでしたら「Search Regex」を使えば一括で書き換えできますが、
・ウィジェット
・カスタマイズ（ヘッダー画像やロゴ画像など）

古いテーマにありがちな
・テーマファイル（php・css）

あたりは忘れやすいですね(^_^;)

— アラフォー父ちゃん (@ara4ikuji) March 18, 2019

みずー

アラフォー父ちゃん(@ara4ikuji)は、IT関連が本業。
依頼を受けてサイトのSSL化も行っています。

アラフォー父ちゃんのツイートは、自分のブログをチェックする上でとっても参考になりました。

サイト内URLチェックポイント

記事内の画像URL
ヘッダーやロゴ画像URL
ウィジェット内で指定しているURL
テーマファイル(php・css)

みずー

続いて、私が実際に修正した箇所を紹介します。

画像URLがhttp～のものがある

ブログ記事や固定記事内の画像は、プラグイン「Search Regex」でURLを一括変換できます。

みずー

私はまるちゃん(@shokoofficial1)の記事を見ながら修正しました。

まるちゃんの記事(別ウインドウで開きます)
=>ブログのSSL化後に必ずするべき3つの設定

また、トップページにヘッダー画像、サイトロゴ画像などを設定している場合は、こちらも一度削除してアップし直す必要があります。

サイト内リンクURLがhttp～のものがある

みずー

ブログ開設後すぐに設定したプロフィールやお問い合わせなどへのリンクURLがhttp～のままでした！

実際に修正した箇所

プロフィールへのリンクURL
お問い合わせへのリンクURL
プライバシーポリシーへのリンクURL

みずー

私はありませんでしたが、記事内で内部リンクを貼っている場合も要チェックです。

ウィジェット内URLにhttp～のものがある

ウィジェット内に内部リンクの指定をしている場合もhttps～に変更が必要です。

みずー

プロフィールに書いた、詳しいプロフィールへ飛ばすリンクURLがhttp～のままでした。

プロフィール画像URLもhttp～だったので、修正しました。

目次に戻る▶▶

httpでもhttpsでもサイト表示されてしまう対策

サイトをSSL化した後は、http～とhttps～の両方のURLでサイトが表示される状態になっています。

この状態は、SEO的にはかなりまずい状態です。サイトが重複していると判断され、検索順位が下がってしまう原因になります。

みずー

タストテンさん(@tasu_to_ten)に指摘していただいて、初めて気づきました。

こんにちは😃

少し気になったのですが、みずーさんのブログはhttp、https両方で閲覧することができてしまっているようです

そのため、Googleから重複コンテンツとみなされる恐れがあり、検索順位に影響が出ます

そのため、.htaccessでhttpをhttpsにリダイレクト処理したほうが良いと思います☺

— タストテン@毎日更新ブロガー➕Webクリエイター (@tasu_to_ten) March 18, 2019

サイト表示をhttps～に統一するために、「301リダイレクト設定」が必要です。

みずー

やり方としては、サーバーの直下にある「.htaccess」ファイルにコードを追加記入して保存します。

「.htaccess」ファイルの編集は、FTPソフトを使って行う必要があるため、初心者にはハードルが高い作業です。

ですが、私が使っているエックスサーバーでは、ホームページのサーバーパネル内で直接「.htaccess」ファイルの編集をすることができます。

みずー

エックスサーバーでの「.htaccess」ファイルの編集を説明します。

301リダイレクト設定方法

Step1

「.htaccess編集」をクリック

エックスサーバーのサーバーパネルにある「.htaccess編集」をクリックします。
Step2

ドメインを選択

.htaccess編集するドメインを選択します。

ここで、ドメインを選択すると警告が出てきます。

みずー

警告されますが、ここで設定しないと始まりません。注意して行えば大丈夫です。
Step3

.htaccessファイルにコードを記入する

「.htaccess編集」タブを開くと、コードが記入されています。

301リダイレクトのコード記入場所は、一番上です。

みずー

このコードの一番上に、下記の301リダイレクトのコードをコピーして貼り付けます。

記入するコード

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

みずー

貼り付けたら「確認画面へ進む」をクリックします。

.htaccessの編集が完了しました。という画面が出たら終了です。