【最新版】SSL化 Facebookの「いいね」を引き継ぐ方法

「SSL化なんて簡単♪」って思っていたら大きな落とし穴がありました。

それは、URLの変更に伴い Facebookの「いいね」がゼロになってしまう問題です。

日本語Facebook公式ページに明記されている

Google先生を頼りに頑張りましたが、古い情報ばかりで上手くいかないことが多いです。

Facebook日本語公式ページがありますので熟読してください。

本ページを読むことで解決できました。

『ページを別のURLに移動させるにはどうすればよいですか。』

STEP1:rel=canonicalの指定を行う

SSL化に伴い、古いURLと新しいURLで、意識をしながら記述する必要があります。

canonical指定は、新しいURL(https://)で大丈夫です。

プラグインを使えば自動でやってくれますが、意図しない動作も多いです。「All in One SEO Pack」と「WordPress SEO by Yoast」が有名です。

汎用的に使えるように書くと以下のように複雑になりました。

<?php
if (is_home()) {
	$canonical_url  = get_bloginfo('url');
} elseif (is_category()) {
	$canonical_url=get_category_link(get_query_var('cat'));
	if ( $paged >= 2 || $page >= 2) {
	$canonical_url = $canonical_url.'page/'.max( $paged, $page ).'/';
	}
} else if(is_tag()){
	$canonical_url = get_tag_link(get_queried_object()->term_id);
} elseif ( is_search() ) {
	$canonical_url = get_search_link();
} elseif (is_page() || is_single()) { 
	$canonical_url = get_permalink();
	if ( $paged >= 2 || $page >= 2) {
	$canonical_url = $canonical_url.'page/'.max( $paged, $page ).'/';
	}
} elseif(is_404()) {
	$canonical_url =  get_bloginfo('url')."/404";
} else {
	$canonical_url  = get_bloginfo('url');
	$canonical_url = get_permalink();
} 
if( get_post_meta($post->ID, "canonical", true) ) {
	$canonical_url  = $post->canonical;  ?>
<?php } ?>
<link rel="canonical" href="<?php echo $canonical_url; ?>">

STEP2:新URLに古いURLを指すog:urlタグを追加

これは半分本当で半分ウソです。

正確には、SSL化する前の記事は、古いURL(http://)を記述して、SSL化以降に投稿した記事は、新しいURL(https://)を記述します。

SSL化以降に投稿した記事も、「http://」をマスターとしても問題ありませんが気持ち悪いですね。

ユーザーの環境に合わせて20170922を実施日に変更してください。


<?php if(20170922 >= intval(get_the_date( 'Ymd' ))){ 
$GNS_STR_URL = str_replace( 'https://', 'http://',get_permalink());
?>
<meta property="og:url" content="<?php echo $GNS_STR_URL; ?>" />
<?php }else{ ?>
<meta property="og:url" content="<?php the_permalink(); ?>" />
<?php } ?>

STEP3:Facebookクローラーだけが古いURLを見られるようにする

Facebookクローラーだけは、古いURLも見られるようにするものです。

他の方が見た場合は、301リダイレクトを実施します。

htaccessに以下を追加しました。

#Facebookクローラーは例外 HTTPなら
RewriteCond %{HTTP_USER_AGENT} Facebot
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

STEP4:いいね数の表示は、古いURLで指定する

ここでもSSL化前の記事だけ古いURLにしました。新しいSSL化後に執筆した記事は新しいURLです。

20170922を変更してください。

<div style="float:left;line-height:0" class="fb-like" data-href="<?php 
if(20170922 >= intval(get_the_date( 'Ymd' ))){ 
	$GNS_STR_URL = str_replace( 'https://', 'http://',get_permalink());
	echo $GNS_STR_URL;
}else{
	the_permalink();
} ?>
" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

まとめ:SNSのリンク切れ問題は難しい

Facebookの振る舞いが、もうちょっとフレンドリーになると負担が軽減するのですが、なかなか難しいです。

SSL化トラブルは、もうしばらく続きそうですね!

今回の変更によって『いよいよ発売!ジブン手帳 2018 は、使いやすさ断トツNo1』は、「274いいね」が継続して付与されていますし、『【レビュー】コクヨジブン手帳 Goods ファスナーケース』も「133いいね」として継続されています。

もし、これがゼロだったら凹みますね。

山崎信悟

マイクロソフト認定トレーナー。『自己紹介』