SNSシェアが楽しくなる!OGP設定で差をつける方法とSEOとの意外な関係


「SNSシェアが楽しくなる!OGP設定で差をつける方法とSEOとの意外な関係」ということで、OGPについて触れていきます。OGPとは「Open Graph Protocol(オープン・グラフ・プロトコル)」の略で、ホームページ内の記事などをSNSシェアした時に表示される画像やタイトル、概要文を設定するルールです。

せっかく書いた素敵な記事や、渾身のホームページ。SNSでシェアしたとき、なんだか地味な表示になっていませんか?

タイトルや画像がうまく表示されずリンクを貼っただけでは、せっかくの魅力が伝わりにくく、もったいないですよね。そんなOGPなしのシェアは、やはり非常にもったいないです。

そこで今回は、SNSシェアが楽しくなるOGP設定についてお話しします。OGPは、ホームページをSNSでシェアしたときに、画像やタイトル、説明文を意図した通りに表示するための設定です。これをきちんと行うだけで、あなたのコンテンツは見違えるほど魅力的になります。

どうせSNSで記事紹介をするなら効果を最大化したいですよね。OGPを設定することで、見た目の良さが向上し、クリック率アップにつながります。SNS上で魅力的なプレビュー(リッチオブジェクト)が表示され、ユーザーのクリックを促すことができます。WordPressをお使いなら、実はプラグインを使えば簡単に設定できるのでご安心ください。

OGPの基本から実践的な設定方法、そしてSEOとの意外な関係まで一緒に見ていきましょう。

あなたのホームページのSNSでの見え方がきっと変わりますよ。

なぜ、あなたの記事はSNSでクリックされないのか?

SNS フィード

SNSは、たくさんの情報が流れていく場所です。通勤電車の中で、休憩中に、指先ひとつでたくさんの情報に触れられる世界です。そんな中で、あなたの書いた記事が読者の目に留まるかどうかは、ほんの一瞬で決まってしまいます。

その一瞬の判断を左右するのが、アイキャッチ性、「見た目の魅力」です。

記事の内容がどれほど素晴らしくても、まず見てもらえなければ意味がありません。

そして、見てもらうためには、まず視覚的に訴えかける必要があります。

文字だけのリンクや意図しない画像が表示されてしまうと、あなたの記事は多くの情報の中に埋もれてしまいます。

これは、せっかくの努力が台無しになってしまう可能性があります(非常にもったいないことです)。

やはりどうせ配信するなら効果を最大化するに越したことはありません。

OGP設定は、まさにそのための最初のステップです。

SNSでの見た目が、いかに読者のクリック率に影響するか、そしてその見た目を整えることが、あなたのホームページの魅力を引き出す上でいかに重要かを改めて見ていきましょう。

「見る」か「見ない」か、一瞬で決まる世界

人間は、文字よりも画像を早く認識すると言われています。

例えば、あなたがSNSのタイムラインを見ているとき、ぱっと目に入るのは、魅力的な写真や分かりやすいタイトルではないでしょうか。

OGPが適切に設定されていないとSNS側がランダムに画像を拾ってきたり、本文の最初の数行を切り取って表示したりすることがあります。

これでは、せっかくの素晴らしい記事のSNSシェアもその魅力が伝わらず、他の情報に埋もれてしまいがちです。

ある調査によると、適切なOGP設定を行った場合とそうでない場合とでは、SNSからのクリック率に数倍の差が出るという報告もあります。これは、見た目が良いだけで、それほど大きな違いを生むということを示しています。

SNSでの表示がなぜ重要なのか

ホームページの集客を考えると、SNSは非常に重要な経路です。特に、気に入った記事を「シェア」してもらうことで、あなたの情報がさらに多くの人に届く可能性が広がります。

しかし、シェアされた記事の表示が魅力的でなければ、せっかくの「いいね!」や「リポスト」も、次のクリックには繋がりません。

SNSでの見栄えを良くすることは、読者に「この記事を読んでみたい」と思ってもらうための最初のステップです。

OGPって、結局何のことですか?

Facebook OGP

Facebook OGP

OGPって、なんだか専門用語っぽいですよね。でも、理解してしまえばとてもシンプルです。OGPは「Open Graph Protocol(オープン・グラフ・プロトコル)」の略で、ひと言でいうと「ホームページの情報をSNSに伝えるためのルール」です。

アイキャッチ画像(ヘッダ画像)・OGP Web制作|ホームページ制作用語

OGPはホームページの「身分証明書」です

OGPは、例えるならホームページの「身分証明書」のようなものです。

