ソーシャルメディアでのシェアを最適化！！Open Graph Protocol（オープングラフプロトコル）について

Open Graph Protocol（オープングラフプロトコル）は、Webページがソーシャルメディア上でシェアされた際に、適切なタイトルや画像、説明文などが表示されるようにするためのメタデータタグです。このプロトコルを使うことで、Webページをシェアしたときの見た目を制御し、より魅力的に表示させることができます。主にFacebookやTwitterなどのソーシャルメディアで活用されており、他のプラットフォームでもサポートされています。以下は、Open Graph Protocolの基本的なタグとその説明です。

1. og:title（ページのタイトル）

Webページのタイトルを設定します。これがソーシャルメディア上でシェアされた際に、投稿の見出しとして表示されます。

例:

2. og:description（ページの説明）

Webページの短い説明を設定します。このタグで指定した内容は、ソーシャルメディアでシェアされた際に、タイトルの下に表示される概要部分となります。ユーザーがページの内容を理解するための重要な要素です。

例:

3. og:image（ページのサムネイル画像）

ソーシャルメディアにシェアされたときに表示される画像を設定します。視覚的な要素は、ユーザーの関心を引くために非常に重要です。

例:

4. og:url（ページのURL）

ページの正規URL（カノニカルURL）を指定します。ソーシャルメディア上でシェアされる際に、正しいページがリンクされるようにします。

例:

5. og:type（コンテンツの種類）

コンテンツの種類を指定します。Webページの種類に応じて、website や article などの値を使用します。これにより、シェアされたページがどのような種類のコンテンツであるかを示します。

主な値:

website: 通常のウェブページ

article: ブログ記事やニュース記事

video.movie: 映画のページ

例:

6. og:site_name（サイト名）

Webサイトの名前を指定します。これにより、シェアされたページがどのサイトのコンテンツであるかが明示されます。

例:

7. og:locale（ページの言語設定）

ページがどの言語で書かれているかを指定します。ja_JP のような形式で、言語と地域を設定します。

例:

8. og:updated_time（ページの最終更新日時）

ページの最終更新日を指定します。これにより、コンテンツが最新であることを示すことができます。日付はISO 8601形式で指定します。

例:

補足: Facebook用の追加タグ

Facebookでは、Open Graphタグに加えて、次のような専用のタグも使用できます。

fb:app_id

FacebookアプリケーションのIDを指定します。Facebook Insightsを利用してページのシェア状況を追跡する際に便利です。

例:

<meta property="fb:app_id" content="1234567890">

まとめ

Open Graph Protocolを正しく設定することで、Webページがソーシャルメディア上でシェアされた際に、魅力的で整った表示を実現できます。og:title、og:description、og:imageの3つのタグは特に重要で、ユーザーの注目を集めるために役立ちます。また、og:urlやog:typeも正確に設定することで、コンテンツが適切に分類され、リンク先が正確であることを保証します。

Open Graph Protocolを使いこなして、ソーシャルメディアでのシェアを最適化し、Webサイトの認知度を高めましょう。