気まま赴くままに。デザインからプログラミングまでをたまにまとめてます。

Wordpress・ブログ

[meta,js,htaccess]リダイレクト設定[httpからhttpsも]

カバー・アイキャッチ画像5

SSLの設定を終えた直後はhttpとhttps二つのURLが存在します。

又、www付きのアドレスも存在しています。

この状況はSEO的にはよろしくないです。

というのも、Googleさんがどれを評価していいか迷い評価が分散するからです。

そこでリダイレクト(URlを飛ばす)設定をします。

今回は3つの方法を紹介していきます。

尚、metaタグでの設定はhttpからhttpsへのリダイレクトに対応していません

 

htaccessでのリダイレクトでは、

  • httpsアクセス以外
  • httpsアクセスだがwww付き

の2通りの場合にリダイレクトをする文を紹介しています。

 

SSL設定まで終わっていない方はコチラ

リダイレクトの他にやっておきたいことはコチラ

スポンサーリンク



目次

3種のリダイレクト方法

兎にも角にも3つの方法を見ていきます。

結論ほぼ1択ですが。

HTMLのメタタグで設定する

こちらはhttpからhttpsへのリダイレクトには対応していません

特定のサイトから飛ばす際に使用してください。

HTMLのheadタグ内、メタタグに記述していきます。

この方法はこれまたSEOの観点からするとよろしくないです。

Googleが推奨していません。

0秒後に飛ばしてー。と設定すると301リダイレクトになるそうですが、

元のSEO効果が引き継がれなかったりするみたいです。

javascript書いて設定する

headタグ内に記述するか、別途jsファイルを作る形です。

閲覧する側のjavascriptが有効になってないとダメです。

.htaccessファイルが使えない場合の手段にしましょう。

.htaccessファイルを作って設定する

ルートディレクトリに.htaccessというファイルを作って中身書けばOKです。

一番安全な方法かと思います

metaタグでリダイレクト

 

こちらはhttpからhttpsへのリダイレクトには対応していません

特定のサイトから飛ばす際に使用してください。

 

HTMLファイルheadタグ内に以下を記述。

<meta http-equiv="refresh" content="0;URL=元URL">

javascriptでリダイレクト

HTML内headタグ若しくはjsファイルを別途作成して以下を記述しましょう。

jsファイルを作る場合はHTMLファイルの方からちゃんと読み込んであげないとダメですよ!

<script type=”text/javascript”>
if ( isMobileDevice()) {
  var redirect_url = "http://元URL" + location.search;
  if (document.referrer) {
    var referrer = "referrer=" + encodeURIComponent(document.referrer);
    redirect_url = "https://飛ばす先" + (location.search ? '&' : '?') + referrer;
  }
  location.href = "https://飛ばす先";
}
</script>

.htaccessでリダイレクト

ルートディレクトリ(又は公開フォルダ等)に.htaccessという名前の新規ファイルを作って、以下を記述しておきましょう。

開発者向けの部分なので分からない部分多いと思いますが、最終的にはコード内の「元URL」などと書かれている部分を任意のものに変えるだけで済む様にしてます。

WordPressの場合はサーバーのFTP等を使用してください。
日本語の部分は書き換えてください。

ミスがあるとサーバーが停止したりするので注意。

以下の様な記述がある場合は削除しないようにしましょう。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

まずWordpressインストール初期状態で設置してあるであろう上記文について解説していきます。

<IfModule mod_rewrite.c>
# mod_rewrite(Apacheのモジュール)が利用できる場合以下を適用
RewriteEngine On
# mod_rewriteを有効にします
RewriteBase /
# 適用ディレクトリを指定してます

RewriteRule ^index\.php$ - [L]
# 指定ディレクトリ直下のindex.phpにアクセスされた場合はリクエスト停止
# 無限ループ防止
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# リクエストされたファイルとディレクトリが無い場合
RewriteRule . /index.php [L]
# 指定ディレクトリの一つ上層にあるindex.phpへ飛ばす
</IfModule>

