人生は宇宙だ!

カンボジア大好き!自炊大好き!そんなmoriのライフログ

*

WordPressで運営しているブログをhttps化する方法

      2016/03/02

  • https化したかったのは2つの理由

    このブログを先日https化しました。ブラウザのアドレスバーのところに鍵のマークが付いてますが、これがあればこのサイトは安全だってことです。

    Chromeでは緑の鍵マークが付く

    Chromeでは緑の鍵マークが付く

     

    なんでこのブログをhttps化したかったのかって言うとですね、大きく2つの理由があったんです。まずはGoogleがhttpsであるかどうかが検索結果に影響を与える可能性があると言ったこと。そして2つめがhttps化に個人的にすごく興味があったってことです。

    検索順位にhttpsは影響を与える可能性がある

    ウェブマスター向け公式ブログにこのような記述があります。

    このランキングの変更は、グローバルでクエリの 1% 未満にしか影響しませんが、これから長い期間をかけて強化していきます。全体的に見ると、このシグナルは良質なコンテンツであるといった、その他のシグナルほどウェイトは大きくありません。https は、優れたユーザー エクスペリエンスを生み出す多くの要素のうちの 1 つです。

    今後、より多くのウェブサイトで https が使用されることを期待しています。ウェブの安全性をさらに強化しましょう。

    HTTPS をランキング シグナルに使用しますより

    検索順位っていうのはコンテンツの質など色々な要素で決められているので、ブログをhttpsにしたからと言って検索順位がすぐに上がるわけじゃありません。ここにも書かれているようにもっと大事な要素(良質なコンテンツであること)もあります。良質なコンテンツを作るっていうことの方が大事。

    でもサイト(ブログ)の安全性っていうのも大事だと思うんですよ。より安全にブログを見てもらうっていうこともぼくは考えたいなと思うんです。将来的にはhttpsであることが今よりもっと重要視されるようになるかも知れませんしね。

    https化で自分自身がスキルアップできる

    今回実際にブログをhttps化して分かったことは、これをやることによって自分自身のスキルアップになったってこと。

    https化する時には色々な作業をやりました。たとえばこんなこと。

    • レンタルサーバーにSSLの申込み
    • データベースのバックアップ
    • ワードプレスのアップデート
    • プラグインを使ってのURLの置換
    • サーバの設定

    その他にも不具合が見つかるたびに調べ物をしたりしたので結構な時間がかかってしまったんですけど、かなり勉強になりました。今まで知らなかったことを知るっていう喜び、https化ができたという達成感なんかは堪りませんね!

    https化の大まかな流れ

    今回ぼくが実際に行った、このブログのhttps化について順に書いていきたいと思います。人によって運営しているサーバやブログシステムも違うと思うんですが、誰かの参考になればと思います。

    https化に際してこの記事を参考にさせていただきました。内容がとても充実していてかなり勉強になりましたね。こういう記事を書いてくださる方がいて本当に嬉しいです。ありがとうございます!

    ブログの完全HTTPS化を完了、HTTPからHTTPSへの移行プロセスを共有 | 海外SEO情報ブログ

    まず初めにぼくのブログ環境について。

    • サーバ:エックスサーバー
    • ブログシステム:Wordpress(バージョン 4.4.2–ja)

    この順でぼくは作業を行いました。詳細については各記事を見てください。

    エックスサーバーでSSLを申し込む

    全部自分でやるとめっちゃ大変そうですけど、エックスサーバーでは特に面倒な手続きなしで簡単にできてしまいました。かなり拍子抜けでしたね。httpsでアクセスできるようになるまで2時間くらいだったかな。めちゃくは早くてビックリしました。エックスサーバーはかなり気に入ってます。

    データベースのバックアップ

    WordPressではデータベースを使って記事やその他の情報を記録しています。今回は記事に書かれているURLを変換しないといけません。

    万が一失敗してしまうと記事の内容が変な風に書き換わったり、消えてしまう可能性も。さらにはブログ自体にアクセスできなくなってしまうっていう最悪の事態が起きる可能性もあるんです。

    だからこういう作業をする前にはデータベースをバックアップするのが絶対に必要なんですね。エックスサーバーは便利なツールが用意されているので簡単にバックアップできます。

    URLの変換

    ブログには記事に使用している画像やリンク、カエレバなどの画像、ソーシャルボタンなどいろいろあります。それらのURLを変更します。 これは使用しているサービスやWordpressのテーマによって大きく変わってくると思うので、もしかしたらちょっとした勘や経験が必要かもしれません。

    今回はぼくの環境でやったことを書いています。

    • ブログサービス:(バージョン 4.4.2–ja)
    • テーマ:Stinger5
    • 利用しているサービス:Amazonアソシエイト

    一般設定のURLを変更

    これは簡単。Wordpressの管理画面でブログのURLをhttpsに変えるだけ。

    “設定” → “一般”をクリック

    一般設定

    一般設定

    2箇所のURLをhttpsに変更する。

    URLをhttpsに変更

    URLをhttpsに変更

    .htaccessの修正

    もうひと息です。これが最後の難関ですかね。サーバをあんまり触ったことのない人にはなかなか敷居が高いと思います。ぼくも結構苦手。 ここでやることはhttpでブログにアクセスされた時にhttpsに飛ばすという処理を.htaccessというファイルに書き込みます。

    ウェブマスターツールの登録

    ウェブマスターツールはブログをhttpsにすると新しく登録しなおさないといけません。

    まずウェブマスターツールのホーム画面にアクセスしてください。そして右上に表示されている”プロパティを追加”をクリックします。

    プロパティを追加をクリック

    プロパティを追加をクリック

    ウィンドウが表示されるのでhttpsで始まる新しいURLを入力して、”続行”をクリック。

    httpsで始まる新しいURLを入力

    httpsで始まる新しいURLを入力

    あとは画面に表示される案内どおりにやればおしまいです。

    サイトマップの送信

    検索エンジンにブログの構造を伝えるために必要なXMLサイトマップを送信します。

    ぼくはWordpressのプラグイン・Google XML Sitemapsを使っています。このプラグインが作ってくれるサイトマップをウェブマスターツールで登録します。

    Google XML Sitemaps

    Google XML Sitemaps

    サイトマップのURLはWordpressの左メニューから”設定” → “XML-Sitemap”を見るとわかります。

    左メニューから"設定" → "XML-Sitemap"

    左メニューから”設定” → “XML-Sitemap”

    “あなたのサイトマップのインデックスファイルのURL:”に書かれてあるURLがサイトマップの場所です。これをメモっておきます。

    サイトマップのURL

    サイトマップのURL

    ウェブマスターツールを開けて、新しくhttpsで登録したサイトを開けます。左のメニューから、”クロール” → “サイトマップ”と選択してください。

    "クロール" → "サイトマップ"と選択

    “クロール” → “サイトマップ”と選択

    “サイトマップの追加/テスト”ボタンを押すと、サイトマップのURLを入力する画面が現れます。

    サイトマップの追加/テスト

    サイトマップの追加/テスト

    先ほどメモっておいたサイトマップのURLを入力します。そして”送信”ボタンを押して完了。

    httpsで始まる新しいURLを入力

    httpsで始まる新しいURLを入力

     

    https化で残る大きな課題

    httpsしてみたものの色々と課題も見えてきました。今のところ確認しているのはこの2点です。

    GetTabInfoなどの画面キャプチャで警告

    ぼくはリンクを作成する時にChromeのブックマークレットを使ってリンクを作成しています。とても便利でサムネイル画像も一瞬で作成されるのでかなり気に入っていました。

    しかしhttps化と同時に問題が発生したんです。それはサムネイル画像はHeartRails Captureというサービスを使って作成されているんですが、ここで作成された画像はhttpでしか読み込むことができません。httpsにしたブログから読み込むとブログにアクセスした時に“安全でないという警告”が出てしまいます。

    httpsで画像を読み込むことができないものかと思って調べてみたんですが、有料サービスを使うしか手はないようです。

    HeartRails | システム提供 (SaaS/ASP)

    ということでお手軽にサムネイル画像を使うことは難しいようですね。なんとかしたいな〜

    A8.netの広告コードで警告

    アフィリエイトプログラムで有名なA8.netですが、これも広告コードはhttpなんです。これも同じように警告メッセージが表示されてしまいます。

    どうにかならないものかと思って問い合わせてみましたが頂いた回答はこのようなものでした。今のところはどうしようもないようです。

    A8.netでは現在、SSL対応の広告素材はご用意がございませんが、httpsに対応しているサイトへ広告素材を掲載して頂く事は可能です。

    ただ、サイト閲覧者の利用環境によってはご指摘のようなSSL通信のダイアログが表示されること等がございますので、何卒ご了承ください。

    早く対応されることを願うばかりです。

    食べログの店舗情報の埋め込みが表示されない

    食べログにはサイト内に簡単に店舗情報を表示させるためのコードが用意されています。これもSSL化したサイトでは作動しませんでいた。

    食べログの埋め込みコード

    食べログの埋め込みコード

    表示されるのは店名だけで、その下に表示されるべき店舗情報はまったく表示されません。

    https化をやってみて思ったこと

    実際にやってみるまでは大丈夫かなと心配だったんですけど、意外にすんなりとhttps化できたっていうのが率直な感想です。

    昔やっていたデバッグを思い出しながら少しずつ直していくっていう作業は面白かったですね。

    そしてなによりもできたという達成感ですかね。いろいろと勉強にもなりました。

    すぐにhttpsにする必要があるかって言うとそんなに急ぐ必要はないと思いますが、興味があるっていう人はやってみてもいいんじゃないでしょうか。もちろんデメリットもしっかりと考えたうえでね。

    • 0
    • 0
    • 0

     - デジタルライフ, ブログ運営 ,

  •   関連記事

    ポジティブの連鎖反応
    ポジティブなことを書くとテンション上がるわ!その理由はポジティブ連鎖反応が起きてハイテンションになるから

    ポジティブな感情は楽しいアイデアを次々と湧き出させる こんにちは。昔は超ネガティ …

    バッテリー残量ランプ
    MacBook Proに付いてるバッテリー残量ランプが地味に便利

    電源を入れずともバッテリー残量がわかるのです ぼくの愛用しているMacBook …

    Wi-Fiが使えないのは電子レンジが原因
    Wi-Fiが切れる原因は電子レンジが原因かも。5GHz対応のルーターを使うと大丈夫!

    Wi-Fiが切れてしまう原因は電子レンジだった 自宅で利用しているWi-Fiが時 …

    iTunesはこれです
    BGMとして音楽を聴きたい時にはiTunesで無料のインターネットラジオがおすすめ

    iTunesがあれば無料で音楽が聴きまくれます こうやってブログを書く時や仕事を …

    はがきデザインキット
    激安で超簡単!「はがきデザインキット」を使えば部屋から一歩も出ずに年賀状が出せますよ

    費用も手間もほとんどなし!「はがきデザインキット」がめちゃくちゃ便利 こんちには …

    Mac OS X Yosemite
    Yosemiteにアップグレードする方法

    Macの新しいOS”Yosemite”がリリースされまし …

    no image
    ブログはじめました

    カンボジアに関する情報を不定期に載せていきます。個人的なことが多くなってしまうと …

    Chromeで位置情報が取得できない
    Chromeで位置情報の取得に失敗するのは仕様が変わったから。位置情報を取得したいなら別のブラウザを使おう

    バージョン50から安全でないサイトからは位置情報が取得できなくなりました 先日近 …

    自撮り棒。こんな感じで使います。
    自撮り棒が人気らしい。結構便利そうだけど違法行為しないよう要注意!

    ひそかにブームの自撮り棒 自撮り棒って知ってますか?なんか最近流行ってるみたいで …

    メニューバーが表示されなくなった050plus
    Zenfone5の050plusでメニュー画面を出すには四角ボタンを長押しすべし

    半年近く悩んでいた問題がやっと解決 以前使っていたNexus5を洗濯してしまって …