バズを呼び込む！SPAサイト向けSNSマーケティング対策まとめ
WEBZINNEトピックス編集部公開日：2020年4月24日
SPAサイトでページをよりシェアしてもらいやすくする方法からSNS栄えするSPAの設定方法、バズった時の対応など、SPAサイトに特化したSNSマーケティング対策をまとめました。
OSのシェア機能を利用してシェアしやすくしよう
SPAの場合、PWAでインストールして利用してもらうケースも含めスマホで見られることが多いため、シェア用リンクをページ内に書くよりも端末のOSに搭載されているシェア機能（Web Share API）を利用した方がユーザーフレンドリーです。
シェアリンクを書く場合と、OSシェア機能（Web Share API）を使うケースではかなりUXが変わります。
| シェアリンク | OSシェア機能 | |
|---|---|---|
| 表示されるシェア先 | こちらが書いたもの | ユーザーが持っているアプリ |
| シェア先の変更 | ページ内のリンクを変更 | 不可能 |
| 挙動 | ページ遷移 | シェア画面から各アプリに遷移 |
| シェア後の挙動 | リンク先に移動 | SPAに戻る |
自身で書いたシェアリンクは、
- シェアの方法が限られている（リンクを書いたものだけになる）
- ユーザーがそのシェア先のアカウントを持っているかわからない
- シェアしたらそのまま離脱する可能性が高い
というデメリットがあります。
一方で、OSのシェア機能を呼び出すケースでは、
- OS側でシェア先として設定している全てのアプリにシェアができる
- ユーザーが持っているアプリだけがシェア候補として出てくる
- シェア後にそのままSPAサイトに滞在してれる
- リンクでのシェアに対応していないアプリにもシェアできる（メールなど）
というメリットがあります。
SPAでのSNSマーケティングを考えた時に、「いかに素早く・手軽にシェアしてもらえるか？」が非常に大事になるため、OSのシェア機能を利用しない手はありません。
Web Share APIをSPAから呼び出す「navigator.share()」の使い方
OSのシェア機能は、JavaScriptの「navigator.share()」から呼び出すことができます。
const shareData = {
title: 'SPAサイトにおけるSNSマーケティングを考える',
text: 'SPAサイトでページをよりシェアしてもらいやすくする方法からSNS栄えするSPAの設定方法、バズった時の対応など、SPAサイトに特化したSNSマーケティング対策をまとめました。',
url: 'https://www.webzinne.com/topics/6icem8/',
}
if (navigator.share) {
navigator.share(shareData)
} else {
if (this.onError) {
this.onError('Web Share not supported');
}
}
「navigator.share」は、現行のスマホ向けブラウザであれば、
- Android webview
- Android 版 Firefox
以外には対応しているので、対応ブラウザレンジが広いため、スマホ向けには比較的機種依存を気にせず使えます。
Web Share APIのデメリット
Web Share APIを利用する際に気をつけたいデメリットは「未対応ブラウザ」です。
スマホブラウザについてはほぼほぼ対応されていますが、デスクトップ版は実質macOS Safariのみです。
SPAサイトに訪問するユーザーのほとんどがスマートフォン経由であるのであれば問題ありませんが、PC経由のユーザーがある程度ある場合は、通常の「リンクタイプのシェアボタン」も用意しておかないと、PCユーザーが気軽にシェアできなくなってしまいます。
SNSのクローラーを対策を完璧にしよう
SPAでコンテンツをシェアしやすい状況にできたら、SNSでいかに魅力的に見せるかが次の課題です。
OGPタグしっかりと入れる
OGPは、SNS側にページ情報を与えるHTMLのタグです。
SNSでリンクなどがシェアされた時に、ページの見栄えが変わってくるため、SNSマーケティングを考えた時には必須の設定項目です。
SPAの場合、動的に変更させることを忘れないようにしましょう。
SNSクローラーがOGPを動的に読めるようにする
SPAのSNSクローラー対策で一番の難関がここです。
SPAはJavaScriptで動的にページ変更させますが、SNSのクローラーはJavaScriptを解釈できるものがありません。現状、JavaScriptが解釈できるクローラーはGoogleボットくらいです。
つまり、SNS向けにはOGPをページごとに動的に変更したHTMLを用意する必要があります。
SPAフレームワークによっては、HTMLファイル出力機能を搭載しているものもあるため、そちらを利用するのも手です。
ただし、ページ数が1000ページくらいの規模だと問題ありませんが、ページ数が万単位のSPAサイトでは、HTMLファイル出力機能を利用するのは現実的ではありません。
サーバーレスでSNSクローラー対策
SNSクローラー対策の一例ですが、「Firebase Functions」や「Netlify Functions」などのサーバーレスサービスの機能を使って、SNSボット向けの対応をすることができます。
詳しい技術的な解説は省略しますが、
- トップページ以外のパスへのアクセスでFunctionsを起動
- APIなどからOGPに関するデータを引っ張ってきて、個別OGPを入れたHTMLを返却
- JavaScriptが実行できる環境ならルートパラメータ付きでSPAトップにリダイレクト（後にSPAでルーティング）
という感じにすることで、ユーザーとSNSクローラー両方に対応ができます。
ポイントは、
- SNSクローラーはOGPヘッダー以外を解釈しない(OGPヘッダーだけあれば良い)
- ユーザーはJavaScriptが実行できるのでSPAに処理を任せる
という点でしょうか。
この方法のデメリットはコストで、イベントトリガー系のサーバーレス機能は有料かつ従量課金が多いので、予算と相談して実装ということになるでしょう。
バズった時のことを考えておく
シェアしやすく、SNS映えも対応ができたら、次はアクセス負荷対策です。
SNSやGoogle Discoverなど、一時的に大量のアクセスが来るいわゆる「バズった」状況の場合、サーバーにかなりの負荷がかかります。SPAサイトの場合、通常のページよりもサイトデータが大きいため、しっかりと対応しておかないとすぐにサーバーがダウンしてしまいます。
フロントエンドの対策
SPAの場合、コンテンツはAPIに分離されていることが多いため、フロントエンド側の対策は「静的コンテンツの配信負荷を下げる」点につきます。
SPAにおけるフロントエンドの対策は主に二つです。
- Service WorkerでSPA関連ファイルをキャッシュ
- CDNでサーバー負荷を軽減
Service Workerについては、一度SPAサイトに訪問してくれたユーザーにしか効果がありませんが、きちんとService Workerを管理さえできれば誰も損することがないので設定しておくべきでしょう。
CDNについては、無料どころで言えば、CloudFlareが使いやすくおすすめです。
バックエンド（API）の対策
こちらは、ほとんどが動的に対応するところなので、
- サーバー処理をうまく軽減せる
- サーバーを動的に増強する
くらいしか対策がありません。
どちらも利用できるという点では、APIはクラウドやサーバーレスサービスを利用するのが手っ取り早いでしょう。本当に動的な対応が必要かを再考して、更新頻度の低いものは静的ファイルで配信するのもバックエンドサーバーの負荷軽減に繋がります。
また、バズの規模が大きく・長いようなケースでは、サーバー負荷が耐えられない・サーバーコストが増大するということもあり得るので、CDN側で一時的に「全てのアクセスをキャッシュしてしまう」のも手です。
SNSからの会員獲得フローを考えよう
SNSでシェアされたリンクを見るユーザーは、多くが一見さんなので会員になってくれる確率が非常に低く、マネタイズが難しいユーザーです。
しかし、SNSは大量のユーザーを運んでくれるのでしっかりと会員獲得フローを考えましょう。
SNSでシェアされるようなコンテンツ（記事ページなどの）には会員登録に関する情報が少なくなりがちなので、アクセス解析をしっかりして、SNSユーザーがランディングするページには会員登録の導線を貼りましょう。
SPAサイト向けSNSマーケティング対策を見てきました。
基本的には、SNSマーケティングの基本通りですが、SPAがHTML + JavaScriptという構造ゆえの課題があることがわかります。
どれも、技術的に難しい対策ではありませんが、意外と見落としがちなポイントで、しかもサイトを構築する前の段階からしっかりと組み込む必要があるものばかりです。
SNSマーケティングを前提としたSPAサイト構築する際には、企画段階からこれらのポイントをしっかりと入れておくと良いでしょう。