「私の名前はこれです」「私の顔写真はこちらです」「私はこういう者です」と、SNSに対して正確に自己紹介するための設定です。この「自己紹介」を行うために、OGPには専用のメタタグというものが用意されています。これをホームページのHTMLに記述することで、SNSでシェアされたときに、あなたが意図した通りの画像やタイトル、説明文を表示させることができます。

このメタタグは、<head>タグ内に記述されるもので、ウェブページの裏側、つまりユーザーには見えない部分で、SNSとのコミュニケーションを担う、非常に重要な役割を果たしています。

OGPを設定しないと何が起こるか?

もしOGPを設定しないままSNSでシェアすると、どうなるでしょうか。

SNSのシステムは、そのホームページがOGPを設定しているかどうかをまず確認します。設定されていなければ、SNSのアルゴリズムが、あなたのホームページの中から、ランダムに情報を選んで表示してしまうのです。その結果、

  • 画像が表示されない:本来表示してほしい魅力的な写真ではなく、何も表示されない、あるいは意図しない広告画像が表示されることがあります。
  • タイトルの途中で切れてしまう:記事のタイトルが長すぎると、途中で省略されてしまい、読者に伝えたいメッセージが届きません。
  • 説明文が意味不明な文章になってしまう:記事本文の冒頭部分がそのまま表示されるため、文脈が通じない文章が表示されることがあります。

こんな風に、せっかくの素晴らしい記事やホームページが、魅力的ではない見た目で表示されてしまう可能性があります。これでは、もったいないですよね。

SNSシェアの最適化

OGPを設定すると、SNSでURLを共有した際に、自動的に魅力的な画像や説明が表示されます。例えば、OGPなしではSNS側が勝手にページから情報を抽出するため意図しない画像やテキストが表示され、ユーザーの興味を引けません。

一方、OGPを設定すれば、タイトル(og:title)、説明(og:description)、画像(og:image)などをカスタマイズでき、クリック率(CTR)が向上します。これにより、SNSでの拡散(シェア、いいね、リポスト)が促進され、サイトへの流入が増えます。

OGPはSNS上での「勝負」を有利にする

OGPを設定することは、単に見た目を良くするためだけではありません。それは、SNSという激戦区で、あなたのホームページを際立たせるための武器です。

魅力的な見た目の投稿は、無意識のうちに読者の興味を引きつけ、クリックを促します。それは、SNS上での「勝負」を有利に進めることにつながります。

SNSのタイムラインは流し見が多いため、視覚的に魅力的なOGPはエンゲージメントを高め二次拡散を呼び起こします。OGP設定をしておくと、こうした結果から「SNSからの集客」が安定するというのメリットが生まれます。

あなたのホームページの魅力を最大限に引き出し、SNSでより多くの人に届けるための、最初の一歩として、OGP設定は非常に重要です。

OGPとリッチリンク(リンクカード)

なお、OGPとリッチリンク(リンクカード)は、しばしば同じような意味で使われることがありますが、実は少し違います。OGP(Open Graph Protocol)は、ホームページのHTMLに記述する「技術的なルール」です。一方、リッチリンク(リンクカード)は、そのOGPのルールに基づいてSNSやチャットアプリに表示される「見た目の形式」のことを指します。

OGP設定で差をつける3つの要素

SNSシェアが楽しくなる!OGP設定で差をつける方法とSEOとの意外な関係

OGP設定がなぜ重要なのか、その理由を何となくご理解していただけたと思います。

ここからは、具体的にどんな要素を設定すれば、あなたのホームページがSNSで際立つのか、その3つの大切な要素について見ていきましょう。

基本的には以下のような要素があります。

  • og:image: 記事の顔となる画像
  • og:title: クリックしたくなるタイトル
  • og:description: 記事の要点を伝える説明文

og:image: 記事の顔となる画像

SNSで一番に人の目を引くのはやはり画像です。og:imageは、シェアされたときに表示される画像を指定する要素です。

適切な画像を設定しないと、SNS側がページのロゴや全く関係のない広告バナーなどを勝手に拾ってしまうことがあります。

これでは、せっかくの素晴らしい記事も、クリックされないまま流れていってしまいますよね。

理想的なのは、記事の内容を象徴するような魅力的で高解像度の画像を設定することです。画像は、記事の「顔」として、読者の興味を惹きつけるための重要な役割を果たします。

og:title: クリックしたくなるタイトル

og:titleは、シェアされたときに表示されるページのタイトルです。

このタイトルは、読者が「この記事を読んでみたい」と思うかどうかを大きく左右します。SEO対策で設定するタイトルとは別に、SNSでの表示に特化したタイトルを設定することもできます。

