静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > 常時SSLが必須に! 7月リリースのGoogle Chrome 68からhttps未対応では 「保護されていません」と警告表示が開始!

ホームページ制作 SEO対策 常時SSLが必須に! 7月リリースのGoogle Chrome 68からhttps未対応では 「保護されていません」と警告表示が開始!

  • このエントリーをはてなブックマークに追加

皆さんこんにちは。デザイン部部長の坂本です。

2018年7月24日に「Google Chrome」がのバージョン68にアップデートされました。
https未対応のサイトではアドレスバーに 「保護されていません」と警告表示されるようになりました。

今まではお問い合わせなどの入力フォームのページでSSL化していれば問題なかったのですが、
今後はすべてのページがSSL化の対象になります。

SSL(Secure Sockets Layer)は、インターネット上でデータのやりとりを暗号化することで
悪意のあるハッカーからの攻撃や、個人情報の漏洩を防ぎます。
ユーザに安全で安心にご利用いただくためにも常時SSL化は必須と言えるでしょう。

また、日本におけるGoogle Chromeの国内のシェアは51%もあり影響は大きいと言えます。

■ 国内のブラウザのシェア(2018年6月)
http://gs.statcounter.com/browser-market-share/desktop/japan/#monthly-201807-201807-bar

Google Chrome67までの表示

今まで(Google Chromeのバージョン67)

https対応なら「保護された通信」となり緑色になります。https未対応だとグレーで警告のアイコンが表示されるだけでした。
図:Google ChromeのアドレスバーにおけるHTTPSとHTTPの表示の違い

これから(Google Chromeのバージョン68)

https未対応だと「保護されていません」と警告が文字で表示されるようになります。
図:Google Chromeのバージョン68の表示例

常時SSL対応の手順

今回は専用サーバ(VPS)をご契約し、独自SSLを設置した場合でご説明します。

【1】SSL証明書の発行
【2】htaccessでhttp→httpsにリダイレクト設定
【3】Wordpressの設定の変更
【4】外部サービスの読み込みファイルやJavascriptのパスを変更する

【1】SSL証明書の発行

SSLの証明書の発行はサーバ会社によって取得方法が違うため、
ご契約しているサーバ会社のWebサイトや問い合わせをして確認してください。

【2】htaccessでhttp→httpsにリダイレクト設定

ルート直下に以下の記述を追加してください。
プランによってはhtaccessが設置できないサーバもありますので、
ご契約のサーバ会社に問い合わせて確認してください。

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

【3】Wordpressの設定の変更

WordPressなどのCMSをお使いの場合は「Wordpressアドレス」や「サイトアドレス」の設定をhttp→httpsに変更してください。
図:Wrodpressのパス

【4】外部サービスの読み込みファイルやJavascriptのパスを変更する

httpから始まるURLで読み込んでいる場合、httpsに変更してください。
外部サービス自身がSSL化対応されていなければ保護されませんのでご注意ください。
図:埋め込みパスの確認

Google Chromeの今後の流れ

Google Chromeのバージョン70が2018年10月頃に予定されています。
三角形の警告アイコンと赤文字で「保護されていない通信」と表示されるようになると言われています。
ユーザーに対しての安心感・信頼感をしっかり担保するためにも
早めの対応をしていきたいですね。

まとめ

ご契約しているサーバ会社によってSSLの証明書の導入方法は
違いますのでSSLの証明書をこれからの導入する場合は、
契約しているサーバ会社やホームページを制作した会社に一度問い合わせてみてください。

シーエムエーでは常時SSL化導入のサポートも行っています。
ご相談も承りますのでぜひお問い合わせください。

  • このエントリーをはてなブックマークに追加

人気の記事ランキング

  • posted on 2023/02/082023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2023/12/07迫る、浜松市の行政区再編(中央区、浜名区)。住所変更だけじゃない。Webサイトで必要な対応とは?

  • posted on 2020/06/10ノンデザイナーのためのデザイン基本ルール ~文字編 文字詰め~

  • posted on 2022/10/21DockerでPHP環境を簡単に構築してみよう

  • posted on 2024/02/22「文字コード」って何?Webディレクターなら知っておきたいUnicode(ユニコード)のこと!

おすすめタグ

ECサイト 動画 HTML レクリエーション 創業記念日 ASP SSL PageSpeed Insights スピードアップデート 動画広告 ECcube wordpress 構造化マークアップ カスタマイズ Transport Layer Security 保護されていない通信 HowTo Chrome TLS クリック率 ハウツー ノンデザイナー リッチリザルト Instagram広告 文字 デザイン フォント Core Web Vitals 自作PC 初心者 構造化データ Facebook広告 リモート iPhone CSS 動画制作 AMP 広告 HTML5広告 Google Chrome videoタグ GoogleMapsPlatform Zapier Facebook Audience Network Google my map ワイヤーフレーム Google for jobs Googleしごと検索 撮影 iPad 一眼レフカメラ 写真 自作パソコン ウェブサイト翻訳 Adobe XD PC組み立て XMLサイトマップ PHP タスクランナー gulp.js node.js WebP画像 楽天GOLD スマートフォン用新店舗トップページ Threads(スレッズ) Instagram Adobe Firefly 画像生成AI アセット生成 生成塗りつぶし Adobe MAX Japan 2023 UI UX Adobe Stock アンチックフォント Adobe Express Webマーケティング デジタルマーケティング 文字コード 符号化文字集合 生成拡張 Google Search Console レクタングルバナー 画質パラメーター shopify ショッピングサイト ショッピファイ Shopify使い方 WebP リモートワーク remotework プラグイン IE コーディング サイズパラメーター モダンブラウザ gridレイアウト object-fit aspect-ratio any-hover docker Photoshop クラウドドキュメント ディスプレイ広告 スマートオブジェクト gap Unicode(ユニコード)

Top