見出し画像

OGPとは？設定するべき理由と設定方法について

webデザイナーimane🍪できることから少しずつ


今日は久々のサイト構築の準備段階に入っており、現在の内容をいろいろ確認しているところで気になったOGP・・・

OGP（Open Graph Protocol）とは

OGPとは「Open Graph Protcol」の略で、FacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。

これを設定しておくと、SNS上でURLが共有された際にタイトルや画像、説明文などが表示されるようになり、ユーザーに対してページの内容を詳しく伝えることができます。


OGPを設定するべき理由

OGP設定をしていなかった場合、TwitterやFacebookなどのSNS側が自動的に説明文や画像を表示してしまい、ページ内容がユーザーに正しく伝わらなくなります。

適切に設定することで、どのようなページで何を伝えたいのかが明確になります。
そうすることで、共有されたユーザーの訴求率が高まり、より多くの人に記事を見てもらうことが可能になります。

また、後ほど詳しく述べますが、Facebookではこれを設定することで、分析や解析に役立つ「ページインサイト」の機能を利用することができるようになります。

基本的なOGPの設定手順

OGPはmetaタグをHTMLソースコード内に記述することで設定することができます。
基本的な手順は以下の通りです。

  • 1. head要素に prefix=”og: http://ogp.me/ns#” を追加する

  • 2. headerタグ内のmetaタグで所定の要素を追加する

  • 3. 必要に応じて「表示用の画像」を用意する

それでは、順番に見ていきましょう。

1.head要素に prefix=”og: http://ogp.me/ns#” を追加する

ページでOGPを使用することを宣言するため、head要素にprefix属性を追加します。
<head prefix=”og: http://ogp.me/ns#”>

2. headerタグ内のmetaタグで要素を追加する
続いて、必要な設定項目の記述をしていきます。



<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" />


og:url

OGPを設定するWEBページのURLを指定します。URLは相対パス（*1）ではなく絶対パス（*2）で記述する必要があります。

※1 相対パス: 現在のページから目的のページまでの道順を記述するもの。「./casestudy.html」のように表します。

※2 絶対パス: ドメインも含めて、目的のページまでの道順をすべて記述するもの。「/shabellbase.com/digi-fukugyo/casestudy」のように表します。

og:type

ページの種類を指定します。このタイプを設定することにより、SNS上での表示形式が変わってきます。
様々な種類がありますが、いくつか代表的なものを紹介します。

website: WebサイトのTOPページ
blog: ブログのトップページ
article: 記事ページなど、WebサイトのTOP以外のページ
product: 製品の紹介ページ

Open Graphプロトコル

og:title

ページのタイトルを指定します。
通常はサイトのものと同じ内容を設定しますが、og:titleに別のタイトルを設定するとそちらが優先して表示されます。文字数は20文字以内が適切です。

og:description

ページの説明文を指定します。文字数は80~90文字が最適です。

og:site_name

ページのサイト名を記述します。サイト名やブランド情報は「og:title」ではなく、この「og:site_name」に設定します。

og:image

SNS上でシェアされた際に表示する画像を指定します。WEBページのURL同様にこちらも絶対パスで指定します。
Facebookでの設定を行う際には画像サイズを1200px✕630pxにすると最適な表示がされます。

TwitterでのOGP設定方法

Twitterでは基本的なOGP設定に加え、「twitter:card」と「twitter:site」を設定します。

<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />

twitter:card

Twitter上での表示タイプを指定するタグです。
カードの種類は全部で4種類あり、ブログやWEBサイト用、アプリ配布用、動画サイト用とそれぞれ見せ方が変わってきます。

  • summary
    タイトル、説明、およびサムネイル。最も一般的な形です。

  • summary_large_image
    summary cardと同じ形で、画像の大きさがそれより大きいもの。Facebookのカードに近い形です。

  • app
    アプリ配布用の表示カード。アプリの名前や紹介文、アプリアイコンに加えて、評価や価格などの表示もされます。

  • player
    ビデオやオーディオなどのメディアを表示できるカード

twitter:site

@から始まる、コンテンツの作成者や管理者のTwitterユーザーIDを入力します。
OGP設定の注意点

OGPを設定する際の注意点がいくつかありますので説明していきます。

同じOGPを設定しない

ページ内容が違うのに、同じOGPを設定するのは避けましょう。
確かに、一つ一つOGP設定（og:title、og:description、og:imageなど）をしていくのは大変です。
しかし、せっかくユーザーがページをシェアしてくれたとしても、同じ画像やタイトルばかりでは意味がありません。

SNSでシェアされた時にユーザーの興味を引けるようにしっかりと設定しておきましょう。

画像サイズに注意する

OGPでは媒体ごとに画像サイズが異なります。画像サイズが異なると、表示が崩れてしまう事がありますので注意しましょう。

おすすめの画像サイズとしてはFacebook、Twitter共通で使用できるサイズで、縦横比1.91:1、1200×630ピクセルの画像を使用すると良いでしょう。

適切な画像が表示されるかどうか、「シェアデバッガー」や「Card validator」といったツールで確認することができます。

URLを正確に指定する

og:urlプロパティには、正確なURLを指定する必要があります。
間違ったURLを指定していたり、リンク切れになってしまうと機会損失につながってしまいますので気をつけましょう。

また、URLの指定方法は相対パスではなく、絶対パスで記述しますのでその点にも注意しましょう。

勉強になりましたので、共有させていただきます！
DEGIMAGUILDさん、良い記事をありがとうございました。

実際の記事はこちらです

このページはサイトリニューアルやwordpressの修正などで過去に私が実際に使用して良かったものや、記事を紹介しております！
参考としているurlや内容を自分で管理しきれなくなり、noteにしたら、皆様にもヒントや学びになるのではと、まとめ的に投稿しております。

どうぞよろしくお願いいたします。

いいなと思ったら応援しよう！