例えば、

  • SEO向けタイトル: 「OGP設定の基本とSEOの関係性について解説」
  • OGP向けタイトル: 「SNSシェアが楽しくなる!OGP設定で差をつける方法」

このように、SNSの文脈に合わせた、よりキャッチーで短く分かりやすいタイトルを設定することで、クリック率の向上を狙うことができます。

og:description: 記事の要点を伝える説明文

og:descriptionは、タイトルの下に表示される説明文です。

この記事がどんな内容なのかを、簡潔に、かつ魅力的に伝えることが重要です。読者はこの説明文を読んで、記事を読む価値があるかどうかを判断します。

SNSの投稿は、情報が流れやすいので、長文は読まれにくい傾向にあります。そこで、100文字から120文字程度の文字数で、記事の核心を伝えるような説明文を心がけましょう。

これらの3つの要素を適切に設定することで、あなたのホームページはSNS上で、より多くの人の目に留まり、クリックされる可能性が高まります。

OGP設定を実践してみよう!

Facebook OGP2

Facebook OGP2

OGPがなぜ重要なのか、そしてどんな要素が大切なのか、そのあたりが何となく伝わったかもしれません。

それではここからは、実際にOGP設定をどうすればいいのか、その方法についてお話しします。

基本のメタタグを理解する

OGPを設定するには、ホームページのHTMLの <head> タグ内に、専用のメタタグを記述します。

これは、ちょっと専門的な話に聞こえるかもしれませんが、一度テンプレートを作ってしまえば、あとは簡単です。

<meta property="og:title" content="【記事のタイトル】">
<meta property="og:description" content="【記事の要約】">
<meta property="og:type" content="article">
<meta property="og:url" content="【記事のURL】">
<meta property="og:image" content="【アイキャッチ画像のURL】">
<meta property="og:site_name" content="【サイト名】">

このように、それぞれの情報に対応したタグを記述していきます。もしホームページ全体で共通の設定をする場合は、og:typewebsite に設定することもできます。

SNSごとの最適化

FacebookやXではOGPが標準的にサポートされ、画像サイズ(例: Facebook推奨1200×630px、X推奨1200×675px)を守ることで表示崩れを防ぎます。Instagramはリンク投稿が制限されるためOGPの影響が少ないですが、ストーリーズ経由の流入を間接的に支えます。

FacebookとX(旧Twitter)のOGPの違い

X(Twitter Cards)summary_large_image

X(Twitter Cards)summary_large_image

OGPは、もともとFacebookが提唱した技術ですが、多くのSNSがこのOGPのルールに準拠しています。

しかし、X(旧Twitter)は独自の「Twitter Cards」というものを持っています。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@【X(旧Twitter)のアカウント名】">

twitter:cardsummary_large_image に設定することで、OGPの og:image で指定した画像を大きく表示させることができます。

OGPとTwitter Cards、両方を設定しておくことで、より多くのSNSで意図した通りの表示を実現できます。

Twitter Cardsの種類

X(旧Twitter)は、OGPとは別に「Twitter Cards」という独自の仕組みを持っていますが、ここでその種類について見てき見ましょう。OGPを設定していれば、Xも基本的にはその情報を読み取ってくれますが、より意図した通りの表示にしたい場合は、Twitter Cardsの設定もしておくことをおすすめします。

1. Summary Card

X(Twitter Cards)Summary Card

X(Twitter Cards)Summary Card

記事のタイトル、説明、そして小さなサムネイル画像を表示する、最も基本的なカードです。簡潔に内容を伝えたい場合に適しています。

2. Summary Card with Large Image

このカードが、一般的に最もよく使われるタイプです。タイトル、説明文の下に、大きな画像を表示します。画像を強調することで、視覚的に訴えかけ、読者の興味を引きやすくなります。多くのメディアサイトやブログがこの形式を採用しています。

3. App Card

モバイルアプリの情報を表示するためのカードです。アプリのアイコンや評価、価格、そして直接ダウンロードページに誘導するボタンを表示できます。アプリのプロモーションを目的とする場合に適しています。

4. Player Card

音声や動画ファイルを埋め込むためのカードです。ユーザーは、Xのタイムライン上で直接、動画や音声を再生することができます。動画コンテンツを配信している場合に非常に効果的です。

これらのTwitter Cardsを適切に使い分けることで、あなたの投稿はXのタイムライン上でより魅力的になり、クリック率の向上につながります。多くの場合は「Summary Card with Large Image」を設定しておけば、十分な効果が期待できます。

OGPはSNS上での「看板」です

Facebook OGP3

Facebook OGP3

