Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1
WordPressのOGP設定と
SNSでの見え方について
2
自己紹介
Facebook:https://www.facebook.com/michiro.sakamoto
Webサイト(ブログ):http://site316.com(坂本倫朗のサイト)
自己紹介:UNITY、Adobe AIRによる...
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:im...
8
Twitter のOGPは独自仕様(Twitter Cards)
“twitter:card” カードの種別を指定(summary,
summary_large_imageなど)
“twitter:description” ページの説明文
...
9
WordPressにOGPを追加する方法
10
(1)header.phpに記述する
11
(1)header.phpに記述する
初心者には抵抗がある
X
12
(2)プラグインを使って設定をする
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://dev...
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もくもく勉強会
第12回 in CoEdoについて。">
<meta property="og:title"...
21
og:imageの画像サイズ
<meta property="og:image"
content=”http://site316.com/test/sample.jpg">
・画像はpngまたはjpg(png推奨)
・サイズは1200x6...
22
og:imageに1200x640の画像を登録
各SNSでどのように見える
か比較しました。
・FaceBook
・Google+
・LINE
・Twitter
投稿された記事
23
Facebookではこのように見える
コメント欄のリンクは
このサイズになる。
24
google+ではこのように見える
コメント欄のリンク
だと画像は出ない。
25
LINE(iPhone)ではこのように見える
2016年3月現在の
仕様では、OGPを含む
リンクの投稿は
2分割される。
26
LINE(Android)ではこのように見える
Android4.2.2、
更新済みのLINEで
表示されなかった
(みなさんもそうで
しょうか?)
27
Twitterではこのように見える
<meta
name="twitter:card"
content="summary_la
rge_image">
<meta
name="twitter:image"
content="http://...
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="http://...
33
まとめ
画像のサイズは1200x640のpngを
推奨。
小さい画像をOGPのサムネイルに指定するのは、
汚いし小さいし、勝手に変えられるしで、
いいことなかった。
34
おしまい
     ありがとうございました。
Twitter:@sakamotomichiro
Upcoming SlideShare
Loading in …5
×

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

1,989 views

Published on

WordPressのOGPをAll in One SEO Packで設定する方法と、それによってSNS上でのリンクがどのように整形されるかについて記載してあります。
※Custom Post Settingsの設定はOGPに関係無かったので削除しました(3/13)。

