OGPとは？Webサイトの情報共有に役立つOpen Graph Protocolの仕組みと使い方

OGPとは、Open Graph Protocolの略称であり、Webサイトの情報共有に役立つメタデータの一種です。OGPを利用することで、SNSなどでWebサイトのリンクを共有した際に、リンク先のWebサイトの情報が豊富に表示されるようになります。例えば、Webサイトのタイトルや説明文、画像、URLなどが一度に表示されるため、共有されたリンクをクリックするユーザーは、情報を把握しやすくなります。この記事では、OGPの仕組みや使い方について詳しく解説していきます。Webサイトを運営する方や、SNSなどでWebサイトを共有する際に役立つ情報となるため、ぜひ読んでみてください。

1. OGPとは何か？

OGPとは、Webページの情報共有に役立つ「Open Graph Protocol」の略称です。OGPを使用することで、WebページのタイトルやURL、画像、説明文などの情報を共有することができ、SNSなどでリンクを共有する際に役立ちます。OGPの利用には、Webサイトの開発者が指定したタグをHTMLの<head>内に挿入する必要があります。OGPを使用することで、Webサイトの情報共有がより魅力的になり、ユーザーにとっても有益な情報を提供することができます。

2. OGPの仕組み

OGPの仕組みは、Webページのメタデータを指定するタグを使用することで、Webページの情報を共有することができます。OGPによって共有される情報の例として、WebページのタイトルやURL、画像、説明文などがあります。これらの情報は、SNSなどでリンクを共有する際に表示されます。また、OGPによって表示される情報を使い、ユーザーがより魅力的なコンテンツを共有できるようにする方法も提供されています。

3. OGPの使い方

OGPを使ってWebサイトの情報を共有する方法は、HTMLの<head>内にOGPタグを挿入することです。具体的には、以下のようなタグを指定します。

<meta property="og:title" content="Webページのタイトル">

<meta property="og:type" content="website">

<meta property="og:image" content="画像のURL">

<meta property="og:description" content="Webページの説明文">

<meta property="og:url" content="WebページのURL">

また、OGPを使用しているWebサイトの例としては、FacebookやTwitterなどのSNSが挙げられます。Webサイトの開発者は、これらのSNSのリンクシェアボタンを設置することで、簡単にOGPを使用した情報共有を実現することができます。

4. 各SNSにおいてOGPを設定する方法

【Facebook】

  1. Facebook開発者向けページでアカウントを作成する。
  2. 「アプリID」を取得する。
  3. Webサイトの<head>タグ内に<meta>タグを追加し、OGPの情報を記述する。
  4. Facebook開発者向けページで、先程取得した「アプリID」を使用して、OGPのプレビューを確認する。

Facebookでは、OGPメタデータを以下のように設定できます。例として、タイトル、URL、画像、説明文を設定する場合のコードを示します。

<meta property="og:title" content="記事タイトル">

<meta property="og:url" content="https://example.com/">

<meta property="og:image" content="https://example.com/images/ogp-image.jpg">

<meta property="og:description" content="記事の説明文">

Facebook: https://developers.facebook.com/docs/sharing/webmasters/

【Twitter】

  1. Twitter Card Validatorにアクセスし、Twitterアカウントをログインする。
  2. Webサイトの<head>タグ内に<meta>タグを追加し、OGPの情報を記述する。
  3. Twitter Card Validatorで、WebサイトのURLを入力してプレビューを確認する。

Twitterでは、OGPメタデータを以下のように設定できます。例として、タイトル、URL、画像、説明文を設定する場合のコードを示します。

<meta property="twitter:title" content="記事タイトル">

<meta property="twitter:url" content="https://example.com/">

<meta property="twitter:image" content="https://example.com/images/ogp-image.jpg">

<meta property="twitter:description" content="記事の説明文">

Twitter:https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-twitter-cards

【Instagram】

  1. Instagram開発者向けページでアカウントを作成する。
  2. Webサイトの<head>タグ内に<meta>タグを追加し、OGPの情報を記述する。
  3. Instagram開発者向けページで、WebサイトのURLを入力してプレビューを確認する。

