常時SSL化して失われたFacebookの「いいね!」数を取り戻す試行錯誤の果て

f:id:nuruta:20170312013233j:plain

はじめに

ま、タイトル通りです。

訂正

この記事の内容は正しくありません。
はてなブログでも失われたいいね数を引き継ぎつぐことが出来ます。
nuruta2.hatenablog.com
訂正してお詫びいたします。

結論から先に

結論から言いますと、はてなブログでは現状不可能というのが僕の行きついた答えです。
どうしてこのような結論になったのか、順を追って書いていきます。

切欠

はてなブログでは、現在段階的に常時SSL化の範囲が広がっています。
第1弾として、ごく一部のブログで運用が始まり、つい先日その範囲が一気に拡大。
独自ドメイン以外の全てのブログで適用されました。
今後は、独自ドメインもSSL化出来るようになり、これではてなブログを使っている全てに対応できるようになる予定です。

という訳で、僕のブログも出来るようになったので、軽い気持ちでメインブログの方をSSLに切り替えました。
いや～大変でした。
早計に変更するもんじゃありませんね。
色々と不具合が出て、直すのに四苦八苦しました。

はてなスターの取得など一部不完全な部分もありましたが、ほぼほぼ元通りに出来たのです。
出来たつもりでいたのです。

うん。
Facebookの「いいね!」数なんて全く気付いていませんでした。
仕方ないね。
全く付かないはてブ以上に「いいね!」なんて貰えないですからね。
基本ゼロなので、気づきようが無かったんです。

そんな折、嬉しくも（久々に）言及して頂けました。
aniota-alvarado.hatenablog.com
ありがとうございます!!

あにおさんのこの記事を拝読して、漸くFBの「いいね!」数がリセットされてしまったことを知りました。
数少ない「「いいね!」が貰えた記事」を検索。
確かにリセットされてることを確認出来ましたので、調査に乗り出した訳です。

原因と対処法

これは簡単に見つかりました。
Facebookの公式にちゃんと書かれてます。
よくある質問 - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

「いいね!」数は、その「いいね!」が付いた時点のURLに紐づいている為に、プロトコルが変わっただけとはいえ別のURLになったことで取得できなくなったと。

対処法はheadに以下のmetaタグを追加することです。

<meta property="og:url" content="記事の旧URL" />

これで、Facebookのクローラ―が旧URLを検知して、それに紐づいた「いいね!」数を生成してくれるそうです。
新URL（SSL化後のアドレス）で新たに貰った「いいね!」も自動的に集計してくれると書かれてます。

JavaScript

原因と対処法が分かりました。
あとは、スクリプトを書くだけです。
ググれば、phpのソースはいっぱい出てくるのです。
ですが、はてなブログはphpが使えません。
そこで、それらを参考にしてjavascriptに書き換えました。

色々と書きました。

metaタグを追加するスクリプト
metaタグを修正するスクリプト
rel=canonicalを追加するスクリプト
rel=canonicalを修正するスクリプト

ここでは、metaタグを追加するスクリプトを載せます。

document.addEventListener('DOMContentLoaded', function(){
	var ssl_date = "20180417";
	var $this = $(".page-entry");
	var entry_date = $this.find(".date-year").text() + $this.find(".date-month").text() + $this.find(".date-day").text();
	var plink = $(".page-entry .entry-title").find("a").attr("href");

        if (ssl_date >=  entry_date) {
	         plink = plink.replace("https","http");
        }
        var meta = document.createElement('meta');
        meta.setAttribute('property', 'og:url');
        meta.setAttribute('content', plink);
         document.getElementsByTagName('head')[0].appendChild(meta);
});

簡単にコードを説明します。

変数ssl_dateには、ブログを常時SSL化した日付を入れます。
僕の場合2018年4月17日なので、こうしました。

記事が作成された日付と常時SSL化した日付を比較し、記事が作成された日付の方が古かったらば、記事URLのプロトコルをhttpsからhttpに置換。
metaタグを追加するという流れです。
console.logで結果を吐き出すと、ちゃんとmetaタグが出来ていることを確認出来ました。

これを「設定」⇒「詳細設定」⇒「検索エンジン最適化」の「headに要素を追加」に追加しました。
ソースを確認すると…ダメです。
作ったはずのmetaタグが載っていません。
当然ですが、「いいね!」数もゼロのまんまです。

何故出来ないのか

試行錯誤したのです。
コードを載せる場所を変更したり、関数にして呼び出す形式にしたり。
直接headにmetaタグを書いたりもしました。
なにしてもダメでした。

何故なのか。
ちゃんと書かれてました。

既定のタグを書き換えることはできません

と。

ソースを見ると分かりますが、

<meta property="og:url" content="記事のURL" />

も

<link rel="canonical" href="記事のURL" />

も既に書かれているんです。

この部分は、僕らユーザーでは操作出来ない箇所です。
システムとして組み込まれている部分であり、はてなでは、それをスクリプトで書き換える行為を遮断しています。
なので、修正スクリプトが意味を成さないことが分かりました。

では、追加系はどうなのか。
console.logで追加が確認出来ましたが、ソースには載りません。
その為、これも弾かれていると考えるのが妥当なのでしょうか。
ちょいと分かりません。
1つ確かな事は、正しく追加されてもFBのクローラ―には認識されないということですね。

直接headに要素を追加してみたと上述しましたが、これでもダメだったからです。

当然ですが、クローラ―はソースを上から順番に読んでいきます。
すると、先にシステムによって書かれているタグを読むんですよね。
ユーザーがheadに追加した部分は、headの最後の方に加わるので、なにをしてもクローラ―に先に読ませる事は出来ません。
意味をなさないんです。

以上より、現状はどうすることも出来ないという結論に至りました。

終わりに

僕は以前FC2でブログをやっていました。
その時の経験から考えると、多分FC2では出来ます。
FC2では、テンプレートからカスタマイズ出来るからです。

HTMLの構築から出来る為、自由度が高いです。
CSS、スクリプトも弄り放題なので完全に自分好みのブログを作る事が出来ます。
これは大きな魅力の1つになります。が。
その分、より専門的な知識が必要になってきますし、なによりSEOを自身でコントロールしないとなりません。
metaタグがどこまでSEOに有利なのかは不明ですが、自己責任で適切なタグを適切な量と内容書かないといけないのです。
これを怠ったり、間違えたりすると、SEOの評価は低くなってしまいます。

はてなブログがSEOに強いと言われる由縁は、ここにあるんじゃないかと思っています。

はてなブログでは、CSS（とスクリプト）しかカスタマイズできません。
大切なheadの部分は、一括してシステム側に握られています。
それ故に、誰でも「はてなブログの作ったSEOの強み」の恩恵に与れているのかなと。

何が言いたいのかと申しますと、今回のような不利益となる点も出てきちゃうのですが、それと同等かそれ以上の価値を日頃享受してるのかなって。
Facebookの「いいね!」は残念ですが、はてな側で対処をしてくれることを期待しましょう。

てな感じで纏めたいのですが、ダメかな?
ダメですね。
最後に大事な事を書いておきます。

僕が出した結論は間違っている可能性が高いです。
専門家じゃありませんし、知識も浅いですから。
スクリプトや設置場所が違うのかもしれません。

適切なスクリプトを適切な場所に配置すれば、ちゃんと出来るのかもです。
いずれはてな村の天才たちが対策に乗り出してくれるはずです。
僕はそれにも期待しています(笑