SEO/SEM

OGPとは?SEOへの影響や設定方法を解説

OGPとは?SEOへの影響や設定方法を解説
SEO対策にはさまざまな手法がありますが、どれも必ず効果が出るものばかりではありません。しかし、正しい使い方を理解して実行することで改善できるものは多いです。

今回は、そんなSEO対策のなかから「OGP」について詳しく解説します。サイト運営の際にぜひ役立ててみてください。
SEO対策でビジネスを加速 SEO DASH 無料でダウンロード

OGP(Open Graph Protocol)とは

OGPとは、”Open Graph Protocol”の略称です。自身のサイトがSNSでシェアされた際に表示される画像、文言を指定できるもので、metaタグの一種です。もともとは、Facebookで作成されたものになります。

OGPの設定がSEOに及ぼす影響

OGPを設定していないと、SNS側が自動でogpを設定してしまい、ユーザーにサイトの魅力を最大限届けることができません。つまり、最大限のSEO効果を見込めないので、ユーザーがシェアしてくれる回数も減ってしまいます。

しかし、OGPを的確に設定し、デザイン性が高い画像をアイキャッチに設定すれば、自然とユーザーの目に留まります。サイトのクリック率が高まったり、サイトが上位表示されたり、SEO効果が体感できるようになるでしょう。具体的なSEO効果について、下記で紹介していきます。

ソーシャルリンクからの流入が増えやすくなる

OGPを正しく設定することで、TwitterやFacebookなどのSNSに表示されるリンクがわかりやすく、ユーザーの興味を惹くような内容になります。

ユーザーがSNSでサイトのリンクを共有する際の心理としては、「見栄えが良く、興味深いものを共有することでフォロワーから好印象を抱かれたい」というひとつの動機が考えられます。OGPを正しく設定し、「自分のSNSで共有したい」とユーザーを促すことで、共有してくれる人の数が増えるかもしれません。また、わかりやすくリンクが表示されることでクリック率の上昇も見込めます。

ソーシャルリンクの質が上がる

OGPを正しく設定すると、TwitterやFacebookなどのSNSにおいてリンクのアンカーテキストを記事タイトルやサイトのタイトルに指定できます。つまり、狙い通りのアンカーテキストでリンクをもらうことができるので、リンク自体の質も向上するのです。

OGPの設定方法

OGPの設定方法は、下記の流れになります。

  • ogpの使用を宣言する
  • ページのURLを指定し、ページの種類を指定する
  • ページのタイトルを指定し、説明文を追加する
  • サイト名を指定、サムネイル画像のURLを指定する

特に難しいことはありませんが、各ページごとにOGPのタグを揃えないと機会損失につながるので、ページ数の多いサイトでも同じタグを揃えるようにしましょう。

OGPの基本的な設定方法

OGPの基本的な設定方法は、まずHTMLの<head></head>タグ内に下記の構造のメタタグを挿入するのが基本の形です。

<meta property=”og:プロパティ名” content=”内容”>

主なプロパティとそれが指す内容については、下記の表でご確認ください。

プロパティ名 内容
title 記事のタイトル
type 記事の種類

webサイトではTOP=website、それ以外=articleが一般的

url 記事の正規URL
image 表示したいアイキャッチ画像のURL(絶対パス)

その他、Webサイトの場合は「description」「site_name」などのオプションプロパティが使用されます。

具体例を用いてご紹介すると、「Web集客Labo」のトップページの場合は下記のように設定されています。

<meta property=”og:type” content=”website”>

<meta property=”og:title” content=”WEB集客ラボ byGMO”>

<meta property=”og:description” content=”WEB集客、解析・分析、SEOなどマーケター必見の情報をお届けします。”>

<meta property=”og:url” content=”https://gmotech.jp/semlabo/“>

<meta property=”og:site_name” content=”WEB集客ラボ byGMO”>

<meta property=”og:image” content=”https://gmotech.jp/semlabo/wp-content/uploads/2021/07/ogp_new.png“>

Twitter独自の追加設定

Twitterでブログカードを表示させる際、表示方法を指定するためには独自の追加設定が必要です。

<meta name=”twitter:card” content=”カードの種類”>

上記は表示方法を指定するためのOGPタグです。Webサイトの場合、カードの種類は必ず「summary」「summary_large_image」の2択になります。

Twitter独自の追加設定

「summay」で指定した場合、表示される画像のサイズは小さめに正方形で表示されます。「アイキャッチばかりを強調したくない」「リンク先のタイトルを目立たせたい」という場合は、「summay」を用いることをおすすめします。

