合同会社バックアップ
Blog

ブログ

アプリのページ・コンテンツをSNSでシェアさせたいときの注意点と、「OGP」設定のすすめ

アプリで失敗しないためのポイント
2022.03.11
Contents
目次を非表示

    iOS/Android アプリの機能を企画・検討している際には、主要な SNS でコンテンツやアプリそのものをシェアできる機能がよく要望として挙げられます。

    シェア機能を作る場合は、各 SNS でどんな風にシェアできるのかという仕様の把握と、OGP の設定が必要になります。

    そこで、本記事ではアプリの新規企画またはリニューアルを検討されている事業部門の担当者様向けに、「SNS シェア機能」を実装する際に知っておくべき知識をまとめています。

    1. 「SNS シェア」機能のメリットと、検討・実装される背景

    近年では

    • Web 広告費用相場の高騰 = ユーザー獲得コストの増加
    • 広告の信頼性に対する顧客の疑念 = UGC への注目の高まり

    という背景によって、iOS/Android アプリを開発する際には「ユーザーがアプリを使っている最中に SNS でシェアする機能を作ろう」という話が挙がることが増えています。

    UGC (User-Generated Content) とは?
    企業ではなく、ユーザーによって作られたコンテンツ。主にレビューなど広告・PR 効果を持つものを指すことが多い。

    企業がコントロールしづらく、内容の信頼性が高いため、広告よりも UGC を参考に購買行動を起こすユーザーも増えている。自社サイト、他社プラットフォーム、SNS 上などに(好意的な)UGC が生成されやすい仕組みをつくることで、認知獲得効果に加えて売上にも貢献することが期待される。

    ライフラインと化している LINE はすべての世代に普及しており、Twitter・Instagram も 20〜40 代中心に幅広く定着しているため、iOS/Android アプリの PR を考える際には切り離せません。

    一方で、「各 SNS にシェアする」という機能を実装する際には、開発チームやベンダーが把握しておくべき技術的な知見に加えて、

    • どのプラットフォームで、どんな形式でのシェアができるのか(規制・仕様)
    • シェアされるときの見せ方(デザイン)

    を事業部門やマーケティング担当者でしっかりと把握し、開発者に依頼することが必要になります。

    2. SNS シェア時にアプリ側で設定できるコンテンツ(規制とルール)

    アプリに SNS シェア機能を組み込む場合は、開発者だけでなく企画者・事業部門の担当者の方も各プラットフォームで規制があることを認識しておく必要があります。

    iOS/Android 両システムで、アプリから SNS にシェアできるものは下記のようになっています。

    Platform シェアできるもの
    FaceBook Link(URL)のみ
    Instagram 画像のみ
    Twitter テキスト、画像、Link(URL)、ハッシュタグ
    LINE テキスト、Link(URL)

    Facebook および Instagram(運営は同じ)では、開発者に対するルールとして「企業側が事前にコンテンツを用意してはいけない」と書かれています。

    共有を実装する際、アプリは共有されるコンテンツを事前に入力してはいけません。これは、Facebookプラットフォームポリシーと矛盾します(「デベロッパーポリシー」を参照)。
    出典:Meta for Developers

    ですので、Meta 社が運営する二大プラットフォームでは、「スコア」「結果」「金額」などのテキストをシェアしたり、アプリを SNS でシェアする際の文言を事前に設定しておくことはできません。

    もちろん、ユーザーがシェアする際にリンクや画像のみを投稿するしかないわけではなく、ユーザー自身が「私のスコアは○○でした」「このアプリはシェアして宣伝したい!」「みんなにおすすめ!」というコメントを加筆してくれれば UGC としては成立します。

    一方で、Twitter は規制が少ないため、たとえば診断系のコンテンツの結果をSNS でシェアする際にはデフォルトで「私は○○でした! あなたもアプリで診断してみよう! #○○診断」といった文言とハッシュタグを設定しておくことができます。

    3. リンクをシェアさせる場合は OGP を設定しよう

    アプリに限らず Web でも同様ですが、SNS でリンクをシェアする場合は「OGP」の設定が非常になります。

    OGP (Open Graph Protcol) とは?
    Facebook/Twitter などのタイムラインや LINE のトークメッセージ画面で Web ページのリンク(URL)をシェアした際に、タイトル・サムネイル画像・ページの説明文など伝えるための html 要素。meta タグでの事前設定が必要。

    OGP を正しく設定しておくと、SNS でリンクをシェアされた際に「どんなページなのか」が伝わりやすくなります。

    参考

    むしろ、IT リテラシーが高い層や若年層などは OGP がない場合にリンクのクリック率が下がる傾向にあります。

    Web サイトやアプリ内のページを SNS でシェアする際には

    • og:title(見出しとして表示されるタイトル)
    • og:description(ページの説明文)
    • og:image(画像)

    というパラメータが読み込まれます。他の必須パラメータも含め、

    <html lang="ja" prefix="og: http://ogp.me/ns#">
    <meta property="og:site_name" content="アプリやサービスの名前" />
    <meta property="og:url" content="シェアするリンクの URL" />
    <meta property="og:type" content="ページの種類" />
    <meta property="og:title" content="ページのタイトル" />
    <meta property="og:image" content="サムネイルにしたい画像の URL" />
    <meta property="og:description" content="どんなページなのかという説明文" />

    という meta タグがシェアさせたいページごとに設定されるように開発者に依頼し、正しく設定されているかを検証することが求められます。

    3-1. Twitter では専用の OGP タグ「Twitter Card」の設定も必要

    Twitter でリンクのみをシェアする際は、文言やハッシュタグに加えて「タイムライン上での見え方(デザイン)」も指定することができます。

    <meta name="twitter:card" content="(デザインの種類を指定)" />

    参考:Twitter Card 公式ドキュメント

    注意点: シェアする画像を指定した場合は、Twitter Card 設定済でも反映されません。 URL 単体、あるいは URL+テキストの場合のみ動作します

    カードの種類は

    • summary_large_image: 画像を大きく見せる形式(大きな画像とタイトル)
    • summary: 簡易的な形式(小さな画像とタイトルと説明文)
    • app: アプリを紹介する形式(アプリの情報とストアへのリンク)

    があり、アプリ型のカードにする場合は、

    <meta name="twitter:card" content="app">

    という OGP タグを挿入します。

    アプリ型のカードでは画像を大きく見せてシェアすることはできませんが、「アプリストアでの評価(平均点と件数)」「アプリストアへのリンク」をシェアしてもらうことができます。

    ユーザーの評価が高い場合は UGC として宣伝効果の高いものになるので、「SNS シェア」をマーケティング施策の柱にする場合はアプリストアでの評価も高めていきたいところです。

    関連記事:

    「とりあえずアプリを出そう」と動く前に…星1つのひどいストアレビューを減らすために重要なこと
    アプリは Web にはないリスクも多くひそんでいます。そこで、今回は iOS/Android アプリ開発を手がける BackApp だからこそ伝えたい、「とりあえず、で失敗しがちなパターンと、その回避策」をご説明します。
    続きを読む

    3-2. Twitter Card 設定後は検証ツールでのテストも不可欠

    Twitter はシェアのやり方が幅広い分、最も OGP のパラメータが多く、エラーも起きやすくなっています。一度設定した際には、公式の検証ツールを使ってテストしておくことをおすすめします。

    Card validator:
    https://cards-dev.twitter.com/validator

    ページの URL を入力すると、Twitter のタイムライン上での見え方がプレビューできます。

    もし OGP のタグが正しくセットされていなければ、エラーメッセージが表示されます。特に og:image(画像)は SNS 上での見え方に大きく影響を与える一方、うまく認識されずに「ハマる」ことも少なくないので、必ずテストしておきましょう。

    お手頃価格で簡単に自社アプリを開発~運用するなら
    img
    • 「自社アプリを考えているが、初期投資を抑えてまずは試してみたい」
    • 「LINE からの PUSH 配信で顧客と継続的に接点は作れているが、費用対効果が見合わなくなってきた」
    • 「安すぎるシステムだと動作速度や拡張性などが不安」

    といったお悩みを抱えている企業様に向けて、ノーコードでアプリを開発するサービス「PASTA」を展開しています。