※こちらはRetty Advent Calendar 2016、8日目の記事です。
こんにちは。
RettyでWEBエンジニアをやっている、ヨシダです。
ただでさえ年の瀬で忙しいと言うのに、今日もEXCELの関数が分からないとかWiFiがつながらないとか、PCに関するぜんぜん専門じゃないことを聞かれて・・・エンジニアって難儀な商売ですね。
だからと言って、専門分野で何回も同じことを聞かれるのも難儀です。
ということで今年、持ち込み・相談が多かったSNSシェア周りについて記事にしておき、今後はこのURLを投げつけようと思います！
では、最後までおつき合いくださいm(_ _)m
シェアボタンの種類
ひとくちにシェアボタンと言っても、目的によっていくつかの種類があります。
目的別に分類してみると・・・
- SNSで拡散
- 限られた人に伝達（ダイレクトメッセージ）
- LINE
- Slack
- 主に自分のため（ソーシャルブックマーク）
こんなところでしょうか。
これで憎いアイツやアイツがシェアシェア言ってきたら、ここ理解してから出直してこいって言えますね（笑）
本当に、ブログを書く機会があって良かった(^o^)
せっかくなので、もう少し設定について書いてみようと思います。
このうち2.と3.については「拡散」という目的から外れるため、作成ツール/リファレンスのURLのみ記載し、詳細は割愛します。
その他にもPinterestやInstagramなどの画像SNSもありますが、こちらは画像に特化していたり自身の投稿が中心だったりと、少し目的が異なるため、こちらも割愛します。
SNSシェアの基本
FacebookやTwitterなどは、貼られたURLの情報を自動的に取得します。
特に何もしなければ、ページのタイトル、文章の冒頭、一番上にある画像等をつなぎ合わせ、適当にテキトーに表示してくれます。
これでは誰も拡散してくれませんね（笑）
コンテンツを整備して、FacebookやTwitterに提供する情報を最適化しましょう。
OGP情報を用意する(Facebook向け)
FacebookはOGP(Open Graph Protcol)に準じた情報を使って、狙い通りの形でコンテンツを表示してくれます。
ページにOGP情報を設定すると、こんなに素敵なPOSTになります。
（余談ですが、吉田が今年行ってよかった！お店です）
具体的には「タイトル」「内容」「メイン画像」を設定しています。
HTMLタグはこんな感じです。
<head>
<!-- 中略 -->
<meta property=og:url content="https://retty.me/area/PRE13/ARE7/SUB701/100001296918/"/>
<meta property=og:title content="飲茶倶楽部 | Retty(レッティ)"/>
<meta property=og:image content="https://img.retty.me/img_repo/l/01/8757426.jpg"/>
<meta property=og:description content="【便利なルート地図つき】恵比寿エリアの「飲茶倶楽部」は美味しい中華のお店です。さらに詳しい情報は実名口コミが集まるRettyで。"/>
</head>
Twitterカードの情報を用意する
上記OGP同様、Twitterが解釈する「Twitterカード」という仕組みがあります。
先程のOGP情報の下に、Twitterカードの情報も加えてみましょう。
（はじめてカードをつくった際に、Twitterへのドメイン登録が必要です）
<head>
<!-- 中略 -->
<meta name=twitter:card content=summary_large_image>
<meta name=twitter:site content="@Retty_jp">
<meta name=twitter:url content="https://retty.me/area/PRE13/ARE7/SUB701/100001296918/">
<meta name=twitter:image content="https://img.retty.me/img_repo/l/01/8757426.jpg"/>
<meta name=twitter:title content="飲茶倶楽部 | Retty(レッティ)">
<meta name=twitter:description content="【便利なルート地図つき】恵比寿エリアの「飲茶倶楽部」は美味しい中華のお店です。さらに詳しい情報は実名口コミが集まるRettyで。">
</head>
Facebook同様、ページの情報が正しく表示されました。
本当に美味しそうです。
おまけ - Rettyではこうしてる
Rettyでは、情報拡散の前に必ずあることをしています。
それは「秘密のグループ」での記事の事前投稿！
ここにはデザイナーやエンジニアが多く参加していて、
表示の不具合や、内容の間違いなどは、必ずここで検知するようにしています。
また、部署をまたいだメンバーにも「こんなことやるんだ！」と、情報共有の意味でも有用です。
ぜひ「秘密のグループ」も活用してみてください。
クリスマスまであと17日、明日の記事もお楽しみに！
メリークリスマス🎄