MENU

【公開前必須】WebサイトのOGP・メタ情報の設定で必要な項目と具体的な記述のポイントを解説

Web制作 HTML
  • URLをコピーしました！

気になるコンテンツを検索して調べたり、SNSやLINEでシェアすることが当たり前の時代。

作ったサイトやLPが検索された時やシェアされた時に、きちんと意図した内容で表示されるようにOGPの設定をしましょう。

当ブログはまだ設定してないので、よくない例です。（自分のことは後回しになりがち）
基本的には、公開前に必ず設定しましょう。

目次

OGPとメタ情報の役割

OGPとは？

「Open Graph Protocol」を略したものです。

FecebookやTwitterなどのSNSでシェアされた時、LINEなどのメッセージツールでシェアされた時、各ページのタイトルや説明・サムネイル画像を表示させるために設定します。

メタ情報とは？

Googleなどの検索エンジンや、chrome・safariといったブラウザにWebページの情報を伝えるためのHTMLタグのことです。

どちらもサイトやページを説明するための情報

それぞれ一言で説明すると下記のイメージです。

  • OGPはSNSで見つけた人に、どんなページなのか説明するための情報。
  • メタ情報は検索エンジンで見つけた人に、どんなページなのか説明するための情報。

SNSや検索エンジンでWebページを見つけた時、全く内容がわからないと怪しすぎますよね…

どちらもサイトを見つけてくれた人に、ページの内容を説明するために必要な情報です。

ノーコードツールやWordPressで作成した場合も、コーディングで作成した場合も、必須設定の項目ですし、考える項目は共通しているので、この記事ではサイト公開前に必ず考えるべき内容としてまとめて解説していきます。

OGP・メタ情報を設定するために考えるべき内容

【必須】タイトル

タイトルは検索された時に、サイトやページの名前として表示されるものです。

内容検討時のポイントは6つあります。

  • 文字数は30文字以内を目安にする
  • 検索キーワードを入れる
  • 重要なキーワードは前の方にいれる
  • サイトにあるページ分用意し、各ページのタイトルが重複しないようにする
  • ユーザにとってのメリットを盛り込む
  • 記号で区切ることでわかりやすくする

文字数は30文字以内を目安にする

検索結果で表示されるタイトルの上限文字数は、パソコンで30文字、スマホで35文字です。
上限文字数を超えてしまうと見切れてしまうため、両方の表示を考慮すると、30文字以内を目安に内容を考えることをお勧めします。

文字数カウンターを使用して、表示させたいタイトルが上限文字数に収まっているか確認しましょう。

検索キーワードを入れる

重要なキーワードは前の方にいれる

サイトにあるページ分用意し、各ページのタイトルが重複しないようにする

ユーザにとってのメリットを盛り込む

記号で区切ることでわかりやすくする

【必須】ディスクリプション

ディスクリプションとは、サイトやWEBページの内容を簡単に説明するためのテキストです。

内容検討時のポイントは6つあります。

  • 文字数は100文字程度を目安にする
  • 検索キーワードを入れる
  • ページの内容をわかりやすくユーザーに伝える内容にする
  • 重要な内容は70文字以内にいれる
  • タイトルと同じ内容にしない
  • ページごとに異なるディスクリプションを用意する

文字数は100文字程度を目安にする

  • PC画面：90〜120文字程度
  • スマホ画面：70文字程度

長すぎるとテキストは省略されてしまい、見切れてしまう可能性があります。

文字数カウンターを使用して、表示させたい内容が上限文字数に収まっているか確認しましょう。

検索キーワードを入れる

ページの内容をわかりやすくユーザーに伝える内容にする

重要な内容は70文字以内に入れる

タイトルと同じ内容にしない

ページごとに異なるディスクリプションを用意する

【必須】OGP画像

OGP画像はTwitterやFacebookなどのSNSや、LINEなどのコミュニケーションツールでURLを共有された時に表示される画像です。

  • 推奨画像サイズは1200px×630px
  • ロゴなどの重要な要素はなるべく630px×630pxの中に入れる
  • OGP画像の見え方はツールで確認する

画像サイズは1200px×630px

ロゴなどの重要な要素はなるべく630px×630pxの中に入れる

OGP画像の見え方はツールで確認する

実際にSNSなどでシェアされた時、OGP画像の表示を確認するためにOGP画像シミュレーターというツールを使うのが便利です。

タイトルやディスクリプションが決まっていれば、OGP画像と合わせて表示シミュレーションができます。

【必須】ファビコン

Twitterカードのサイズ

スマホOSごとのアイコン

OGPの設定手順

コーディングの場合

<head prefix="og: https://ogp.me/ns#"><!-- OGPの使用を宣言するために必要 -->
<meta property="og:url" content=" ページのURL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページのタイトル" />
<meta property="og:description" content=" ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" OGP画像のURL" />
<meta name="twitter:card" content="summary_large_image"> <!-- Twitterカードのサイズ -->
<link rel="icon" href="img/favicon.ico"> <!-- ファビコンを指定 -->
<link rel="apple-touch-icon" href="img/apple-touch-icon.png"> <!-- appleアイコンを指定 -->
<link rel="icon" type="image/png" href="img/android-chrome-192x192.png"><!-- android-chromeアイコンを指定 -->

STUDIOの場合

設定できる項目
  • タイトル
  • 説明文（ディスクリプション）
  • ファビコン
  • カバー画像（OGP画像）

サイト全体の設定をする場合

ページ単位で設定する場合

Wixの場合

設定できる項目
  • タイトル
  • ディスクリプション
  • OGP画像
  • ファビコン
  • SNSにシェアされた時のの画像
  • SNSにシェアされた時のタイトル
  • SNSにシェアされた時の説明文
  • Twitter用の画像
  • Twitterカードサイズ
  • Twitter用のタイトル
  • Twitter用の説明文

ファビコンとOGP画像は設定から

それ以外の情報はページごとのSEO設定から

Twitter用の設定は別で項目が用意されている。

WordPressの場合　※プラグインによる

WordPressでの設定方法はプラグインによるので、使用しているプラグインでの設定方法を調べるのがいいです。

大抵のプラグインでは、

OGP設定が反映されているかはツールでも確認可能

OGP設定が反映されるかどうか確認するには、「OGPチェッカー」が便利です

URL：https://web-toolbox.dev/tools/ogp-checker

Web制作 HTML
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次