Twitter独自の追加設定

一方で「sumarry_large_image」を用いた場合は、「summay」で指定した場合よりもアイキャッチ画像が大きく、長方形で表示されます。「summay」より画像が大きく表示され、視覚的なインパクトが非常に大きいのが特徴です。

魅力的・インパクトのあるアイキャッチを用意できた場合は、「sumarry_large_image」を用いることで更なるユーザーの流入を図ることができます。

Facebook独自の追加設定

Facebookにも独自のogp追加設定があります。

<meta property=”fb:app_id” content=”アプリID”>

上記のOGPタグを用いることで、Facebookインサイト「ブログカードをクリックしてくれたユーザー」について詳細な分析ができます。「いいね!」をしてくれたユーザーの新規数、通算数を確認できるのはもちろんのこと、アクティブユーザーの内訳や「いいね!」をしてくれた人の性別、年齢や国籍、市区町村などを確認できます。

ユーザーについて分析することで、よりSEO対策を実施しやすくなります。

OGPが正しい設定になっているか確認する方法

OGPが正しく設定できたかどうかを確認できる主な確認ツールは、下記の3つです。OGPを正しく設定できたか確認するには、無料のツールで十分です。

OGPを設定する上で確認すべき3つの注意点

OGPを設定するうえで確認しておくべきことは、主に3つあります。

  • descriptionの文字数
  • アイキャッチの画像サイズ
  • アイキャッチのURL設定

それぞれについて、詳しく見ていきましょう。

descriptionの表示文字数

「description」の文字数が多すぎると、途中で途切れてしまいます。途中で途切れてしまうと、伝えたいことをユーザーに届けられませんし、「しっかり確認をしていないサイト」と認定されてしまい、むしろクリック率が下がることも考えられます。

一般的には80〜120字程度が良いとされており、FacebookとTwitter両方で全ての文字を納めるには80文字程度が利用です。テクニックとしてあえてユーザーの「気になるところ」で区切る人も居ますが、ユーザーに対して具体的な内容を伝えた方が好印象を与えられるので、80文字程度に抑えることを意識しましょう。

アイキャッチの画像サイズ

アイキャッチの画像サイズにも気をつけましょう。画像が切れてしまうとユーザーにしっかりと魅力を伝えられません。Facebookでは1200px×630pxが推奨されており、Twitterは1:1の正方形に画像が切り抜かれる性質があります。

アイキャッチのURL

アイキャッチのURLは「相対パス」ではなく、「絶対パス」で書かなければいけません。なぜなら、例えば「絶対パス」では目的のファイルまでの道筋が全て記述されていますが、「相対パス」は「現在地から目的のファイルまでの道筋」しか記述されていないので、表示できないのです。

相対パスで記述してしまうと画像を読み込めず、アイキャッチが「noimage」と表示されてしまいます。

まとめ

OGPを的確に設定すると、SNSを用いてサイトへの集客率を高めることができます。

簡単なHTMLの記述が必要なので、プログラミングが苦手な方には一見難しく見えるかもしれません。しかし、OGPの記述は基本的なものばかりなうえに、技術的な作業は画像のサイズ変更程度です。サイトへの集客に悩んでいましたら、ぜひ一度挑戦してみてください。

SEO対策でビジネスを加速させる「SEO Dash! byGMO」
seo-dash!bygmo

SEO対策でこんな思い込みしていませんか?

  • 大きいキーワードボリュームが取れないと売上が上がらない・・
  • コンサルに頼んでもなかなか改善しない
  • SEOはコンテンツさえ良ければ上がる

大事なのは自社にあったビジネス設計です。 御社の課題解決に直結するSEO施策をご提案します

無料資料請求はこちら

プロフィール
大澤 健人(おおさわ けんと)
GMO TECH株式会社 大澤 健人(おおさわ けんと)大澤 健人(おおさわ けんと)のFacebook
2012年より一貫して検索エンジン領域のコンサルティング業務に従事。 2017年にGMO TECH社に参画。営業組織の構築、新商材開発、マーケティング部門立ち上げをおこなう。 現在、MEOコンサルティング、SEOコンサルティング、運用型広告などSEM領域全体を統括し、 お客様の期待を超える価値提供を行うため日々、組織運営・グロースに奔走している。
CONTACT US

デジタルマーケティングに関することならお気軽にご相談ください

メルマガ登録

メールマガジンはこちらからご登録ください。

デジタルマーケティングに関するホットな情報をお届けいたします。

フォームからのお問い合わせ

GMO TECHへの業務依頼、発注を希望される方はこちらよりご連絡ください。