OGP設定を適切に行うことで、あなたのホームページや投稿のSNSシェアは魅力的な「看板」のような存在になります。これは単なる見た目の問題ではなく、あなたの事業や活動にとって、非常に重要な意味を持っています。

アイキャッチ性を高めることでどのようなメリットが有るのでしょうか?

SNSでシェアされるとどうなる?

あなたのホームページの記事が、読者の心に響いたとします。

その読者が「これは多くの人に読んでもらいたい!」と思い、SNSでシェアしてくれたら、あなたの情報がさらに多くの人の目に触れる機会が生まれます。

このとき、OGP設定がきちんとされていれば、以下のようなメリットがあります。

  • クリック率の向上 魅力的な画像やタイトルが表示されることで、タイムラインに流れてきた人たちが、無意識のうちにクリックしたくなる可能性が高まります。これは、SNSのアルゴリズムにおいても有利に働く場合があります。クリック率が高い投稿は、より多くの人に表示されやすくなる傾向があるからです。
  • 情報の正確な伝達 あなたが意図した通りのタイトルや説明文が表示されるので、記事の内容が正確に伝わります。これは、読者の期待とのズレを防ぎ、読了率やエンゲージメントの向上にもつながります。
  • ブランドイメージの統一 ホームページのロゴや、統一されたイメージの画像を表示することで、あなたのブランドがより多くの人に知られるきっかけになります。SNS上の投稿一つひとつが、あなたのブランドを構成する要素となるのです。

「いいね!」や「リポスト」がもたらす効果

SNSは、人々が共感し、情報を共有し合うコミュニティです。OGPを適切に設定することで、あなたの記事は「いいね!」や「リポスト」をされやすくなります。

これは、SNS上であなたの記事が「信頼性のある、共有する価値のある情報」として認識されたことを意味します。

これらのSNSでの行動は、あなたのホームページへのアクセス数を増やすだけでなく、間接的にあなたの事業への信頼性を高めることにもつながります。

そして、この信頼性は、今後の顧客獲得や事業の成長に欠かせない大切な資産になります。

OGP設定とSEOのちょっと意外な関係

OGP設定は、SNSでの表示を最適化するためのものなので、Googleなどの検索エンジンのランキングに直接影響を与えるわけではありません。

しかし、OGP設定を適切に行うことで、間接的にSEOに良い影響をもたらすことがあります。

直接的な関係はないけれど…

Googleの検索エンジンは、OGPのメタタグを直接的にランキングの評価要素としていません。

つまり、OGPを設定したからといって検索順位がすぐに上がるわけではありません。

これは、OGPがSNSという別のプラットフォームでの表示を目的としているためです。

検索エンジンは、あくまでホームページ自体のコンテンツや技術的な側面を評価します。

間接的にSEOに貢献する仕組み

それでも、OGP設定は間接的にSEOに貢献する重要な要素になりえます。その仕組みは、以下の通りです。

  • SNSからのアクセス増加 魅力的なOGP設定によってSNSからのクリック率が上がると、あなたのホームページへの訪問者が増えます。
  • 被リンクの獲得 多くの人に記事が読まれ、共有されることで、他のホームページからあなたの記事へのリンク(被リンク)が獲得できる可能性が高まります。
  • サイテーションの増加 SNSでの言及(サイテーション)が増えることで、あなたのホームページが「信頼性のある情報源」として認識される可能性があります。

これらはすべて、検索エンジンがホームページを評価する上で、間接的にプラスに働く要素です。

OGP設定は、単なるSNS対策ではなく、あなたのホームページの総合的な評価を高めるための、大切な一歩なのです。

OGP設定の実装方法(具体的な記述例)

OGPがなぜ重要なのかを理解したところで、次は実際にどうやって設定するのか見ていきましょう。

HTMLへの記述方法やWordPress上の設定方法、無料ブログサービスでのOGP設定について触れていきます。

基本はHTMLへの記述方法ですが、WordPressなどのCMSにおいてはプラグインが他のSEO設定(タイトル、ディスクリプション設定)やアイキャッチ画像設定からOGPを自動設定してくれたりもします。

HTMLへの記述方法

まずは、ホームページのHTMLファイルに直接記述する方法です。これは、ホームページ制作の知識が必要になりますが、一度覚えてしまえば、どんなホームページにも応用できます。

OGPのメタタグは、<head>タグ内に記述します。

<head>
<meta property="og:title" content="記事のタイトル">
<meta property="og:description" content="記事の概要">
<meta property="og:type" content="article">
<meta property="og:url" content="https://www.example.com/your-article-url">
<meta property="og:image" content="https://www.example.com/your-image.jpg">
<meta property="og:site_name" content="あなたのサイト名">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@あなたのツイッターアカウント">
</head>

