![【Adobe Firefly:初心者ガイド】スタイル「効果:流行」解説!画像サンプル付き!](https://sakuweb.liruu.com/wp-content/uploads/2024/06/firefly-style23-150x117.png)
【Adobe Firefly:初心者ガイド】スタイル「効果:流行」解説!画像サンプル付き!
メールフォームやログイン情報、決済等の情報を含む一部のページでは、
情報の安全性を保持するために、通信の暗号化【SSL化(Secure Sockets Layer)】(http から httpsに)するのが常識でした。
しかし、改ざんや漏洩等のサーバー攻撃が年々被害増大したことで、安全性に対する意識向上も加速し、主要ブラウザも対応したことで、
「一部のページ」ではなく「全てのページ」をセキュリティの対象にする【常時SSL化】が常識となりました。
セキュリティ向上はありがたいのですが、【常時SSL化】のやっかいなところが「http」にアクセスされたら「https」へ移動させる【301リダイレクト】作業と、SEO対策のための【URL正規化】です。
たまにしかやらない作業なのでいつも忘れがちなので備忘録です。
SSL(Secure Sockets Layer)は、ネット上でのデータ送受信を暗号化する技術で、
「セキュリティ対策」「データの改ざん防止」「フィッシング対策」など安全にWEBを利用するために必要な仕組みです。
また、認可局が発行するSSL証明書によって、サイトの企業・運営者の情報を証明(実在証明)することが可能になり、身元が保証されるのでユーザは安心してサイトを利用することができるようになります。
ざっくりの流れは以下のような感じです。
1)ユーザーがサイトにアクセス
2)ブラウザのリクエストに対し、サーバー側が「サーバー証明書」と「秘密鍵」をブラウザに送る
3)ブラウザが「サーバー証明書」を検証
4)問題なければブラウザが「共通鍵」を作成
5)フォームに入力された情報を暗号化してサーバーの送信
6)「秘密鍵」と「共通鍵」を使って情報を復号
裏方でこういう仕組みがあるので、私たちは安全にサイトを利用できているんです。
目に見えない「通信の暗号化」ですが、サイトが「https」でアクセスできれば、SSL化された状態です。
ただし、SSL化しただけだと検索に引っかかるのは「http」のページです。
なので、「http」にアクセスされたら自動で「https」に飛ばしてくれ~永久に!というのをサーバーに伝える必要があります。
サーバーにその指示をするのが【301リダイレクト】の役割です。
301リダイレクト方法は何パターンかありますが、「.htaccess(ドット エイチティー アクセス)」ファイルでの設定方法を紹介します。
「htaccess」ファイルの場合、
「ファイルにリダイレクトの指示コードを書いて、サーバーにアップする」という簡単な作業です。
とはいっても、たまにしかやらない作業で忘れてるし、ミスするとサイトへの影響がデカいので神経使う作業です。
さらに、実は・・・サーバーによってもリダイレクトコードの記述方法が異なります。
注意が必要なのがGMOの「iCLASTA」です。
「iCLASTA」での記述方法と、「さくらインターネット」のコードを併せて紹介します。
ご利用中のサーバーでエラーになってしまったけど原因が分かない場合、試してみてください。
その前に、筆者の経験からひとつ注意点を・・・。
「htaccess」ファイルをサーバーにアップしたら、エラーページになってしまった状況は何度も経験済みです。
先に説明したサーバーの記述方法の違いや記述ミス等で、サイトが閲覧できない状態になってしまいます。
基本的にサーバーにアップしないとミスかどうか確認できないので、ここが神経すり減りポイントです。
自分のサイトならどうでもいいですが、お客様のサイトの場合は毎回ヒヤヒヤもので、筆者も意外と苦手な作業です。
なので、いつも呪文のように唱えてます。
大丈夫!
サイトエラーでも慌てない!
「htaccess」ファイルを速攻削除で元通り!!
サーバー間のやり取り用のコードなので、速攻でファイル削除すれば、すぐに元通りのサイトが表示されます。
常時SSL化のコードです。
【さくらインターネット】と【アイクラスタ(iCLUSTA)】のコードを紹介します。
さくらで紹介するコードは「通常・ノーマル」のコード、
アイクラスタは「イレギュラー」のコードだと考えてください。
■さくらインターネット用コード
RewriteEngine on RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
■iCLASTA用コード
RewriteEngine on RewriteCond %{ENV:HTTPS} !^on$ RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
1行目のコードをみると違いが分かりますね。
大抵のサーバーは「RewriteCond %{HTTPS} off」がサポートされていますが、
アイクラスタではサポートされていません。
もし、アイクラスタを利用しているのに、さくらインターネットのような通常のコードをアップしたら、エラーになります。
逆も然り。
なので注意が必要なんです。
コードをサーバーにアップしたら必ずエラーになっていないか速攻で確認してください。
サイトが正しく表示されたことを確認したら、アドレスバーの「https」を「http」に変更して確認しましょう。
「http」でアクセスした場合「https」にリダイレクトされていれば完了です。
【404 NotFound】ページを見たことがある方もいるかと思います。
この301とか404など番号は、
「このサイトにどんな問題があるのかを示す番号」でサイト運営者が番号だけで問題点が分かるような仕組みになっています。
ステータスコードは100番台から500番台に分かれていて、例えば300番台はリダイレクション、400番台はクライアントエラーというようにカテゴリ別になっています。
調べれば情報はすぐ出てくるので覚える必要はないですが、今回の301と302を確認しておきましょう。
ステータスコード | 内容 |
---|---|
301 Moved Permanently | サイトを恒久的に移転 目的:常時SSL化・URL正規化等 |
302 Found | サイトを一時的に移転 目的:キャンペーン・ABテスト等 |
301と302リダイレクトは、「恒久的」か「一時的」かという期間の違いがあります。
301の「恒久的」とは、先に紹介したような常時SSL化の他にも、たとえばリニューアルのためにURLが変わった時やURL正規化などで利用します。
302の「一時的」は、たとえばサイトのメンテナンスのために別ページに一時的にリダイレクトする場合や、キャンペーン・ABテスト等で利用されます。
WPを利用しているサイトや、通常ページとWPを共存させているサイトは、WP用の301リダイレクトコードを設置しましょう。
通常ページとWPを共存させているサイトの場合、
通常ページ用の301リダイレクトとWP用の301リダイレクトの両方が必要です。
それぞれは別物と考えてください。
通常ページのみにリダイレクト設定をしても、WPには適用されないので注意が必要です。
WPをDLした時点でサーバーに「.htaccess」が設置されています。
ローカルにDLしておいて、301リダイレクトのコードを追記しましょう。
中身を見てみると、すでに以下のコードが記述されています。
# BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress
このコードは絶対に消さないようにしましょう。
また、不安ならバックアップ取っておいたほうが良いですね。
この上に、301リダイレクトのコードを追記していきます。
■さくらインターネット用コード
# BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule> <IfModule mod_rewrite.c> ~ 中略 ~ </IfModule> # END WordPress
■iCLASTA用コード
# BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{ENV:HTTPS} !^on$ RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule> <IfModule mod_rewrite.c> ~ 中略 ~ </IfModule> # END WordPress
これでサーバーにアップしてエラーにならなければリダイレクト成功です。
WPも301リダイレクトするようになりました。
ついでなので、ページやフォルダ、URL正規化や複数設置したい場合も備忘録として記載しておきます。
「www」の有り無しのコードです。
これ以降のコードはiCLASTAも対応してるコードです。
ちなみに有り無しはどっちでも良いですが統一した方がSEO的には良いです。
たとえば被リンクの分散を防いで効果を集中させたり、重複コンテンツを防ぐ効果があります。
対象のサイトを「www.sample-site.com」とした場合のコードです。
■wwwありに統一
<ifmodule mod_rewrite.c> RewriteEngine on RewriteCond %{ HTTP_HOST} ^sample-site.com RewriteRule ^(.*)$ www.sample-site.com /$1 [L,R=301] </ifmodule>
■wwwなしに統一
<ifmodule mod_rewrite.c> RewriteEngine on RewriteCond %{ HTTP_HOST} ^www.sample-site.com RewriteRule ^(.*)$ sample-site.com /$1 [L,R=301] </ifmodule>
コードをコピペして、「sample-site.com」の部分を変更して使ってください。
前項のWWWありなしのindex版です。
■indexありに統一
<ifmodule mod_rewrite.c> RewriteEngine On RewriteRule ^$ /index.html$1 [R=301,L] </ifmodule>
■indexなしに統一
<ifmodule mod_rewrite.c> RewriteEngine On RewriteCond %{THE_REQUEST} ^.*/index.html RewriteRule ^(.*)index.html$ https://www.sample-site.com/$1 [R=301,L] </ifmodule>
たとえば、リニューアルでページのアドレスを変更したいときや、削除するページをTOPページにリダイレクトしたい時などに使います。
「sample.site.com/old.html」を「sample.site.com/new.html」にリダイレクトしたい場合のコードです。
<ifmodule mod_rewrite.c> RewriteEngine On RewriteRule ^old.html$ /new.html [R=301,L] </ifmodule>
部分リニューアルやディレクトの階層を変えたいときなどに使います。
「sample.site.com/old/」を「sample.site.com/new/」にリダイレクトしたい場合のコードです。
<ifmodule mod_rewrite.c> RewriteEngine On RewriteRule ^old(.*)$ /new$1 [R=301,L] </ifmodule>
リダイレクト設定を複数設置したい場合もありますね。
常時SSL化に加えて、wwwやindex統一のURL正規化など複数のコードを一緒に設定することができます。
ただ、いつも「このコードなんの指示だったっけ?」となるので、
以下のようにメモ書き(コメント)を残しておくと便利です。
「htaccess」ファイル内でコメントアウトする時は、文頭に「#」を使用します。
また、行ごとに記述します。
<IfModule mod_rewrite.c> RewriteEngine on # 常時SSL化 #コメントアウトは行ごとに「#」を記述します RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] # WWWあり RewriteCond %{HTTP_HOST} ^sample.site.com RewriteRule (.*) https://www.sample.site.com/$1 [R=301,L] # indexなし RewriteCond %{THE_REQUEST} ^.*/index.html RewriteRule ^(.*)index.html$ https://www.sample.site.com/$1 [R=301,L] # ディレクト RewriteRule ^recruit/ https://www.sample.site.com/recruitment/ [R=301,L] </IfModule>
301リダイレクトは解除しない方が良いです。
前までは「1年程度置いた後は削除して良い」とGoogleからコメント出てたので、そのようにしたらまんまとドメインの評価に影響でました。
現在はほとんど解除しないので、本当に必要なくなった時だけにすると良いと思います。