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
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
170
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
190
Connect 100+を支える技術
kanyamaguc
0
180
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
11k
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.2k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
170
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
260
ドメイン特化なCLIPモデルとデータセットの紹介
tattaka
2
560
asken AI勉強会(Android)
tadashi_sato
0
160
How Community Opened Global Doors
hiroramos4
PRO
1
140
Model Mondays S2E03: SLMs & Reasoning
nitya
0
320
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
1
210
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Unsuck your backbone
ammeep
671
58k
How GitHub (no longer) Works
holman
314
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
A better future with KSS
kneath
239
17k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Designing Experiences People Love
moore
142
24k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
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. アジェンダ