各行末に[OR]が無い場合は[AND]が適用されます。

[L] last。そこで終了。ループ抜けるやつ
\ エスケープ
^ 文字の頭

httpsへ飛ばすリダイレクト文

内容としては

  • httpsアクセス以外
  • httpsアクセスだがwww付き

この2通りの場合にhttpsアドレスへ飛ばすシンプルな文です。

<FilesMatch "^(wp-config\.php|wp-cron\.php)">
order allow,deny
deny from all
</FilesMatch>
# wp-configとwp-cronの保護

Options -Indexes
# ディレクトリ表示禁止

RewriteEngine on
# mod_rewriteを有効にします
RewriteCond %{HTTPS} off
# httpsアクセスでない場合
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# https付きのURLに飛ばす

# BEGIN WordPress
<IfModule mod_rewrite.c>
# mod_rewriteが利用できる場合以下を適用
RewriteEngine On
# mod_rewriteを有効にします
RewriteBase /
# 適用ディレクトリを指定してます

RewriteRule ^index\.php$ - [L]
# 指定ディレクトリ直下のindex.phpにアクセスされた場合はリクエスト停止
# 無限ループ防止
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# リクエストされたファイルとディレクトリが無い場合
RewriteRule . /index.php [L]
# 指定ディレクトリの一つ上層にあるindex.phpへ飛ばす

RewriteCond %{HTTPS} off
# httpsアクセスでない場合
RewriteRule ^(.*$) https://飛ばす先/$1 [R=301,L]
 
RewriteCond %{HTTPS} on
RewriteCond %{HTTP_HOST} ^www.元URL$
# httpsだがwww付きの場合
RewriteRule ^(.*)$ https://飛ばす先/$1 [R=301,L]
</IfModule>

# END WordPress

まとめ

今回参考にしたサイトは以下。

https://qiita.com/1987yama3/items/5ff58b6195fe6c3f268b

https://proengineer.internous.co.jp/content/columnfeature/5890#13

https://shared-blog.kddi-web.com/webinfo/242/

https://weblabo.oscasierra.net/apache-rewritecond-base/

WordPressのセキュリティを高める.htaccessの設定

 

-Wordpress・ブログ
-, ,

関連記事

カバー・アイキャッチ画像2.2

[WordPress]ブログ開設前の前提知識(構想編)

ブログ作成目的やターゲットの選定などをまとめていきます。 当ブログの作成目的は「独学してる人の役に少しでも立ちたい」です。 「独学の仕方がわからないので調べる」↓「情報が多すぎて結局何をすればいいのか …

[WordPress]モーダルウインドウ[スニペット][DLするだけ]

今回はWPのエディタである「Gutenberg」での画像挿入に対応したモーダルウィンドウを作ってみました。 他にも方法はあると思いますが、外部ファイルの読み込ませ方がアナログちっくです。 スニペット: …

[WordPress]テーマをカスタマイズする方法

WordPressをインストールして、テーマいれて、カスタマイズ! 今回はカスタマイズ方法について書いていきます。 詳細は別途記事で、ここに順次リンクを張っていく予定です。 WordPressのインス …

カバー・アイキャッチ画像3

[WordPress]ブログ開設直後にやりたいこと[2019]

ドメイン・サーバー契約を終え、ブログを開設! 見た目を変えたり、記事の投稿を効率よく行いたいものです。 外観となるテーマ 便利な機能「プラグイン」 URLを見やすく!パーマリンク。 ユーザID一応隠そ …

カバー・アイキャッチ画像2.1

[WordPress]ブログ開設前の前提知識(用語等編)

サーバーやドメイン、WordPressについてまとめています。 [WordPress]ブログ開設のやり方まとめ[2019] [WordPress]ブログ開設前の前提知識(構想編) スポンサーリンク 目 …