OGPをWebページに適切に設定することで、SNSのタイムラインを見ているユーザーに対してWebページの内容を魅力的に伝える事ができます。
今回はWebサイトに必要不可欠となったOGPの設定方法とOGP画像の作成方法についてご紹介します。
OGPとは
目次
OGPとは米メタ（Meta：旧フェイスブック）社が策定した「Open Graph Protocol（オープン・グラフ・プロトコル）」の頭文字をとってOGPと呼んでいます。
このあと説明しますが、OGPはWebページのhead内にmetaタグとして記述して設定するのでオープングラフタグやOGPタグなどと呼ばれることもあります。また、設定する画像についてはOGP画像と呼ぶこともあります。
Metaが策定した仕様で、仕様のドキュメントもありますが、OGPの活用範囲は単なるWebページだけを目的としたものではなく、音楽や書籍のメタ情報などを記述したりもできるので活用範囲が広いのでこの記事では通常のWebページに限定してご紹介します。
OGPを設定するメリット
WebページにOGPを設定すると、SNS（TwitterやFacebook）あるいはメッセージアプリ（LINEやSlack）などでWebページのURLが投稿された際に、画像やページタイトル、説明文などをカード形式で展開して表示してくれる為、事前にどんな内容なのか知れますし、Webサイトをアピールするための有効な手段として活用されています。
SNSやチャットツールを使っている方が多くなった今では絶対に設定したほうが良いものとなっています。
OGPの設定方法
WebページのHTMLのヘッダ（head要素）内は基本的にブラウザ上には表示されない情報を記述する部分で、タイトル（title要素）やメタ（meta要素）が記述されています。
OGPはメタ（meta要素）として記述するので、ヘッダ内に記述します。
基本的なOGPの記述
OGPは下記のようなmetaタグとして記述します。property=""にはどんな情報かを記述して、content=""にはその内容を記述します。
<meta property="og:url" content="ページのURL">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="サムネイル画像のURL">
<meta property="og:type" content="website または article">
<meta property="og:site_name" content="サイト名">各タグの意味
og:url
ページのURLを指定します。URLにパラメーターなどがある場合は取り除いたURLにしてください。
あまり見かけなくなりましたが、モバイルサイトをhttps://xxxxx.com/sp/などの別URLで運営している場合はPC版と同じhttps://xxxxx.com/を入力してください。
og:title
タイトルを入力します。サイト名やブランドの情報を含まないタイトルにする必要があります。
トップページであれば「サイト名」を指定して、それ以外のページでは「記事のタイトル」を設定するのが一般的です。
og:description
ページの説明文です。カードのサイズに応じて表示される説明が可変するので、文字数制限はありませんが、2〜4文が一般的です。
og:image
画像のURLを指定します。記事の内容を表した特徴的な画像を設定するのが一般的です。記事に挿入するアイキャッチ画像のようなものだと思ってください。ここで設定する画像のことを別名OGP画像と呼びます。
OGP画像の作り方についてもこの記事の後半で解説しています。
アイキャッチ画像・OGP画像の両方を作成するのは大変なので、アイキャッチ画像をOGP画像用に加工したものを指定するか、アイキャッチ画像をそもそもOGPと同じ仕様で作っておけばどちらでも使えます。
og:type
コンテンツのタイプ。このタグでどのようなコンテンツか指定することで、カードに表示されるコンテンツがどのように表示されるか変わる場合があります。
トップページであれば「website」を指定して、それ以外のページでは「article」を設定するのが一般的です。
og:site_name
サイト名を指定します。
ここまでのOGPをまとめると下記のようになるので、真似してhead内に入れてみてください。
<meta property="og:url" content="https://scrapse.com/">
<meta property="og:title" content="Scrapse">
<meta property="og:description" content="Web制作に関する記事を投稿しています。">
<meta property="og:image" content="https://scrapse.com/ogp_image.png">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Scrapse">head内に入れたイメージ
<html>
<head>
<title>Example</title>
<meta property="og:url" content="https://scrapse.com/">
<meta property="og:title" content="Scrapse">
<meta property="og:description" content="Web制作に関する記事を投稿しています。">
<meta property="og:image" content="https://scrapse.com/ogp_image.png">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Scrapse">
</head>
<body>
コンテンツ
</body>
</html>Twittter・Facebook専用OGPの記述
基本的なOGPの記述で紹介した記述だけで様々なSNSやチャットツールではOGPが表示されるようになりますが、TwitterとFacebookに関しては追加のOGPが利用できます。
必須ではありませんが、こうのもあるんだな程度に覚えておくと良いと思います。
Twitter用の記述
TwitterはOGPの仕様に準じながらも独自のタグとなっています。
基本的なOGPでご紹介したタグはpropertyとcontentでしたが、Twitterの場合はnameとcontentとなるので注意してください。
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@から始まるTwitter ID">twitter:card
カードのタイプ（大きさ）です。「summary」か「summary_large_image」のどちらかを選んで指定します。
「summary_large_image」を指定すると大きいカードで表示されます。
twitter:site
@から始まるTwitter IDを指定します。Twitterアカウントを取得して指定しましょう。
Facebook用の記述
<meta property="fb:app_id" content="FacebookアプリID">fb:app_id
Facebookから取得したアプリIDを指定します。
設定するとFacebookインサイトというツールが使用できるようになります。FacebookインサイトはFacebookからWebページへどれだけの人が訪れたかを確認したりできます。
Facebookを普段から活用していて、ユーザーがどのくらいFacebookからサイトへ飛んでいったかとか知りたいのであれば設定したほうが良いです。
OGP画像の作成方法
OGPの画像が変わらない場合
一度、URLをSNSやチャットツールで共有し、OGPの画像が表示されると、その画像はキャッシュ機能（取得した画像をサービスのサーバーに保存する）により、OGPに設定した画像を差し替えても変わらない場合があります。
その場合は、OGPキャッシュ画像のクリアという作業が必要です。
下記の記事に各SNSとチャットツールのキャッシュクリアの方法を詳しくまとめましたのでみてください。
まとめ
- OGPは「Open Graph Protocol（オープン・グラフ・プロトコル）」の略称
- SNSでURLが投稿された時に事前にどんな内容かわかるのでほぼ設定必須
- head要素にmetaタグを追加し設定するだけなので簡単