WEB初心者こそ知っておくとすぐに役に立つ！シェアボタン設置の基礎と効果

こんにちは。ミツクラ先生のもとで、WEBサイトづくり勉強中のスマオカです。ちょっと前から、ミツクラ先生から「SNSシェアボタンの設置忘れるなよ」と、よく言われるようになりました。私は、なんとなく知ったつもりで、「分かりましたー」と返事をしてしまうのですが、実はイマイチよく分かっていません。そこで、今回は「シェアボタン」について詳しく調べてみましたので、この記事を読んでいただいている方と一緒に学べればと思います。

シェアボタンとは？

シェアボタンは別名、共有ボタンとも言います。シェアボタンとは、Facebookや Twitterなどのソーシャルサービスで提供されているソーシャルボタンの一つです。外部のWEBページ等を自身のSNSへシェアやリツイートすることで、ソーシャルでつながっている友人や知人へ通知することができる機能になります。

多くのWEBサイトにて設置されているSNSシェアボタンは、Facebook、Twitter、Google+、はてなブックマーク（はてブ）、Lineなどが代表的です。
ただし、2019年4月2日にGoogle＋はサービスが終了しました。今後公開されるメディアサイトでは、2019年5月22日から公開された「** note で書く**」ボタンが、シェアボタンの1つとして採用される事例が多くなるのではないでしょうか。

SNSシェアボタンを実装するためのポイント

シェアボタンを設置する際に、やっておいた方が良いことが２つあります。 1つ目は、「OGPタグを適切に設定する」ことです。 OGPタグ（Open Graph Protocol）は、シェアした際に、ページのタイトル、URL、概要（description）、サムネイル画像をサイト制作者の意図する通りに表示させる仕組みになります。 OGPタグの設定の仕方によって、会社の印象は劇的に変わるものです。例えば、タイトルがシェアしたい内容と相関のないものでは、意図は伝わりませんし、サムネイル画像も意図するイメージとは違うものが表示されたりしても、せっかくのシェアの効果は発揮できません。適切なタイトルや概要、画像等を設定する必要があります。

２つ目は、「シェアボタンが押された回数を計測すること」です。これは、Googleアナリティクスで計測可能です。Googleアナリティクスのレポート内には、各種SNS操作を記録する機能があるので、その機能を使ってボタンが押された回数をGoogleアナリティクスで記録することができます。 Googleアナリティクス測定を行う場合、２つの実装方法があります。まず、自らGoogleアナリティクスのイベント送信と、そのコールバックでシェアする処理を実装することです。もう一つは、各SNSが提供しているGoogleアナリティクス用のライブラリを利用するやり方です。各SNSが提供しているものを使った方が、解析できることは増えるようです。

以上2つの他に補足として、いくつかシェアボタン設置に関するポイントを紹介します。シェアボタンに関して、各SNSの公式から出ているSNSボタンを使うかどうかです。公式のSNSボタンですと、コピー＆ペーストするだけで使うことができます。また、誰でも見慣れているというところではシェア数を取れやすく、機能的にも有利です。ただし、どうしても表示速度がユーザー側のサービスに依存するので、ページの表示速度が遅くなってしまうデメリットがあります。

こうしたデメリット（表示速度）を改善するためにSNS各社はキャッシュという仕組みを使って、少しでも早くページを表示させるために取り組んでいます。その一方で特に開発中のウェブサイトでよく起こることですが、OGPタグを設定しても内容が反映されない（古い情報のまま）ことがあります。特にFacebookのシェア機能をテストしているときによく発生します。シェアボタンは各SNS会社のAPI（シェアするための機能）の呼び出し、クローラーが呼び出し元のURLへアクセスします。（クローラーとは、ロボットが）ります。OGPタグの設定をキャッシュして去っていく動きがあります。制作途中で、シェア機能を確認したいときはキャッシュクリアをすることを忘れずに行いましょう！このキャッシュクリアについて、後述でも説明します。シェアボタンは各SNS会社のAPI（シェアするための機能）の呼び出しになりますので、各サービスの利用規約による縛りがあります。サービスによってはSNSボタンのデザインやロゴアイコンなどの使い方や、利用可能な文言などにも制約が加えられている場合があります。
制作するサイトの世界観を表現（デザイン重視）するため、シェアボタンに独自のアイコンを使ったりすると、利用規約に違反することもあります。注意が必要です。

SNSシェアボタン設置後に気をつけること

シェアボタンを実装することで、SNSのクローラーがOGPタグの内容をキャッシュします。特にFacebookは、意図的にキャッシュクリアを行わない限り簡単にキャッシュが消えません。
キャッシュクリアの申請をしないと、シェアする際に自動で表示される画像が反映されなかったり、404NotFoundになったりする場合があります。

◆キャッシュクリアの申請方法

(1) Open Graphオブジェクトデバッガーへアクセスします。

Open Graphオブジェクトデバッガー

(2) Fetch new scrape information（Open Graphオブジェクトデバッガー）をクリック

(3) Facebookが認識しているOGPタグ表示される

OGPタグの最新内容が表示されていれば大丈夫です。

まとめ

私も調べてみて実際に今作っているWEBページで試してみてやっと理解できました。WEBサイトづくりをする制作会社でも、シェアボタン設置に関しては、意外に抜けがちだったり、OGPタグの設定まで気が回らなかったりすることがあるようです。サイトアクセスを増やしたり、SNS効果を最大化するためにも仕組みを理解しておくと困らないと思いました。