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
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
430
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
570
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
300
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
150
Lambda Web Adapterについて自分なりに理解してみた
smt7174
6
160
Geminiとv0による高速プロトタイピング
shinya337
0
240
asken AI勉強会(Android)
tadashi_sato
0
180
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
800
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
110
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
6
4.1k
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
18k
AWS認定を取る中で感じたこと
siromi
1
170
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
It's Worth the Effort
3n
185
28k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Agile that works and the tools we love
rasmusluckow
329
21k
Gamification - CAS2011
davidbonilla
81
5.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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. アジェンダ