デザイン
2021.09.28
OGPとは？OGPの基本からOGP画像のサイズや設定方法
OGPとはWebサイトの内容をSNS上でシェアするための仕組みです。OGPにはWebの記事がSNSにシェアされた際に表示する情報を記述しておく必要があります。
Webサイトの記事やページをSNSでシェアされることは、新しいユーザーを獲得するきっかけになります。
コンテンツ
OGPとは？
OGPとは、Open Graph Protocolの頭文字をとったもので、Webサイトのコンテンツの内容をSNSで伝える際に使用する仕組みです。例えば、SNSでWebの記事をシェアしたときに、その記事のURLとタイトル、簡単な内容やサムネイル画像がボックスにまとめられて表示されるのを見たことがあると思います。OGPはこのボックス内のタイトルは何を表示するか、URLは何か、画像は何か、といった部分を設定するために使います。
OGPの設置場所
OGPは、HTMLファイルの中のheadタグ内に設置します。metaタグでそれぞれのURLやタイトルなどの情報を記述していきます。合わせてそれぞれのSNSのIDやアカウントを記述することで、SNSと連携させましょう。
OGPの設置方法
OGPはmetaタグをHTMLソースコード中の~内に記述することで、設定ができます。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb# prefix属性: http://ogp.me/ns/ prefix属性#">
<meta property="og:url" content=" ページの URL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:description" content=" ページのディスクリプション" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />OGPを使用することを宣言するタグ
ページでOGPを使用することを宣言するため、head要素にprefix属性を追加します。
TOPページであれば「website」、TOP以外のページでは「article」を入力します。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">ページURL(og:url)
OGPを設定するWEBページのURLを指定します。URLは相対パスではなく絶対パスでの記述をします。
<meta property="og:url" content=" ページの URL" />ページタイプ(og:type)
ページの種類を指定します。このタイプを設定することにより、SNS上での表示形式が変わってきます。
TOPページの場合は「website」、WEBサイト上の記事ページなど、TOPページ以外には「article」を指定します。
<meta property="og:url" content=" ページの URL" />ページタイプ(og:type)
ページの種類を指定します。このタイプを設定することにより、SNS上での表示形式が変わってきます。
TOPページの場合は「website」、WEBサイト上の記事ページなど、TOPページ以外には「article」を指定します。
<meta property="og:type" content=" ページの種類" />ページタイトル(og:title)
ページのtitleを指定します。一般的にはサイトの~と同じ内容を設定しますが、サイト名などのブランド情報を含まないtitleを20文字以内で設定することが好ましいとされています。
<meta property="og:title" content=" ページの タイトル" />ページの説明文(og:description)
ページの説明文を指定します。と同様の内容で記述することが多いですが、「og:description」での文字数は80~90文字が最適とされています。の文字数は120文字程度なので、内容をそのままを設定してしまうと表示された際に文字が切れてしまう可能性があるため、OGP用に文章を簡略化するとシェアされた際にユーザーに伝わりやすくなります。
<meta property="og:description" content=" ページのディスクリプション" />サイト名(og:site_name)
ページのサイト名を記述します。サイト名やブランド情報は「og:title」ではなく、この「og:site_neme」に設定します。
<meta property="og:site_name" content="サイト名" />画像のURL(og:image)
SNS上でシェアされた際に表示させたい画像を絶対パスで指定します。
Facebookでは画像サイズを1200×630p、比率で「1.91：1」を推奨しています。
<meta property="og:image" content=" サムネイル画像の URL" />
便利な確認ツールがこちら！
Facebookの表示確認ツール「シェアデバッカー」
※Facebookへのログインが必要。
WEBページがSNS上でシェアされた際にどのように表示されるかエラーがないか確認することができます。
Twitterカードの表示確認ツール「Card validator」
※Twitterへのログインが必要。
Twitter上でツイートされた際の表示結果を確認することができます。
Facebookと同じで、設定したページのURLを入力し「preview card」を押すと、Twitter上でどのように表示されるか見ることができます。
Card Validator | Twitter Developers
まとめ
OGP設定をするとたくさんの人の目にふれる機会がおおくなります。
タイトルや説明文をそのままのせるのではなく、どんな文章にしたらクリックしたくなるか、WEBサイトにいってみたくなるか、考えながら設定するとよいかもしれません。
たくさんの人に見てもらいたい、もっと多くの人に知ってもらいたい、そんな時はOGPの設定をしてみてはどうでしょうか。
この記事に関連するタグ
正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）
Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。
リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください
株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。
