WEBお役立ち情報

2025年1月28日

OGPとは?

OGP(Open Graph Protocol)は、ウェブページのメタ情報を整理し、ソーシャルメディアでの共有時に適切な情報を表示させるためのプロトコルです。OGPを利用することで、FacebookやTwitter、LinkedInなどのソーシャルメディアでウェブページが効果的に表示されるようになります。


OGPの基本タグ

OGPの基本タグは以下の通りです。これらのタグはHTMLの<head>タグ内に追加します。
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="website" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:description" content="ページの説明" />
 
OGPタグの詳細説明

・og:title: ページのタイトルを指定します。ソーシャルメディア上での表示タイトルとなります。
・og:type: ページの種類を指定します。一般的なウェブページの場合は”website”を使用します。
・og:url: ページのURLを指定します。正規化されたURLを使用することで、共有時のURLが一貫します。
・og:image: サムネイル画像のURLを指定します。適切な画像を指定することで、視覚的な効果が高まります。
・og:description: ページの説明文を指定します。ソーシャルメディア上でのプレビューに表示されます。
OGPタグの実装例

実際のHTMLコードにOGPタグを追加する例を以下に示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="サンプルページのタイトル" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.example.com/sample" />
<meta property="og:image" content="https://www.example.com/sample-thumbnail.jpg" />
<meta property="og:description" content="サンプルページの説明文です。" />
<title>サンプルページ</title>
</head>
<body>
<h1>サンプルページ</h1>
<p>これはサンプルページです。</p>
</body>
</html>
 
OGPを利用することで、ソーシャルメディアでの共有時にウェブページの視認性と魅力が向上します。基本的なOGPタグを正しく設定し、効果的な情報発信を行いましょう。

WEBお役立ち情報一覧へ