OGPという設定をするとSNSシェア時に綺麗な見た目で表示する事が出来ます。
OGPとはWEBサイトをSNSにシェアした時にカード型の綺麗な見た目で共有する事が出来る様になる仕組みです。
OGP設定がされていないページのURLをSNSに貼り付けてもURLの文字列しか共有出来ません。反対に設定がされていると以下の様な見た目で分かりやすい形で共有出来ます。
どちらの方が共有されやすい、クリックされやすいか、というのはOGPが設定されている綺麗な共有カードの方が良いに決まっています。SNSシェアでの流入を狙うなら今回のOGPの設定は必須ですので、この記事で設定方法をしっかり覚えましょう。
OGPとは
OGPは「Open Graph Protocol」の略称で、SNSのシェア時にそのページの内容を教える仕組みです。
ページのタイトル、サムネイル、概要文、種類などをSNSの投稿欄に表示してくれます。
例えばTwitterの場合は、以下の様に表示されます。
Facebookの場合は以下の様に表示されます。
OGPを設置する場所
OGPはHTMLタグで設置します。場所は<head>~</head>の間の任意場所に設置します。
また決まったprefixタグとmetaタグで構成されています。
そこにページの情報やSNSアカウント情報を記述する事で設定は完了します。
OGPの設置の仕方
まずはOGPであることを宣言するために以下のコードを<head>~</head>の間に記述します。
<head prefix="og: http://ogp.me/ns#">次に共有カードに入ってくる情報を以下のmetaタグを使って入れていきます。
<meta name="og:url" content="https://ここにページのURLが入ります">
<meta name="og:title" content="ここにタイトルを入れます">
<meta name="og:image" content="https://ここにサムネイルになる画像のURLが入ります.jpg">
<meta name="og:description" content="ここにページの概要文が入ります">
<meta name="og:type" content="article">ここまでの記述はTwitter、Facebook共通して必須な記述です。
TwitterのOGP設定
Twitterの場合、OGPで共有される際の見た目を「Twitterカード」と言われます。
Twitterカードには「Summary Card with Large Image」と「Summary Card」と言われるものがあります。「Summary Card with Large Image」は大きなカードで、「Summary Card」は小さなカードです。
大きなカードを表示させたい場合はsummary_large_image、小さなカードを表示させたい場合はsummaryと記述します。
<meta name="twitter:card" content="カードの種類"/>実際に先ほどの以下の画像のOGPの記述を見てみると次の様になっています。
<head prefix="og: http://ogp.me/ns#">
<meta name="og:url" content="https://kt-life.net/css-float/">
<meta name="og:title" content="CSSのfloatで要素を横並びにする方法">
<meta name="og:image" content="https://kt-life.net/wp-content/uploads/2020/10/floatプロパティで要素を横並びにする方法.jpg">
<meta name="og:description" content="今回はCSSのfloatプロパティについて解説していきます。WEB制作の現場でも使用する事が非常に多いので必ずマスターしておきましょう。">
<meta name="og:type" content="article">
<!--Twitterカード-->
<meta name="twitter:card" content="summary_large_image"/>FacebookのOGP設定
FacebookのOGP設定では、これまでの設定内容とFacebookアカウントとの連結の記述が必要になります。FacebookのadminIDを確認して以下の「content=”adminID”」にそのIDを入れます。
<meta property="fb:admins" content="adminID" />もしくは「Facebook for developers」から開発者アカウントでIDを作成する方法です。作成したApp-IDを以下の「content=”App-ID”」の部分に入れます。（基本的にこちらの方法を推奨）
<meta property="fb:app_id" content="App-ID" />実際に先ほどのFacebook共有での表示を再現するには以下の記述になります。
<head prefix="og: http://ogp.me/ns#">
<meta name="og:url" content="https://kt-life.net/no-index/">
<meta name="og:title" content="作成したページを検索結果に表示させないor削除する方法">
<meta name="og:image" content="https://kt-life.net/wp-content/uploads/2020/10/作成したページを検索結果に表示させないor削除する方法.jpg">
<meta name="og:description" content="今回は作成したWEBページを検索結果に表示させない、もしくは既に検索結果に表示されているページを削除する方法を紹介します。">
<meta name="og:type" content="article">
<!--Facebook共有-->
<meta property="fb:app_id" content="App-ID" />その他OGP設定オプション
その他にもOGPは細かく設定する事が出来ます。
以下の設定は基本的には必要のないものですが、丁寧な共有カードにしたい場合は追加してみて下さい。
▼共有カードの設定
<meta property="og:image:width" content="604"/>
<meta property="og:image:height" content="340"/>
<meta property="og:site_name" content="KT LIFE"/>
<meta property="og:locale" content="ja_JP"/>▼場所
<meta property="og:latitude" content="緯度" />
<meta property="og:longitude" content="経度" />
<meta property="og:street-address" content="住所（番地など）" />
<meta property="og:locality" content="市区町村" />
<meta property="og:region" content="都道府県" />
<meta property="og:postal-code" content="郵便番号" />
<meta property="og:country-name" content="国名" />▼連絡先
<meta property="og:email" content="メールアドレス" />
<meta property="og:phone_number" content="電話番号" />
<meta property="og:fax_number" content="FAX番号" />▼動画
<meta property="og:video" content="動画のファイルパス" />
<meta property="og:video:height" content="動画の高さサイズ" />
<meta property="og:video:width" content="動画の横幅サイズ" />
<meta property="og:video:type" content="動画のファイルタイプ（application/x-shockwave-flashなど）" />▼音楽
<meta property="og:audio" content="音楽のファイルパス" />
<meta property="og:audio:title" content="音楽のタイトル" />
<meta property="og:audio:artist" content="音楽のアーティスト名" />
<meta property="og:audio:album" content="音楽のアルバム名" />
<meta property="og:audio:type" content="音楽のファイルタイプ（application/mp3など）" />▼TwitterOGPその他設定
<meta name="twitter:site" content="@[Twitter ID]" />
<meta name="twitter:player" content="@[Twitter ID]" />
<meta name="twitter:card" content="photo"/>
<meta name="twitter:card" content="gallery"/>
<meta name="twitter:card" content="app"/>OGPが正しく設定されているか確認
最後に、ここまでの設定が完了したら正しく表示されるか確認しましょう。
Twitterの場合もFacebookの場合もOGPのシュミレーターツールが公式で公開されているので、これを使って確認しましょう。
Twitterの場合はTwitter Card ValidatorにアクセスしてURLの記入欄に確認したいページのURLを入力すれば右側にプレビューが表示されます。
Facebookの場合は「OGP画像シミュレータ」を使えばどの様にサムネイルが表示されるのかを確認出来ます。また「Sharing Debugger」を使えば投稿のプレビューや修正事項などを確認する事が出来ます。
ただ最も簡単な確認方法は何も実際にSNS上にURLを貼り付けてみて、どんな見た目の共有カードになるのか？をやってみる事です。
まとめ
- OGPはページの内容をSNSに教える仕組み
- <head>~</head>にOGPで決められたタグを入れる
- SNS別に設定出来る項目がある
- その他任意の設定項目は沢山ある
- デバックツールで確認できる
OGPの設定は非常に簡単なのに共有時のクリック率が約3倍になると言われていますので必ず行う様にしましょう。また1ページずつ設定するのは非常に面倒くさいのでphpでテンプレートを作成して一括で行っちゃいましょう。
以上が「【OGP設定】SNSシェア時に綺麗な見た目で表示する方法」でした。
