2016年11月14日
常時https/SSL化してもFacebook記事の「いいね!」数を引き継ぐ方法(正攻法編)
こんにちは、ディレクターの八木です。
先週末のMTDDC Meetup TOKYO 2016はなかなかの盛り上がりでした。
私も懇親会のLTで、ちょこっと「常時https/SSL化といいね! 数継承」のお話をさせてもらいました。
ご紹介したのはFacebookの公式ページで推奨されているいわば正攻法なのですが、このページがつい先日まで英語版しかなかったためか、Googleで検索してもここに言及した記事があまりありませんでした。
そのときつかったスライドをSlideShareにアップしたので共有しつつ、 若干プラスアルファの補足を書いておきたいと思います。
SlideShare:「常時HTTPS化後もいいね!数は引き継ぎたい♡」
http://www.slideshare.net/foxbitz1/ssl-68806083
具体的に何をすればいいのか: og:urlでold-url側を指し 旧ページをFbクローラーにだけ見せる
Facebook公式ページには2方式紹介されており、1の方が推奨の方法です。
https後のURLを new-url 、http時代のURLを old-url としたとき、
- og:urlでold-url側を指し、かつFacebookのクローラーがold-urlページを参照できるよう301リダイレクトの対象からはずす
- new-urlページへのアクセス時、Facebookクローラーのみold-urlにリダイレクトさせる
以下、方式1で具体的にすることを書きます。
<new-urlページ側>
og:urlでold-url側を指す。canonicalはhttps側でOK
<meta property="og:url" content="https://example.com/old-url" /> <link rel="canonical" href="https://example.com/new-url" />
<old-urlページ側>
og:urlでold-url側(つまり自分自身)を指す。canonicalはhttps側でOK。
old-urlページはOpenGraphヘッダーを含む正しい形式のドキュメントであること。
<meta property="og:url" content="https://example.com/old-url" />
<301リダイレクトの設定>
httpへのアクセスは、ユーザエージェントで判定してFbクローラーには200レスポンスを返し、それ以外なら301リダイレクトを返すように設定します。
- old-urlへのアクセスが Facebookクローラー以外(つまり一般ユーザとかGoogleさんとか)なら、new-urlへ301リダイレクトさせる
- Facebookクローラーなら、そのままold-urlページを表示する(HTTP 200レスポンスを返す)
- Facebookクローラーのユーザエージェントは、次のユーザーエージェント文字列のいずれかによって識別できます。
facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php) facebookexternalhit/1.1 Facebot
以上で、http時代の過去記事いいね!数を httpsページに継承できます。
なお、Facebookクローラーの実際の振る舞いはデバッガーで確認できます。
- https://developers.facebook.com/docs/sharing/webmasters#testing
- シェアデバッガー https://developers.facebook.com/tools/debug/
- Facebookクローラーの詳細 https://developers.facebook.com/docs/sharing/webmasters/crawler
いいね!数引き継ぎをMovable Typeで実装する
https化後に公開したページについては、 og:urlは最初から https側のURLを指していればよいので、その記事がhttps化後に投稿されたか前かでog:urlの出し分けをする必要があります。
MTで実装する場合は、
- カスタムフィールド「https化前のページ」フラグ(チェックボックス)を記事に持たせておき
チェックありならog:urlはhttps://(サイトのURL通り出力)、チェックなしなら http://のURLと判定して出し分けします。
<mt:if tag="is_https"> og:url は new-url(https後のURL) <mt:else> og:url は old-url(http時代のURL) </mt:else></mt:if>
- あるいは、httpsへの切り替え日をモディファイアで定数として持っておいて、記事のentryDateと比較判定して出し分けてもいいかもしれません。
共通モジュールでセット <mt:setvar name="ssl_date_number" value="20161024090000" />
各記事ページの処理 <mt:EntryDate format="%Y%m%d%H%M%S" setvar="entry_date_number" /> <mt:if name="entry_date_number" gt="$ssl_date_number"> og:url は new-url(https後のURL) <mt:else> og:url は old-url(http時代のURL) </mt:else></mt:if>
参考情報
*Facebook for developers >よくある質問(ソーシャルプラグイン) *
ページを別のURLに移動させるにはどうすればよいですか。
https://developers.facebook.com/docs/plugins/faqs#faq_1149655968420144 (邦訳版)
https://developers.facebook.com/docs/sharing/webmasters/crawler#updating (上記の簡易的な説明。邦訳版)
なお、上記FAQの邦訳版は日本語がこなれてないというか、読みづらいです。
英語版の方が正確に書いてあるように思います。
ページを別のURLに移動させるにはどうすればよいですか。(英語版)
https://developers.facebook.com/docs/plugins/faqs?locale=en_US#faq_1149655968420144
私が最初に試した頃は英語版しか情報がありませんでした。
英語が超ニガテな私が 社長に泣きついて訳して貰ったものがあるのでついでに共有します(Thank you, Boss.)
(※以下ページからの引用)
---
* How do I move a page to a different URL?
ページを新たなURLに移設する方法は?
I need to move a page to a different URL, you can't move the likes, shares or comments directly to the new URL but you can use the old URL as the canonical source for the number of likes or shares at the new URL. We include background on how to do this below.
ウェブページを新たなURLに移設する場合、いいね!、シェア、コメントなどを新たなURLに直接移設することはできません。しかし古いURLを、いいね!数やシェア数のカノニカルソースとして使うことはできます。そのやり方の背景について説明しましょう。
- Background
When resolving which url a like or share action should be attributed to, Facebook uses a process to resolve the canonical url for url that's been loaded.
背景
Facebookでは、いいね!やシェアがどのURLに属するものか決定する際、読み込みができないURLの代わりにカノニカルURLを使用します。
When a URL is loaded, the crawler will look for:
URLを読み込む際、クローラーが探すのは:
1. A HTTP 301 or 302 Redirect
2. The use of an og:url open graph tag in the page
3. The use of rel=canonical as described in RFC 6596. (Facebook's crawler only supports content, not HTTP headers.)
1. HTTP 301か302のリダイレクト情報
2. ページ内のog:url Open Graphタグの使用
3. RFC 6596で規定されたrel=canonicalの使用(Facebookのクローラーはコンテンツのみサポートし、HTTPヘッダーは見ません)
If any of these methods result in a URL that's different than the URL originally loaded, the specified URL will be considered the "canonical URL" for the original URL. If required, the crawler will also follow a chain of redirects to find the canonical URL.
これらの方法のどれかによって、オリジナルのURLと異なるURLが検出された場合、そのURLはオリジナルURLに対するカノニカルURLであると推定します。もし求められれば(そのような記述が見つかれば?)クローラーはカノニカルURLを見つけるためにリダイレクト先を辿り続けます。
All likes and shares will be attributed to the canonical URL instead of the loaded URL.
全てのいいね!とシェア情報は読みこまれたURLでなくカノニカルURLに属するものとなります。
- Examples
Hint: Use our debugger to see what Facebook sees when crawling your page.
例
ヒント:Facebookがあなたのページをどのようにクロールするかはdebuggerを使って確かめてください。
By controlling the canonical URL you can move content from one URL to another and retain like and share counts, as long as you allow Facebook to continue to resolve the new URL into the old one. This can be done with one of two methods:
カノニカルURLを制御することで、コンテンツをあるURLから別のURLに移すことができ、Facebookに対して古いURLと新しいURLのひも付けを開示していれば、いいね!とシェアの数を保持することができます。これは二つの方法のうちいずれか一つで行うことができます。
- Add an og:url tag to the new URL which points at the old URL (Preferred)
新URLの古いURLを指し示す記述にog:urlタグを加える(推奨)
In your new URL, you should include a link to the old URL. For example, if your new URL was https://example.com/new-url, and the old URL was https://example.com/old-url, you should include this snippit in the new-url:
新しいURLには、古いURLへのリンクを含める必要があります。例えば、新しいURLが https://example.com/new-url であり、古いURLが https://example.com/old-url だった場合、新URLに以下のようなスニペットを含めるべきです。
Using this method tells the crawler that the canonical URL is at the old location, and it will use that to generate the number of likes and shares on the page. Any new likes and shares will continue to aggregate on the old URL as well.
この方法により、クローラーは古いURLにカノニカルURLがあると認識することができ、その情報をいいね!とシェア数を生成するために使うでしょう。新たにいいね!やシェアがあった場合、古いURLにも合わせて反映されるでしょう。
This also requires that the old URL still renders a document with Open Graph tags and returns a HTTP 200 response, at least when loaded by Facebook's crawler. If you want other clients to redirect when they visit the URL, you must send your 301 HTTP response to all non-Facebook crawler clients. The old URL should contain its own og:url tag that points to itself.
この方法では、古いURLが、少なくともFacebookクローラーがアクセスした際には、引き続きOpen Graphタグでページが描写され、HTTP 200レスポンスを返す必要があります。
他のクライアントをリダイレクトしたい場合は、Facebookクローラー以外のクライアントにはHTTP 301レスポンスを返さなければなりません。古いURLは、それ自身を指すog:urlタグを含んでいる必要があります。
You can learn how to recognize Facebook's crawler in our Sharing Best Practices Guide.
Sharing Best Practices Guideを読むと、Facebookクローラーの取り扱い法について学ぶことができます。
This method will work with rel=canonical as well, but og:url is preferred.
この方法はrel=canonicalでも動作しますが、og:urlを使うことがお勧めです。
- Redirect Facebook's crawler to the old URL
Facebookクローラーを古いURLにリダイレクトする
Another method to accomplish this is to redirect Facebook's crawler to the old URL any time it visits the new URL. As with the method described above, the old URL must be a valid document with Open Graph headers. And if you want to include a redirect at the old URL, Facebook's crawler must not redirect when it visits the old URL.
もう一つの方法は、Facebookクローラーが新しいURLを訪れたときはいつでも古いURLにリダイレクトすることです。上の方法でも述べたように、古いURLはOpen Graphヘッダーを含む正しい形式のドキュメントでなくてはなりません。もし古いURLにリダイレクトを含めたい場合は、Facebookクローラーがリダイレクトされないようにするべきです。カテゴリー: CMS・MovableType , Webマーケティング
タグ:
« 前の記事:Movable Typeのサイト構築・運用に役立つプラグイン10選(投稿支援編)
» 次の記事:NGO・NPOのウェブとソーシャルメディア活用:2017年に向けたアドバイス
アークウェブの本
Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用
内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む
新着はてブ
カテゴリー
- Shopify(ショピファイ)オンラインショップ構築
- NGO・NPO向け情報
- スマートフォン
- だれもが使えるウェブコンクール
- mixiアプリ
- OpenSocial (システム開発)
- アークウェブのCSR
- A-Form, A-Member, A-Reserve(MTプラグイン)
- Ruby on Rails(システム開発)
- necoったー
- Miqqle
- WebSig24/7
- ecoったー
- ビッグイシュー(The Big Issue)
- CSR(企業の社会的責任)
- マッシュアップ
- RIA (システム開発)
- セキュリティ(システム開発)
- 唐松(アクセス解析)
- Ajax (システム開発)
- テスト(システム開発)
- データベース
- PukiWiki
- Web 2.0
- SEO・サーチエンジン最適化
- XP・アジャイル(システム開発)
- Web・ITニュースクリップ
- Webアクセシビリティ
- Webデザイン
- SEM・サーチエンジン広告
- Webユーザビリティ
- CMS・MovableType
- Zen Cart(オンラインショップ構築)
- Snippy(SNS・ソーシャルブックマーク)
- アークウェブ
- オープンソース
- CMS(コンテンツマネジメント・システム)
- Webマーケティング
- AMP
- SNS