Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
知っているようで知らないOGPの書き方
Search
もなか
October 23, 2021
Technology
0
390
知っているようで知らないOGPの書き方
2021年10月16日㈯に、もりけん塾の勉強会で登壇した際に使用したスライドです。
もなか
October 23, 2021
Tweet
Share
More Decks by もなか
See All by もなか
辛いコードを甘くするカリー化のレシピ
443n0511
0
760
Other Decks in Technology
See All in Technology
エンジニア向け技術スタック情報
kauche
1
270
Witchcraft for Memory
pocke
1
440
フィンテック養成勉強会#54
finengine
0
180
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
550
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
320
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
30
11k
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
260
How Community Opened Global Doors
hiroramos4
PRO
1
120
A2Aのクライアントを自作する
rynsuke
1
190
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
400
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
1k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Facilitating Awesome Meetings
lara
54
6.4k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
How GitHub (no longer) Works
holman
314
140k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
GitHub's CSS Performance
jonrohan
1031
460k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A Tale of Four Properties
chriscoyier
160
23k
Transcript
知っているようで知らない OGPの書き方 もりけん塾勉強会
自己紹介 OGP is 何? OGPをしないとどうなる? OGPを使うには まとめ 1. 2. 3.
4. 5. アジェンダ
自己紹介
自己紹介 もなか@js 詰まったらパン作る人 ソフトウェア開発会社でテスター兼コーダーとして勤務 パンを焼くのが好き ▶Twitter:@ruby443n
OGP is 何?
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 より
これ
OGPをしないとどうなる?
OGP設定しないとこうなる 中身がわからないからリンクを押しずらい
OGP設定するとこうなる 中身がわかるからリンクを押したくなる
結論:絶対設定するべき
OGPをつかうには
OGP基本設定 こちらを<head>タグ内に設置
OGP基本設定”og:title” サイトのタイトルを指定 og:titleに<title>タグと別の言 葉を設定すると、そちらが優先 して表示される。 文字数は20文字以内が適切。
OGP基本設定”og:url” WEBページのURLを指定 URLは相対パスではなく絶対 パスで記述
OGP基本設定”og:type” website: WebサイトTOPページ blog: ブログTOPページ article: 記事ページ等のページ product: 製品紹介ページ
OGP基本設定”og:description” 60〜80文字の概要説明を設定
OGP基本設定”og:image” シェア時に表示する画像を指定 こちらも絶対パスで指定 基本サイズは幅1200px高さ630px
OGP画像シュミレーターが便利
OGP画像シュミレーターが便利
Twitter用設定"twitter:card" summary_large_image summary
Twitter用設定"twitter:card" player ビデオやオーディオなどのメディアを表示できるカード app アプリ配布用の表示カード。 アプリの名前や紹介文、アプリアイコンに加えて、評価や 価格などの表示もされる。
Facebook用設定"fb:app_id" Facebookインサイトを使 ってトラフィックの分析を 行うことができる。 Facebook for Developers の登録が必要
まとめ
OGP、ちゃんと設定して クリック率をのばそう!
OGPを設定するメリット SNSでクリックされやすい 画像が表示されることでタイムラインの専有 面積が大きくなる
OGPを設定するメリデメ
OGPを設定するデメリット 設定するのちょっとめんどくさい
自己紹介 OGP is 何? OPPをしないとどうなる? OGPを設定するメリデメ OGPを使うには まとめ 1. 2.
3. 4. 5. 6. アジェンダ