Hello! Uchii.code

SNSシェアで差をつける:OGP設定と画像の重要性とは?

2023-10-03に公開

まえがき

みなさんインターネット上で見つけたページを誰かにシェアしたい!1度はそう思った経験があると思います。最近では多くのサイトでSNSのシェアボタンが設置されているのをよく目にします。それだけではなく、どのブラウザにも標準でシェアボタンがついています。では実際にWebサイトを制作する側の人間として、どのようにこれらの画像や文章を設定するのでしょうか。

1.OGP設定の基本

1-1. OGP(Open Graph Protocol)とは何か?

OGP(Open Graph Protocol)は、ウェブページのメタデータを定義するためのプロトコルです。これは、ソーシャルメディアプラットフォームや検索エンジンがウェブページの内容を理解し、正しく表示するのに役立ちます。主に以下の属性を持っています。

  • og:title: ページのタイトルを指定します。(ページごとに異なる)
  • og:type: コンテンツの種類を指定します(例:記事、ウェブサイト、動画など)。
  • og:url: ページのURLを指定します。
  • og:image: ページのサムネイル画像のURLを指定します。
  • og:description: ページの簡単な説明を指定します。
  • og:site_name: サイトの名称を指定します。(全ページ共通)

OGPは、ウェブページがソーシャルメディアで共有されたり、検索結果に表示されたりする際に、より魅力的で正確なプレビュー情報を提供するのに役立ちます

1-2. OGP設定の重要性と役割

OGP設定はウェブページのプロモーションや可視性を向上させるために非常に重要です。以下はその役割と重要性の詳細です。

役割

  • 情報提供: OGPタグはウェブページの内容を要約し、ユーザーに情報を提供します。これにより、ユーザーはコンテンツの内容を把握しやすくなります。
  • ソーシャルメディアでの共有: ソーシャルメディアでウェブページが共有される際、OGP情報はプレビューとして表示され、ユーザーを引き込みます。正確な情報を提供することで、共有の効果を最大化できます。
  • 検索エンジン最適化(SEO): OGPは検索エンジンにも重要です。適切に設定されたOGPタグは、検索結果ページでのウェブページの表示を向上させ、クリック率を増加させます。

重要性

  • 第一印象: ウェブページが共有されたり、検索結果に表示されたりする際、OGP情報は最初にユーザーに表示されます。これにより、第一印象を良くすることができます。
  • ソーシャルシェアの品質向上: 適切なOGP設定は、ソーシャルメディアでの共有時にプロフェッショナルな外観を提供し、ユーザーエンゲージメントを高めます。
  • 検索エンジンランキング向上: OGP情報は検索エンジンにとっても重要であり、適切な設定は検索エンジンランキングを向上させ、ウェブページの可視性を高めます。

2 OGP設定の最適化

2-1. OGPタグの最適な設定方法

まずはheadタグにprefixを記述します。

<head prefix="og: https://ogp.me/ns#">

og:title
タイトルはOGPタグの中で最も重要な要素であり、ウェブページの内容を簡潔に伝える必要があります。通常はウェブページのタイトルタグと同じものが設定されていることが多いです。タイトルはページの主題やコンテンツの要点を示すために選択されます。

og:type
og:typeはウェブページの種類を指定します。ウェブサイトのコンテンツに応じて適切なタイプを選択します。これにより、ソーシャルメディアプラットフォームがコンテンツを適切に表示できるようになります。

  • article(記事)
  • website(ウェブサイト)
  • product(製品)
  • video.movie(動画 – 映画)
  • music.song(音楽 – 曲)など

og:url
og:urlはウェブページの正確なURLを指定します。異なるバージョンのURLがある場合、正規化したURLを指定し、混乱を避けます。このURLはユーザーがクリックした際に直接ページにアクセスするのに使用されます。

og:image
og:imageはSNSでウェブページが共有された際に表示されるサムネイル画像を指定します。高品質で魅力的な画像を選び、画像のサイズを適切に最適化する必要があります。

og:description
og:descriptionはウェブページの簡潔な説明を記載します。コンパクトで要約的な情報を記述し、ユーザーに内容を理解させる役割を果たします。

<meta property="og:title" content="ページごとの名称" />
<meta property="og:type" content="ページのタイプ" />
<meta property="og:url" content="サイトのURL" />
<meta property="og:image" content="OGP用の画像" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:site_name" content="サイト名(すべてのページで同じ)">

2-2. ページごとのOGP設定

ページごとにOGP設定を最適化することが重要です。異なるページに異なるog:title、og:image、og:descriptionを設定することで、コンテンツの特性に合わせた情報を提供できます。

  • タイトルのカスタマイズ: 各ページのタイトルをそのページの内容に合わせてカスタマイズします。一貫性を保ちつつ、ユーザーに適切な情報を伝えます。
  • 画像の選定: 各ページに関連する画像を選びます。ページのテーマやコンテンツに合致した画像を使用し、ユーザーの興味を引きます。
  • 説明の最適化: ページごとに異なる説明文を記載します。コンテンツの要点を強調し、ユーザーに理解させるために説明を最適化します。

2-3. OGP画像の最適化と適切なサイズ

OGP画像はシェア時に大きな役割を果たします。適切なサイズと最適化が必要です。

  • 画像サイズ: OGP画像は一般的に1200×630ピクセル以上が推奨されます。高品質でクリアな画像を提供し、ぼやけたり歪んだりしないようにします。
  • ファイル形式: 通常、PNGまたはJPEG形式が使用されます。選択する形式によって画質とファイルサイズを調整します。
  • 圧縮と最適化: OGP画像は適切に圧縮してファイルサイズを最小限に抑えますが、品質は維持します。ウェブサイトの読み込み速度にも影響しますので、適切なバランスを保ちます。

3-1. Xでのシェア設定

Xでは、カード(旧Twitter Cards)と呼ばれる独自の形式がOGPを拡張し、リンクを共有した際の情報をカスタマイズできるで設定しておきましょう。

<meta name="twitter:card" content="summary"> <!-- Twitterカードのタイプを指定 -->
<meta name="twitter:site" content="@Twitterアカウント"> <!-- 関連するTwitterアカウントを指定(任意) -->

3-2.設定したOGPを確認する方法

TwitterでのOGP確認をする場合は、「Twitter Card Validator」よりシェアしたいウェブページのURLを入力します。その後、“Preview card” ボタンをクリックして、Twitterカードのプレビューを表示します。

FacebookでのOGP確認をする場合は、Facebookの「シェアデバッガー」よりシェアしたいウェブページのURLを入力します。その後、“デバッグ” ボタンをクリックして、Facebookでのカードプレビューを表示します。

まとめ

<head prefix="og: https://ogp.me/ns#">
  <meta property="og:title" content="ページごとの名称" />
  <meta property="og:type" content="ページのタイプ" />
  <meta property="og:url" content="サイトのURL" />
  <meta property="og:image" content="OGP用の画像" />
  <meta property="og:description" content="ページの説明文" />
  <meta property="og:site_name" content="サイト名(すべてのページで同じ)">
  <meta name="twitter:card" content="summary"> <!-- Twitterカードのタイプを指定 -->
  <meta name="twitter:site" content="@Twitterアカウント"> <!-- 関連するTwitterアカウントを指定(任意) -->
</head>

上記のコードをコピペして使用できます。設定した後は、それぞれのチェックツールを使用して、確認しましょう!

Twitter Card Validator
シェアデバッガー

G e t i n T o u c h