Instagramでは、OGPメタデータを使用する代わりに、Open Graph for Instagramと呼ばれる独自のメタデータを使用します。以下は、Instagramでシェアする際に使用できるメタデータの例です。

<meta property="og:type" content="instapp:photo" />

<meta property="og:title" content="タイトル" />

<meta property="og:image" content="https://example.com/image.jpg" />

<meta property="og:description" content="説明文" />

<meta property="instapp:hashtags" content="ハッシュタグ1,ハッシュタグ2" />

詳細については、Instagram Developersの「Sharing to Instagram」を参照してください。

【LinkedIn】

  1. LinkedIn Developer Programにアクセスしてアカウントを作成する。
  2. Webサイトの<head>タグ内に<meta>タグを追加し、OGPの情報を記述する。
  3. LinkedIn Developer Programで、WebサイトのURLを入力してプレビューを確認する。

LinkedInでは、OGPメタデータを以下のように設定できます。例として、タイトル、URL、画像、説明文を設定する場合のコードを示します。

<meta property="og:title" content="記事タイトル">

<meta property="og:url" content="https://example.com/">

<meta property="og:image" content="https://example.com/images/ogp-image.jpg">

<meta property="og:description" content="記事の説明文">

<meta property="og:type" content="article">

<meta property="article:author" content="著者名">

<meta property="article:published_time" content="2023-03-12T08:00:00+0900">

<meta property="article:modified_time" content="2023-03-12T09:00:00+0900">

LinkedIn: https://developer.linkedin.com/docs/share-on-linkedin

【Pinterest】

  1. Pinterest開発者向けページでアカウントを作成する。
  2. Webサイトの<head>タグ内に<meta>タグを追加し、OGPの情報を記述する。
  3. Pinterest開発者向けページで、WebサイトのURLを入力してプレビューを確認する。

Pinterestでは、OGPメタデータを使用する代わりに、Pinterest for Businessと呼ばれる独自のメタデータを使用します。以下は、Pinterestでシェアする際に使用できるメタデータの例です。

<meta property="og:type" content="pinterestapp:pin" />

<meta property="og:title" content="タイトル" />

<meta property="og:image" content="https://example.com/image.jpg" />

<meta property="og:description" content="説明文" />

<meta property="pinterestapp:pinboard" content="ボード名" />

<meta property="pinterestapp:pin_id" content="ピンのID" />

詳細については、Pinterest Developersの「Rich Pins」を参照してください

以上のように、各SNSにおいてOGPを設定する方法は似ていますが、微妙に異なる点があります。必要に応じて各SNSのドキュメントを確認して、正確にOGPを設定しましょう。

OGPの注意点

OGPのタグの指定には正確さが求められます。タグの指定が不正確だと共有される情報が意図したものと異なる場合があります。開発者は、正確なタグの指定を行うことで、ユーザーがより適切な情報を共有できるようにする必要があります。

　

OGPを使用する際には、以下の注意点に留意する必要があります。

  1. 画像サイズの適切な指定: OGP画像は、適切なサイズで指定する必要があります。画像サイズが大きすぎると、読み込み時間が増加し、ユーザー体験が悪化します。一方、画像サイズが小さすぎると、表示される画像がぼやけたり、粗くなったりする可能性があります。各SNSごとに推奨される画像サイズが異なるため、それに従って指定する必要があります。
  2. 画像の適切な形式: OGP画像は、PNG、JPEG、GIFのいずれかの形式で指定する必要があります。また、画像ファイルサイズが大きすぎると、読み込み時間が増加するため、圧縮する必要がある場合があります。
  3. ページの内容との一致: OGPで指定するタイトル、説明、画像は、そのページの内容と関連している必要があります。たとえば、記事ページには記事タイトル、記事概要、記事イメージを指定し、製品ページには製品名、製品説明、製品画像を指定するようにします。
  4. キャッシュのクリア: OGPメタデータを変更した場合、キャッシュされた情報が残っているため、表示が更新されないことがあります。この場合は、キャッシュのクリアを行うか、しばらく時間をおいてから再度確認するようにします。

以上のように、OGPを利用する際には、適切なサイズ、形式、内容を指定し、キャッシュのクリアを適宜行うことが大切です。

タイトルとURLをコピーしました