Published in: Engineering
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

  1. 1. 1 WordPressのOGP設定と SNSでの見え方について
  2. 2. 2 自己紹介 Facebook:https://www.facebook.com/michiro.sakamoto Webサイト(ブログ):http://site316.com(坂本倫朗のサイト) 自己紹介:UNITY、Adobe AIRによるスマートフォンアプリ開発を している。フリーで仕事をしているせいか「起業をしたい」という人に しょっちゅう話を聞かれ、「WordPressでサイトを作ると良いよ!」と 答えているうちに、自分もWordPressの勉強をするようになって しまった。 Twitter:@sakamotomichiro
  3. 3. 3 OGPって何? 正式名称は、”Open Graph Protocol”
  4. 4. 4 何をするもの? SNSでリンク共有を したときに、 整形された形で キレイに 表示されます。
  5. 5. 5 どんな設定をする? metaタグとして記載します。
  6. 6. 6 例 こんなのです(見えなくてすみません)
  7. 7. 7 OGPのプロパティの説明 “og:title” ページの名前 “og:type” ページが何のページであるか(blog, website, cafe, hotel, restaurantなど) “og:url” ページのURL “og:image” サムネイル画像のURL “og:site_name” サイトの名前 “og:description” ページの説明文。facebookで ページタイトルの下に表示される。
  8. 8. 8 Twitter のOGPは独自仕様(Twitter Cards) “twitter:card” カードの種別を指定(summary, summary_large_imageなど) “twitter:description” ページの説明文 “twitter:url:url” ページのURL “twitter:image” サムネイル画像のURL
  9. 9. 9 WordPressにOGPを追加する方法
  10. 10. 10 (1)header.phpに記述する
  11. 11. 11 (1)header.phpに記述する 初心者には抵抗がある X
  12. 12. 12 (2)プラグインを使って設定をする All in One SEO Pack https://ja.wordpress.org/plugins/all-in-one-seo-pack/
  13. 13. 13 設定方法(1/6) 管理画面で All in One SEO>Feature Managerを選択
  14. 14. 14 設定方法(2/6) Feature Managerのセッティングで、 Social MetaをActivateに設定する。 Activateを押す
  15. 15. 15 設定方法(3/6) 管理画面でAll in One SEO>Social Metaを 選択
  16. 16. 16 設定方法:Facebookの設定(4/6) Facebookの設定 ①Facebookで自分のページを表示した時に表示されるものを記載する。 ②Facebookのgraph-apiで取得したapp_idを記入する。 https://developers.facebook.com/graph-api
  17. 17. 17 設定方法:Twitterの設定(5/6) Twitterの設定 ①シェアした時の画像サイズを選べる。  Summary/ Summary Large Imageのどちらか ③Twitter Card上のコンテンツを作成者としてユーザー名で区別する。 ②、④は省略可
  18. 18. 18 設定方法:ScanSocialMeta(6/6) メタタグが重複してないかチェックできる。 重複していなければ、以下のように表示される。
  19. 19. 19 OGPに関するmetaタグが生成される
  20. 20. 20 リンクを共有すると、こうなる <meta property="og:description" content="WordPressもくもく勉強会 第12回 in CoEdoについて。"> <meta property="og:title" content="WordPressもくもく勉強 会 第12回 in CoEdoでライトニン グトークをやります。"> <meta property="og:image" content="http://site316.com/wp- content/uploads/2016/03/26NJ_mi nnanisetumeisurukoukei_TP_V_thu mb.jpg">
  21. 21. 21 og:imageの画像サイズ <meta property="og:image" content=”http://site316.com/test/sample.jpg"> ・画像はpngまたはjpg(png推奨) ・サイズは1200x640を推奨 ・最低でも 600×315 ・最小サイズは 200×200
  22. 22. 22 og:imageに1200x640の画像を登録 各SNSでどのように見える か比較しました。 ・FaceBook ・Google+ ・LINE ・Twitter 投稿された記事
  23. 23. 23 Facebookではこのように見える コメント欄のリンクは このサイズになる。
  24. 24. 24 google+ではこのように見える コメント欄のリンク だと画像は出ない。
  25. 25. 25 LINE(iPhone)ではこのように見える 2016年3月現在の 仕様では、OGPを含む リンクの投稿は 2分割される。
  26. 26. 26 LINE(Android)ではこのように見える Android4.2.2、 更新済みのLINEで 表示されなかった (みなさんもそうで しょうか?)
  27. 27. 27 Twitterではこのように見える <meta name="twitter:card" content="summary_la rge_image"> <meta name="twitter:image" content="http://site316.com/wp- content/uploads/2016/03/26NJ_mi nnanisetumeisurukoukei_TP_V.jpg" >
  28. 28. 28 og:imageに200x200の画像を登録 これも、各SNSでどのよう に見えるか比較しました。 ・FaceBook ・Google+ ・LINE ・Twitter 投稿された記事
  29. 29. 29 Facebookではこのように見える 全然違う画像(サイ トのTOP画像)が 貼り付けられた。
  30. 30. 30 google+ではこのように見える 120x120で表示され る。
  31. 31. 31 LINE(iPhone)ではこのように見える 小さい画像が引き伸ばされて 表示される。
  32. 32. 32 Twitterではこのように見える <meta name="twitter:card" content="summary_larg e_image"> <meta name="twitter:image" content="http://site316.com/wp- content/uploads/2016/03/small.jpg"> 小さい画像が引き伸ば されて表示される。
  33. 33. 33 まとめ 画像のサイズは1200x640のpngを 推奨。 小さい画像をOGPのサムネイルに指定するのは、 汚いし小さいし、勝手に変えられるしで、 いいことなかった。
  34. 34. 34 おしまい      ありがとうございました。 Twitter:@sakamotomichiro

×