SNSでURLを投稿するときに出るサムネイルの設定した話

こんにちは

4月になっていろいろな変化があるでしょうか。
環境や生活が大きく変わることが多い時期ですね。

偏食気味だったので、 食生活の見直しを考えている武田です。

見直しといえば、昨年11月のリニューアルからもうすぐ半年になるため、
muku.のサイトもいろいろな点を見直して、改善を企画しています。

その中でも比較的すぐに対応できるところで、
OGPの設定を見直したました。
今回はそのことについて紹介したいと思います。

以前からOGPの設定はしてあったのですが、
muku.ではFacebook用の設定がされていませんでした。

OGPって何??

OGPはSNSなどでURLを入力した際に、表示されるサムネイルのようなアレのことです。

サムネイルのようなアレ

OGPには画像や、タイトル、URL、アイキャッチ画像などが表示されます。
OGPが表示されることで、画像やテキストによって、クリック率が上がります。

TwitterやFacebookなどで画像や動画が添付されていると、
本文を読む前についつい開いてしまいますよね。

OGPを設定するには

OGPをページに設定するには、コードを<head>内に記述します。
まずは基本のコードの紹介です。

og:title

ページのタイトルを設定します。
基本は<title>と同様の内容でOKです。
<title>と違う内容を記述すれば、OGPで表示される際は、
og:titleに記述した内容が表示されます。

og:type

ページのタイプを設定します。
記事やサイトのページなど様々な設定ができます。

タイプ一覧を紹介しているサイトがありましたので、リンクを置いておきます。
http://www.inventory.co.jp/labo/facebook/facebook-open-graph-protocol-ogtype.html

og:url

ページのURLを設定します。
絶対パスで設定してください。

og:image

OGPが表示される際の画像を設定します。
こちらも絶対パスでの設定となります。

muku.noteでは、前回紹介したアイキャッチ画像を自動で設定するようになっています。
WordPressでアイキャッチを自動で設定する話

og:description

ページの概要を設定します。
OGPが表示される際、表示されます。

以上で基本設定はOKです。

SNS用の設定

ここからはFacebookとTwitter用の設定を紹介します。

Facebook用の設定

FacebookのアプリIDを使用して、Facebook用の設定をします。
他にも管理IDを使う方法がありますが、
個人のアカウントに紐付いてしまうなどの理由からあまりオススメではないようです。

アプリIDの取得・確認は、下記のサイトがわかりやすく解説してありました。
https://www.iscle.com/web-it/facebook-app-id.html

Twitter用設定

Twitterでは、Twitter上に表示されるOGPを「Twitterカード」と呼んでいます。
TwitterカードではOGPを様々な表示の仕方を設定できます。

Twitterカードはtwitter:cardで設定できます。

カードタイプの種類はTwitter公式で紹介されています。
https://dev.twitter.com/cards/types.html

Twitterアカウントは@で始まるアカウント名を設定します。

SNSからの流入を意識した設計を

SNSの普及率は昨年の段階で70%近くだとか。
フライヤーなどの印刷物からWebサイトへの流入だけでなく、
SNSなどからの流入も意識したサイト設計が必要となっています。

URLをSNSに投稿したりなどする場合は、ぜひOGPの設定をしてみてはいかがでしょうか。

ではまた!

この記事を書いた人

武田 ヒロキ

Webデザイナー/ディレクター Web関連をメインに担当しています。データにちょっとうるさい。 ドアを開けるときは右手で開けて右手で閉める派