ブログ「小粋空間」をSSL化しました

ブログ「小粋空間」をSSL化しました

Posted at May 1,2021 3:55 PM
Tag:[SSL]

遅ればせながら、ブログ「小粋空間」をSSL化(http→https)しました。

ブログ「小粋空間」をSSL化

当ブログはMTを利用しているので、以下、SSL化で作業した内容を残しておきます。

SSL証明書の取得・設定方法は別エントリーします。

1.方針

SSL化でどの部分からhttpをhttpsに変更すればいいか?という問題ですが、基本的な動作として、

  • httpでアクセスして、中にあるhttpsの画像はOK
  • httpsでアクセスして、中にあるhttpの画像はNG

ということで、最初にページ内のhttpをhttpsに変更し、一番最後に.htaccessでのリダイレクトをすることにしました。

2.サイトURLの変更

MT管理画面の「設定」→「全般」の「サイトURL」を「http://」から「https://」に変更。これでサイト内記事へのリンクはすべて変更。

サイトURL

MT6までの場合は、ウェブサイトの「設定」→「全般」→「ウェブサイトURL」で変更(ブログの「ブログURL」ではプロトコルを変更できないので注意)。

3.記事内のimg要素・a要素の変更

記事に含まれる、a要素およびimg要素等に含まれるサイト内のURL、

https://www.koikikukan.com/

https://www.koikikukan.com/

に変更。

プロトコルを表記しない、

//www.koikikukan.com/

に変更する案も考えましたが、調べたところ、Googleで非推奨ということを知り、httpsを明記。

参考:Google HTML/CSS Style Guide()

Always use HTTPS (https:) for images and other media files, style sheets, and scripts, unless the respective files are not available over HTTPS.
 
<!-- Not recommended: omits the protocol -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 
<!-- Not recommended: uses HTTP -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Recommended -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

4.canonicalの変更

link要素の"rel=canonical"は、インデックスして欲しいURLを検索エンジンに伝える役割があるようです。

変更前

<link rel="canonical" href="https://www.koikikukan.com/" />

変更後

<link rel="canonical" href="https://www.koikikukan.com/" />

実際はMTタグで表現しているので自然体で変更。

5.jsファイルのURL変更

ここまでの変更でhttpsでアクセスすると、jQueryで埋め込んでいた折りたたみが動作しなくなったので、Chromeのコンソール機能でエラーを確認し、該当のjsファイルに直書きしているURLのhttp://をhttps://に変更。

例えば、

変更前

var calendar_url = "https://www.koikikukan.com/";

変更後

var calendar_url = "https://www.koikikukan.com/";

6.その他のURL

テンプレートファイルのアドセンスに含まれる"http://"を"https://"に変更。

Amazonアソシエイトのリンクはhttpsに変更するとエラーになるため放置。

7.サイトマップの追加

Google Search Consoleに読み込ませるサイトマップ(sitemap.xml)を出力。

厳密には、"http://"で出力されているサイトマップはそのままにして、インデックステンプレートで生成するサイトマップのファイル名を、別のファイル名(sitemap2.xml等)に変更して再構築。

Google Search Consoleは、"http//www.koikikukan.com/"で登録していプロパティは、https用に移行できないため、"https//www.koikikukan.com/"のプロパティを新たに追加し、そこに前述のサイトマップを指定します。

8.再構築

ここまでの作業で個別に"https://"指定でブログのトップページや記事ページが概ね正常に表示されることを確認し。すべてのページを再構築。

この時点では、外部から"http://"でアクセスされても表示が崩れることはありません。

ただし、アクセスされたページから、さらに他のサイト内ページに遷移すると、"https"//でのアクセスになります。

9..htaccessでのリダイレクト

最後にHTTPからHTTPSにリダイレクトするために、.htaccessに下記のディレクティブを追加。

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

追加したあと、ブラウザから"http://"でアクセスして、"https://"にリダイレクトされることを確認。

10.おまけ

HTML要素のxmlnsをprefixに変更しました。

変更前

<html lang="ja"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">

変更後

<html lang="ja"
      prefix="og: http://ogp.me/ns#"
      prefix="fb: https://ogp.me/ns/fb#"">

11.参考サイト

参考サイトは下記です。ありがとうございました。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)