Save 37% off PRO during our Black Friday Sale! »

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

03e869e0b971213c12889635e29e0aae?s=47 もなか
October 23, 2021

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

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

03e869e0b971213c12889635e29e0aae?s=128

もなか

October 23, 2021
Tweet

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” 60〜80文字の概要説明を設定

  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. アジェンダ