MENU
Webサイト分析ツール「アナトミー」
Googleアナリティクスを利用したサイト分析をやさしく解説。
  1. TOP
  2. サイト分析
  3. OGPの設定と確認方法｜SNSで記事をシェアされた時の見え方

OGPの設定と確認方法｜SNSで記事をシェアされた時の見え方

サイト分析

Webサイトの記事をSNSでシェアしたとき、「タイトルや画像が思ったように表示されない」という経験はありませんか？

OGPを正しく設定すると、SNS上で記事の内容が伝わりやすくなり、クリックやシェアにつながりやすくなります。SNSからの流入を増やしたい場合は、必ず確認しておきたい設定です。

GA4の基本を学ぶ！はじめてのアクセス解析セミナー

GA4を使ってアクセス解析の基本を学ぶ入門セミナーです。主要指標の意味を整理し、外部流入や回遊の分析方法を分かりやすく解説します。データの変化の理由を考えられるようになりたい方におすすめです。

目次

OGPとは

OGPとは、Open Graph Protocol（オープン・グラフ・プロトコル）の略称です。

FacebookやX（旧Twitter）などのSNSでWebページがシェアされた際に、以下の情報を表示させるための仕組みです。

  • ページタイトル
  • ページURL
  • ページ概要
  • アイキャッチ画像

例えば、記事をXで投稿すると、設定した画像やタイトルが以下のように表示されます。

設定したOGPが実際に表示される例

OGPを設定していない場合、画像やタイトルなど表示したい情報が正しく表示されなかったり、何も表示されなかったりすることがあります。

一方で、OGPを設定しておくことで、SNS上で記事の内容をユーザーに伝えやすくなり、シェアやクリックの促進につながります。

OGPタグの設定方法

OGPはHTMLの内に専用のタグを以下の手順で追加することで設定できます。

1. サイトのファイルを開く

Webサイトを管理しているフォルダから、設定したいページのHTMLファイル（例：index.html）を開きます。

メモ帳やテキストエディタなどで編集できます。

2. <head>タグを探す

HTMLファイル内にある、

<head>

という部分を探します。

この中には、ページタイトルや文字コードなど、Webページの裏側の設定情報が記載されています。

3. OGPタグを追加する

<head>と</head>の間に、以下のようなOGPタグを追加します。

<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="website　か　blog　か　article" />
<meta property="og:description" content="ページの説明"/>
<meta property="og:url" content="ページのURL" />
<meta property="og:site_name" content="ページのタイトル" />
<meta name="twitter:card" content="summary_large_image" /> 
<meta property="og:image" content="アイキャッチ画像のURL" />

そして、HTMLタグにも以下の記述を追加

<html prefix="og: http://ogp.me/ns#">

これらの情報を設定することで、SNSでシェアされた際の表示内容を指定できます。

関連記事：metaタグの確認方法｜ディスクリプションを調べる手順

WordPressなどのCMSを使っている場合

WordPress（ワードプレス）やWix、Notion、Shopifyなどのホームページ作成ツールを利用している場合は、HTMLを直接編集する必要はありません。

管理画面の設定やSEOプラグインなどから、

  • タイトル
  • 説明文
  • OGP画像

を入力・アップロードするだけで、ツール側が自動的にHTMLへ反映してくれます。

OGPの確認方法

設定したOGPが正しく反映されているか、以下の方法で確認します。

ソースコードから確認する方法

  1. 確認したいWebページを開く
  2. ページのどこかを右クリックし、ブラウザの「ページのソースを表示」をクリックして開く
ソースコードから確認する方法①
  1. og:imageなどのOGPタグを検索する

画像を確認するには、以下の部分を確認します。

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

ソースコードから確認する方法②

この画像URLをコピーしてブラウザに貼り付けると、以下のように設定されているOGP画像を直接確認できます。

ソースコードから確認する方法③

コードを見ずにOGPを確認する方法

ソースコードを確認する方法でもチェックできますが、毎回コードを見るのは少し手間です。

例えばWebサイト分析ツール「アナトミー」なら、ページのOGP情報を簡単に確認できます。

  • 設定されているタイトルや説明文を確認できる
  • OGP画像の見た目を確認できる 
  • 過去の設定状況もチェック、比較できる
コードを見ずにOGPを確認する方法①

確認したいページと紐づいている緑のタイルをクリックするだけで、各ページのOGPをすぐ確認できます。

コードを見ずにOGPを確認する方法②

各ページのOGPをアナトミーで簡単に確認する

OGPを整えてSNSからの流入を増やそう

OGP設定は、SNSで記事を効果的に届けるために重要な設定です。

設定自体はHTMLタグを追加するだけですが、正しく表示されているか確認することも大切です。

ソースコードを見る方法やOGP確認ツールを活用して、SNSでシェアされたときに「どの画像・タイトルが表示されるか」を事前にチェックしておきましょう。

サイト分析
よかったらシェアしてね！
  • URLをコピーしました！
目次