WordPressのOGP設定とSNSでの見え方について

1
WordPressのOGP設定と
SNSでの見え方について

2
自己紹介
Facebook:https://www.facebook.com/michiro.sakamoto
Webサイト（ブログ）：http://site316.com（坂本倫朗のサイト）
自己紹介：UNITY、Adobe AIRによるスマートフォンアプリ開発を
している。フリーで仕事をしているせいか「起業をしたい」という人に
しょっちゅう話を聞かれ、「WordPressでサイトを作ると良いよ！」と
答えているうちに、自分もWordPressの勉強をするようになって
しまった。
Twitter:@sakamotomichiro

3
OGPって何？
正式名称は、”Open Graph Protocol”

4
何をするもの？
SNSでリンク共有を
したときに、
整形された形で
キレイに
表示されます。

5
どんな設定をする？
metaタグとして記載します。

6
例
こんなのです（見えなくてすみません）

7
OGPのプロパティの説明
“og:title” ページの名前
“og:type” ページが何のページであるか(blog, website,
cafe, hotel, restaurantなど)
“og:url” ページのURL
“og:image” サムネイル画像のURL
“og:site_name” サイトの名前
“og:description” ページの説明文。facebookで
ページタイトルの下に表示される。

8
Twitter のOGPは独自仕様（Twitter Cards）
“twitter:card” カードの種別を指定(summary,
summary_large_imageなど)
“twitter:description” ページの説明文
“twitter:url:url” ページのURL
“twitter:image” サムネイル画像のURL

9
WordPressにOGPを追加する方法

10
（１）header.phpに記述する

11
（１）header.phpに記述する
初心者には抵抗がある
X

12
（２）プラグインを使って設定をする
All in One SEO Pack
https://ja.wordpress.org/plugins/all-in-one-seo-pack/

13
設定方法(1/6)
管理画面で
All in One SEO>Feature Managerを選択

14
設定方法(2/6)
Feature Managerのセッティングで、
Social MetaをActivateに設定する。
Activateを押す

15
設定方法(3/6)
管理画面でAll in One SEO>Social Metaを
選択

16
設定方法:Facebookの設定(4/6)
Facebookの設定
①Facebookで自分のページを表示した時に表示されるものを記載する。
②Facebookのgraph-apiで取得したapp_idを記入する。
https://developers.facebook.com/graph-api

17
設定方法:Twitterの設定(5/6)
Twitterの設定
①シェアした時の画像サイズを選べる。
　Summary/ Summary Large Imageのどちらか
③Twitter Card上のコンテンツを作成者としてユーザー名で区別する。
②、④は省略可

18
設定方法:ScanSocialMeta(6/6)
メタタグが重複してないかチェックできる。
重複していなければ、以下のように表示される。

19
OGPに関するmetaタグが生成される

20
リンクを共有すると、こうなる
<meta property="og:description"
content="WordPressもくもく勉強会
第１２回 in CoEdoについて。">
<meta property="og:title"
content="WordPressもくもく勉強
会第１２回 in CoEdoでライトニン
グトークをやります。">
<meta property="og:image"
content="http://site316.com/wp-
content/uploads/2016/03/26NJ_mi
nnanisetumeisurukoukei_TP_V_thu
mb.jpg">

21
og:imageの画像サイズ
<meta property="og:image"
content=”http://site316.com/test/sample.jpg">
・画像はpngまたはjpg（png推奨）
・サイズは1200x640を推奨
・最低でも 600×315
・最小サイズは 200×200

22
og:imageに1200x640の画像を登録
各SNSでどのように見える
か比較しました。
・FaceBook
・Google+
・LINE
・Twitter
投稿された記事

23
Facebookではこのように見える
コメント欄のリンクは
このサイズになる。

24
google+ではこのように見える
コメント欄のリンク
だと画像は出ない。

25
LINE(iPhone)ではこのように見える
2016年3月現在の
仕様では、OGPを含む
リンクの投稿は
２分割される。

26
LINE(Android)ではこのように見える
Android4.2.2、
更新済みのLINEで
表示されなかった
（みなさんもそうで
しょうか？）

27
Twitterではこのように見える
<meta
name="twitter:card"
content="summary_la
rge_image">
<meta
name="twitter:image"
content/uploads/2016/03/26NJ_mi
nnanisetumeisurukoukei_TP_V.jpg"
>

28
og:imageに200x200の画像を登録
これも、各SNSでどのよう
に見えるか比較しました。
・FaceBook
・Google+
・LINE
・Twitter
投稿された記事

29
Facebookではこのように見える
全然違う画像（サイ
トのTOP画像）が
貼り付けられた。

30
google+ではこのように見える
120x120で表示され
る。

31
LINE(iPhone)ではこのように見える
小さい画像が引き伸ばされて
表示される。

32
Twitterではこのように見える
<meta
name="twitter:card"
content="summary_larg
e_image">
<meta
name="twitter:image"
content/uploads/2016/03/small.jpg">
小さい画像が引き伸ば
されて表示される。

33
まとめ
画像のサイズは1200x640のpngを
推奨。
小さい画像をOGPのサムネイルに指定するのは、
汚いし小さいし、勝手に変えられるしで、
いいことなかった。

34
おしまい
　　　　　ありがとうございました。
Twitter:@sakamotomichiro

WordPressのOGP設定とSNSでの見え方について

Recommended

Recommended

More Related Content

Similar to WordPressのOGP設定とSNSでの見え方について

Similar to WordPressのOGP設定とSNSでの見え方について (20)

WordPressのOGP設定とSNSでの見え方について