Webサイトを運営するにあたり、SNSでの情報拡散は欠かせない要素です。SNSを活用することで、より多くのユーザーにリーチし、サイトへのトラフィックを増やし、ブランドの認知度を高めることができ、ビジネスの成長に貢献します。
しかし、SNS上で自分のサイトがどのように表示されるかは、多くの場合、Webサイトの設定に依存しています。
この記事では、SNSで適切に情報をシェアするために重要なOGP（Open Graph Protocol）の設定について解説します。正しいOGP設定によって、SNS上でのサイト表示をより魅力的にし、シェア数の増加につなげ、Webサイトの成果を最大化することを目指していきましょう。
OGP（Open Graph Protocol）とは
OGPの概要
OGPはOpen Graph Protocolの略称で、WebサイトをFacebookやX（旧Twitter）、LINEなどのSNSでシェアした際にどのように表示されるかを制御するHTMLのメタデータです。基本的には、Webページがソーシャルメディア上でリンクとして共有されたときに、正確なタイトル、説明、および画像が表示されるようにするためのものです。
OGPがWebサイトのメタデータを提供することで、ソーシャルメディアプラットフォームが共有されたWebサイトのコンテンツを適切に解釈し、リッチなプレビュー情報を生成します。つまり、OGPはWebサイトの外部プレゼンスを管理するための重要なツールであり、コンテンツのシェアリングが容易になるようにデザインされています。
OGPによってタイトル、説明、URL、画像などの要素を指定し、ソーシャルメディアプラットフォーム上で正確かつ魅力的なプレビューを提供することで、ユーザーの関心を引き付け、ブランドやコンテンツの認知度向上を図ることができます。
OGP設定のメリット
OGPは、WebサイトのSNS上でのシェアにおいて、Webサイトのプレゼンス（存在感）向上とブランドの認知度拡大に大きく関わっています。正しく設定されたOGPはウェブサイトのSNS上でのシェアにおいて不可欠な要素となっており、デジタルプレゼンスの構築において重要な役割を果たしています。
ソーシャルメディア上での魅力向上
OGPを適切に設定することで、Webサイトがソーシャルメディア上でより魅力的に表示されるようになります。正確なタイトル、説明、画像が表示されることで、ユーザーはリンクをクリックしやすくなります。これにより、Webサイトへのトラフィックが増加し、ブランドの知名度向上につながります。
コンテンツのシェアリングを容易化
OGPはコンテンツのシェアリングを容易にします。正確なプレビュー情報が表示されることで、ユーザーはコンテンツをより信頼しやすくなります。これにより、コンテンツのバイラルな拡散が促進され、新規ユーザーの獲得につながります。
ブランド力の強化
OGPの利点は、ソーシャルメディアプラットフォームでのプレゼンス向上だけでなく、ブランドイメージの管理にも関係しています。適切に設定されたOGPはブランドの統一性を確保し、ユーザーに一貫したブランド体験を提供することができます。これにより、ブランドの信頼性が高まり、顧客ロイヤルティの向上につながるでしょう。
基本的なOGPの設定方法
OGPの設定は、シンプルな手順で簡単に設定することができます。以下に基本的な設定方法を紹介します。なお、各プラットフォームによって微妙な違いがあるため、サイトに合わせて微調整することも大切です。
HTMLの<head>セクションにメタタグを追加する
以下のような基本的なメタタグを<head>セクション内に追加します。
<head prefix="og: <https://ogp.me/ns#>">
<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=" サムネイル画像のURL"> これにより、SNS上でのシェア時にタイトル、説明、画像、およびリンク先が正しく表示されます。
この行は、OGPで使用されるプロパティを定義するためのプレフィックスを指定します。これにより、OGPのプロパティが他のプロパティと区別されます。
og:urlは、シェアされるページのURLを指定します。これによって、正確なリンク先が共有されることが保証されます。
og:typeは、ページの種類を定義します。例えば、ウェブサイト、記事、ブログ投稿などが指定されます。
og:titleは、共有されたページのタイトルを定義します。これによって、SNS上で正確なタイトルが表示されます。
og:descriptionは、共有されたページの説明文を定義します。これによって、SNS上でページの要約が表示されます。
og:site_nameは、サイト全体の名前を定義します。これによって、SNS上でのサイトの正確な名前が表示されます。
og:imageは、共有されたページに関連する画像のURLを定義します。これによって、SNS上でのリンクのサムネイル画像が表示されます。
画像の最適化
OGPで使用する画像は、最適なサイズとフォーマットにすることが重要です。以下のポイントに留意することで、効果的な画像の設定が可能です。
一般的には1200×630ピクセルのサイズが推奨されます。このサイズはSNS上でのプレビュー表示に最適化されています。
画像のフォーマットとしては、JPEGまたはPNG形式が適しています。高品質で圧縮された画像を選ぶことで、表示品質を向上させることができます。
目を引く魅力的な画像を選ぶことが重要です。コンテンツの雰囲気や主題を適切に反映した画像を選びましょう。
タイトルと説明の最適化
SNS上で引き立つタイトルと説明文を設定しましょう。タイトルは短くてわかりやすいもの、説明文はコンパクトで興味を引くものを心がけましょう。以下のポイントに留意することで、効果的な設定が可能です。
タイトルの明快さ
タイトルは短くて分かりやすいものにします。コンテンツの要点が伝わるように工夫しましょう。
説明文の魅力
説明文はコンパクトで興味を引くものにします。コンテンツの要約となるようにして、読者の関心を引き付けるような工夫をしましょう。
主要なSNSプラットフォームでのシェアの効果的な最適化方法
Facebookでシェアする最適化方法
Facebookでシェアする場合、先述した基本的なコードに加えて以下のコードを追記します。これにより、Facebookでのシェア時に詳細な情報が表示され、ユーザーの興味を引きやすくなります。
アプリIDの指定
FacebookのアプリIDを設定します。これにより、Facebookの「インサイト」を使ってトラフィックの分析を行えるようになります。
<meta property="fb:app_id" content="FacebookアプリID">なお、アプリIDはこちらから取得します。（要ログイン）
コメントの指定
Facebookでのシェア時に表示されるコメントを指定することができます。
article:authorを指定すると、記事がニュースフィードで共有された際に、「フォロー」ボタンが表示され、指定した著者をフォローできるようになります。このボタンを表示するには、作成者が自分のプロフィールでフォローを有効にする必要があります。
<meta property="article:author" content="著者のFacebookプロフィールURL">ロケール（言語）の指定
og:localeを指定すると、サポートする言語を指定します。
<meta property="og:locale" content="ja_JP">X（旧Twitter）でシェアする最適化方法
Xではコンテンツをシェアするために、先述した基本的なコードに加えて以下のコードを追記します。これにより、Xでのコンテンツのシェアがより効果的になり、ユーザーの興味を引きやすくなります。
ハンドルの指定
コンテンツに関連するXアカウントのハンドルを指定することができます。twitter:siteはWebサイトのTwitterID（Xユーザー名）、twitter:creatorはコンテンツ作成者のTwitterIDを指定します。
<meta name="twitter:site" content="@YourTwitterHandle">
<meta name="twitter:creator" content="@AuthorTwitterHandle">カードの指定
twitter:cardでTwitterカードのタイプを指定することができます。summary、summary_large_image、app、playerなどの選択肢があります。summary_large_imageでは、スマホで表示した際に、より大きくカードが表示されるためクリック率の向上が狙えます。summaryにするとタイトルや概要が表示されるため、用途に合わせて使い分けましょう。
TwitterからXに変わったことで、タイムラインでの表示のされ方も変わってきていますので、今後の動きを注視していく必要があります。
<meta name="twitter:card" content="summary_large_image">OGPを設定する時の注意点
各ページごとにOGPタグを整える
OGPを設定する際は、各ページごとに適切なOGPタグを設定することが重要です。各ページに適切なタイトル、説明文、および画像を表示するためには、各ページのコンテンツに応じたOGPタグが必要です。
各ページごとに異なるコンテンツを提供している場合、同じOGPタグを使い回すと、コンテンツの特徴が正確に伝わらず、ユーザーの混乱を招く可能性があります。
例えば、ブログの記事ページでは記事のタイトルと説明文、画像を表示するためのOGPタグを設定し、製品ページでは製品の名前や特徴、商品画像を表示するためのOGPタグを設定する必要があります。
各ページごとに適切なOGPタグを設定することで、ユーザーがSNS上でコンテンツをシェアする際に、正確な情報が表示されるようになります。
OGPが正しく設定されているか確認する
設定したOGPタグが正しく機能しているか定期的に確認することが重要です。設定したOGPタグが正しく動作していない場合、SNS上でのコンテンツのシェア時に意図しない表示がされる可能性があるため注意しましょう。
OGPが正しく設定されているかを確認するためには、以下のようなサイトを活用すると便利です。
OGP確認ツール
入力したURLを解析し、サイト内のOGP（Open Graph Protocol）とTwitterカードを表示します。
ラッコツールズ OGP確認
URLを入力することで、そのページのOGP設定の確認ができます。Facebook・Twitter・はてなブックマーク・LINEでページをシェアした際のOGP画像・タイトル・説明文を表示（プレビュー）できます。
おわりに
OGP設定はWebサイトのSNSでのシェア効果を最大化するための重要な手法です。
各ページごとに適切なOGPタグを設定し、コンテンツの特徴が正しく伝わるように注意しましょう。
また、定期的にOGPタグが正しく設定されているかを確認することで、SNS上でのコンテンツのシェアがスムーズに行われることを確保します。SNSの各プラットフォームは仕様変更も多く、いつの間にか想定の表示がされなくなっている場合があり注意が必要です。
正確な情報が表示されることで、ユーザーの関心を引き、より多くのシェアを促すことができます。
