知っているようで知らないOGPの書き方

2021年10月16日㈯に、もりけん塾の勉強会で登壇した際に使用したスライドです。

Transcript

1. 知っているようで知らない OGPの書き方 もりけん塾勉強会
2. 自己紹介 OGP is 何？ OGPをしないとどうなる？ OGPを使うには まとめ 1. 2. 3. 4. 5. アジェンダ
3. 自己紹介
4. 自己紹介 もなか@js 詰まったらパン作る人 ソフトウェア開発会社でテスター兼コーダーとして勤務 パンを焼くのが好き ▶Twitter:@ruby443n
5. OGP is 何？
6. OGPとは？ "The Open Graph protocol enables any web page to become a rich object in a social graph." 任意のWebページをソーシャルグラフ内のリッチオブジェクトにすることを可能 にするものです。 ”The Open Graph protocol was originally created at Facebook” もともとFacebookで生まれたものです。 公式サイト https://ogp.me/#metadata より
7. これ
8. OGPをしないとどうなる？
9. OGP設定しないとこうなる 中身がわからないからリンクを押しずらい
10. OGP設定するとこうなる 中身がわかるからリンクを押したくなる
11. 結論：絶対設定するべき
12. OGPをつかうには
13. OGP基本設定 こちらを<head>タグ内に設置
14. OGP基本設定”og:title” サイトのタイトルを指定 og:titleに<title>タグと別の言 葉を設定すると、そちらが優先 して表示される。 文字数は20文字以内が適切。
15. OGP基本設定”og:url” WEBページのURLを指定 URLは相対パスではなく絶対 パスで記述
16. OGP基本設定”og:type” website: WebサイトTOPページ blog: ブログTOPページ article: 記事ページ等のページ product: 製品紹介ページ
17. OGP基本設定”og:description” ６０〜８０文字の概要説明を設定
18. OGP基本設定”og:image” シェア時に表示する画像を指定 こちらも絶対パスで指定 基本サイズは幅1200px高さ630px
19. OGP画像シュミレーターが便利
20. OGP画像シュミレーターが便利
21. Twitter用設定"twitter:card" summary_large_image summary
22. Twitter用設定"twitter:card" player ビデオやオーディオなどのメディアを表示できるカード app アプリ配布用の表示カード。 アプリの名前や紹介文、アプリアイコンに加えて、評価や 価格などの表示もされる。
23. Facebook用設定"fb:app_id" Facebookインサイトを使 ってトラフィックの分析を 行うことができる。 Facebook for Developers の登録が必要
24. まとめ
25. OGP、ちゃんと設定して クリック率をのばそう！
26. OGPを設定するメリット SNSでクリックされやすい 画像が表示されることでタイムラインの専有 面積が大きくなる
27. OGPを設定するメリデメ
28. OGPを設定するデメリット 設定するのちょっとめんどくさい
29. 自己紹介 OGP is 何？ OPPをしないとどうなる？ OGPを設定するメリデメ OGPを使うには まとめ 1. 2. 3. 4. 5. 6. アジェンダ