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

知っているようで知らない 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” ６０〜８０文字の概要説明を設定

OGP基本設定”og:image” シェア時に表示する画像を指定こちらも絶対パスで指定基本サイズは幅1200px高さ630px

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

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

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

もなか

More Decks by もなか

Other Decks in Technology

Featured

Transcript