常時SSL化後に消えてしまったFacebookの「いいね！」数を元に戻す方法：Movable Typeテンプレート版

常時SSL化後に消えてしまったFacebookの「いいね！」数を元に戻す方法：Movable Typeテンプレート版
記事公開日：2018年02月25日 13:44

category: Web | 文字数：3248 | 読む目安：5分以上

ども、どもども。

ここ1〜2年くらいで、さまざまな理由からウェブサイトのURLを常時SSL化することが増えてきました。
すでに数ヶ月も前になりますが、この個人ブログも2017年5月にSSL化を実施したところです。

ブログに限らず、ウェブサイトをSSL化するのは「URLを変更する」ことを意味するわけですが、通常は301リダイレクトなどを設置していれば、特にそれまでと変わらずブログを運営していくことができます。
ただ、ひとつだけ変わってしまうのが、URLに紐づくサービス...例えばFacebookの「いいね！数」であったり、はてなブックマークの「ブックマーク数」だったりします。
それらサービスではSSL化することで別のURLと認識されてしまい、それまでの数値がリセットされてしまうんですね。

はてなブックマーク数の例

あまり多くのブックマーク数ではないのですが、参考まで（汗）

常時SSL導入前のはてなブックマーク数：7ユーザー

<a href="http://www.ni4.jp/2014/09/post_31.html" target="_blank">DNSサーバー、Webサーバー、Mailサーバーを分離してみる - www.ni4.jp</a>

常時SSL導入後のはてなブックマーク数：1ユーザー

<a href="https://www.ni4.jp/2014/09/post_31.html" target="_blank">DNSサーバー、Webサーバー、Mailサーバーを分離してみる - www.ni4.jp</a>

私のブログでは、はてなブックマーク数を掲載していなかったのでそれほど気にならなかったのですが、Facebookのいいね！数についてはSSL化したことでリセットされてしまったのがすごくもったいない気がしていました。
とは言え、SSL化を実施してしまった後に気がついたので、個人ブログだし良い勉強になったってことで気にしない気にしない...と思うようにしていました。

...いや、だめだ、気になる（汗）

SSL化後もFacebookいいね！数を引き継ぐ方法はあるわけだし、このまま見過ごすのは...なんだかやっぱりもったいない！
というわけで、SSL導入から9ヶ月ほど経った後にこの施策を実施することにしたのです。

Facebookいいね！数を引き継ぐために実際にやったこと

参考としたのはこちらのスライドです。
サイトの常時SSL化後もいいね! 数は引き継ぎたい♡
https://www.slideshare.net/foxbitz1/ssl-68806083

このスライドを参考に私がこのブログでやったことは以下でした。

引き継ぎを実施したい記事ページのog:urlをSSL化前の古いURLにする
SSL化後に公開した記事ページは変更不要（SSL化されたURL）
このブログはMovable Typeで構築しているため、MTテンプレートで実装
htaccessですべてのアクセスをhttpからhttpsへ301リダイレクトさせていたものを、Facebookクローラーについてのみリダイレクトしないように変更
デバッガーを通して意図したとおりなっているかを確認た後、Facebookクローラーが各ブログ記事へアクセスしてくるのを待つ

1. 引き継ぎを実施したい記事ページのog:urlをSSL化前のURLにする

まず、Facebookのヘルプにもあるとおり、引き継ぎを実施したいページ（URLを変更することになったページ）で、og:urlを旧URLにします。
このブログはMTで構築されているので、これをMTテンプレート内（htmlのmeta内）で実現します。

<mt:ignore>SSLを導入した日付を変数 ssl_date に入れる</mt:ignore>
<mt:setvar name="ssl_date" value="20170601" />
<mt:ignore>ブログ記事の公開日を変数 entry_date に入れる</mt:ignore>
<mt:EntryDate format="%Y%m%d" setvar="entry_date" />

<mt:if name="entry_date" gt="$ssl_date">
  <mt:ignore>公開日がSSL導入日以降（og:urlが新しいURL）の場合</mt:ignore>
  <meta property="og:url" content="<$MTEntryPermalink$>" />
<mt:else>
  <mt:ignore>公開日がSSL導入日以前（og:urlが古いURL）の場合、パーマリンク内のhttpsをhttpに置換する</mt:ignore>
  <meta property="og:url" content="<$MTEntryPermalink replace="https","http"$>" />
</mt:else></mt:if>

以上で各ブログ記事内でその公開日にあわせてog:urlを出し分けることができるようになりました。

2. htaccessでFacebookクローラーのみに旧URLを見せる

これまではhttpでアクセスしてきた場合、そのすべてをhttpsに301リダイレクトしていました。

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

そこにFacebookクローラーのみを除外するルール条件（下記1つめのRewriteCond）を追加します。

# SSL Redirect
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} !(Facebot|facebookexternalhit/1.1) [NC]
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

これで通常のアクセスはhttpsへリダイレクト、Facebookクローラーのみリダイレクトしないようになります。
Facebookのクローラーは、SSL化前のページについてはhttpでアクセスし、SSL化後のページはそもそもhttpsでアクセスするので、SSL化前のページのみ「いいね！」数のカウントを旧URLで行うことになるわけです。

3. Facebookデバッガーで確認

上記の手順が終わった後、引き継ぎを実施したい記事ページをデバッガーに通して内容を確認します。

シェアデバッガー
https://developers.facebook.com/tools/debug/sharing/

その結果、以下のようになっていればOKです。

取得したURL：SSL化後のURL
カノニカルURL：古いURL
リダイレクトパス
・入力URL：SSL化後のURL
・og:urlのメタタグ：古いURL

例：https://www.ni4.jp/2014/11/post_36.html の場合

スクリーンショット 2018-02-18 17.40.51.png

ただし、デバッガーを通した直後はFacebookクローラーがまだURLを拾いに来ていないので、ブログ記事側の「いいね！」ボタンに表示されている数はゼロのまま（あるいは新しいURLの数値のまま）になっていると思います。
私の場合は上記作業後、およそ3日〜5日程度でクローラーが訪れ、かつての「いいね！数」がブログ記事側の表示数にも反映されました。

以上で完了です。お疲れさまでした！

---

本当はSSL導入直後にこれをやっていればよかったのですが、なんだかんだと9ヶ月後に実施。
これだけ時間が経過してしまって、数字は戻るのかな...と思っていましたが、なんの問題もなく戻ってきました。
すでにSSL化を実施して日が経っている場合でも実施しておくと良いかもですね！

www.ni4.jp