SNSの基本的な考え方
OGP（Open Graph Protocol）
シェアデバッガー/カードバリデータ
OGPの記述方法
Facebook用OGPでサムネイル画像の注意点
Facebookプラグイン
Twitterプラグイン
仕組みの連携

「Webサイト制作のワークショップ」のメモです。

SNSとの連携というのは、WebサイトにSNSボタンを埋め込むという技術的なものだけではなく、マーケティング的な意味合いとしてWebサイトとSNSがうまく回っていく仕組みづくりのこと。

enjoy!

SNSの基本的な考え方

Webで起こったことはWebで盛り上がってWebで完結する。Webの出来事が人のリアルな行動にまで繋がっていくことは非常にまれ。

Facebookの投稿はFacebookの中でのみシェアされ、TwitterのツイートはTwitter上でリツイートされる。プラットフォームごとのSNS運営が大切。

人は一番近くにある簡単な方法で目的を達成する。SNSボタンを設置して動線づくりをすることで、情報を共有したいという目的を達成しやすくする。

投稿のわかりやすさは大切。伝わる言葉を選んで投稿する。カタコトのクールな投稿はNG。コメントへの返信も、その対応の仕方を多くの人が見ている。あらゆる接点でSNSアカウントは評価されている。

投稿の内容は正直に。ネガティブなコメントも共感を呼んでリアルさが出ることもある。

SNSは何かしら共通点を持った人同士がつながっているが、自分のFacebookのニュースフィードと友達のニュースフィードの内容は全く雰囲気が違うことがある。

「雑誌に掲載されました」「ポータルサイトに取り上げられました」というだけのアカウントは、純粋なファンに対してもゴールを示せていないためNG。ここでも成功体験が重要。成功体験のないところに人はリピートしない。

OGP（Open Graph Protocol）

WebページがSNSでシェアされた場合に、こちらの意図した画像やテキストが表示されるようにするための設定。主にFacebookとTwitter用。

シェアデバッガー/カードバリデータ

実際にシェアされた場合にどんな表示になるかを確認できるツール。

シェアデバッガー｜Facebook for Developers

Card validator｜Twitter Developer

OGPの記述方法

html の headタグ内に metaタグを記述する。

// 共通項目
<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの概要" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:type" content="ページのタイプ｜article、website など" />
<meta property="og:sitename" content="サイト名" />

// Facebook用
<meta property="fb:appid" content="App ID" />
<meta property="article:publisher" content="FacebookページのURL" />

// Twitter用
<meta name="twitter:card" content="Twitterカードの種類｜Summary Card、Photo Cardなど" />
<meta name="twitter:site" content="@Twitterアカウント名" />
<meta name="twitter:title" content="ページのタイトル" />
<meta name="twitter:description" content="ページの概要" />
<meta name="twitter:image" content="サムネイル画像のURL" />
<meta name="twitter:url" content="ページのURL" />