このように、記事ごとに情報を入力していくだけです。

WordPressでの設定方法

WordPressをお使いなら、もっと簡単にOGP設定ができます。

ほとんどの場合、SEO対策プラグインにOGP設定の機能が標準で備わっています。例えば、「All in One SEO Pack」や「Yoast SEO」といった有名なSEOプラグインを使えば、記事の編集画面で画像やタイトル、説明文を設定するだけで自動的に適切なOGPタグが生成されます。

プログラミングの知識がなくても簡単に設定できるので、WordPressをお使いの方には特におすすめです。

よりこだわる場合は個別のOGP設定をすることもできます。

無料ブログサービスでのOGP設定

無料ブログサービスは、OGPが標準装備されているものと、そうでないものがあります。

もし、お使いのブログサービスにOGP機能が標準で備わっていない場合でも、諦めることはありません。ブログテンプレートの変更でOGP対応のものに切り替えたり、テンプレートのHTML編集機能を使って、手動でOGPタグを追加できる場合もあります。

無料ブログサービスであっても工夫次第でOGP設定は可能です。

SNSの仕様変更に備えることの重要性

X(Twitter Cards)Summary Card うまく読み込めない

ここまで、OGPの重要性や設定方法についてお話ししてきました。しかし、OGP設定は一度設定したら後は野放しにして良いというわけではありません(そうあって欲しいですけどね)。まれにOGPがエラーを起こすときがあります。これはSNS側の仕様変更が原因の場合もあれば、OGPに関係するSEOプラグインの仕様変更などによる場合もあります。

SNSの世界は常に進化しています。そのため、OGPに関する仕様も予告なく変更されることがあります。定期的なチェックが必要です。

過去にあった仕様変更の例

たとえば、FacebookやX(旧Twitter)は、過去に何度もOGP画像の推奨サイズやアスペクト比を変更してきました。

  • 画像の表示方法の変更 以前は正方形で表示されていた画像が、長方形で大きく表示されるようになったり、逆に小さくなったりすることがあります。
  • カードタイプの追加・変更 X(旧Twitter)では、summary_large_imageという大きな画像を表示するタイプが主流になるなど、カードの種類が増えたり、推奨されるものが変わったりしました。

これらの変更に対応していかないと、せっかく設定したOGP画像が意図しない形で表示されたり、せっかくの画像が切れて表示されてしまったりする可能性があります。

OGPプラグインのメジャーアップデートの影響

まれにOGPがエラーを起こすときがあります。これはSNS側の仕様変更が原因のときもあれば、OGPに関係するプラグインのメジャーアップデートやアップデート時のバグ、仕様変更などによる場合もあります。

不具合の場合はマイナーアップデートで修正されることもありますが、メジャーアップデートで記述の変更やデーターベース内の取り扱いの変更があった場合、設定を見直す必要が出てくる場合があります。

SNSでシェアをした時に表示がおかしい場合は、こうした設定面に新たな項目が加わっていないかを確認しましょう。

定期的な見直しと調整が大切な理由

OGP設定は、SNSであなたのホームページを魅力的に見せるための大切な機能です。

SNSは、あなたのホームページに多くの人を呼び込むための重要な窓口です。その窓口が、常に最新の仕様に対応しているかを定期的に確認することが重要です。

新しい記事を投稿する際や既存の記事を更新する際など、こまめにOGPの設定が適切に表示されているか確認する習慣をつけるとよいのではないかと思います。

SEOで質の高いコンテンツを作成 → OGPでSNSシェアを魅力的に → SNS拡散で流入とリンク増加 → SEO評価向上の好循環という仕組みを用意するということが、Web集客を加速させます。


著者・監修 : 株式会社ファンフェアファンファーレ

2012年創業の京都のWeb制作会社 ホームページ制作やSEO、Web集客・Webマーケティングをメインテーマにお届け。SEOやAI活用、Web以外の集客何でも来いです。中小零細企業を中心に「きちんとしたホームページ集客」を考えて、ホームページ制作や様々なWeb集客戦略を提案しています。 ホームページ制作に限ると、のべ制作数は160社(少ないって?それはそれだけ1社あたりのWeb集客施策や修正に集中してるからさ)

「SNSシェアが楽しくなる!OGP設定で差をつける方法とSEOとの意外な関係」のカテゴリ Web制作・Web関連
タグ: , , , , ,


ホームページ制作・カスタマイズ、Webマーケティング・SEOなどのお問い合わせ・ご依頼