OGPとは?SEOへの影響や設定方法を解説
今回は、そんなSEO対策のなかから「OGP」について詳しく解説します。サイト運営の際にぜひ役立ててみてください。
- SEOに悩むサイト担当者必見!世界最高水準のテクニカルSEOツール「Lumar」
-
URLを入れるだけでサイト内部の問題を一括検出。
Googleと同じ視点でサイトクロール、
大規模サイトでも手軽に高度なSEO分析ができます!まずは無料デモクロールを試して、あなたのサイトの問題点を一括検出!
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択になります。
「summay」で指定した場合、表示される画像のサイズは小さめに正方形で表示されます。「アイキャッチばかりを強調したくない」「リンク先のタイトルを目立たせたい」という場合は、「summay」を用いることをおすすめします。
一方で「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対策でこんな思い込みしていませんか?
- 大きいキーワードボリュームが取れないと売上が上がらない・・
- コンサルに頼んでもなかなか改善しない
- SEOはコンテンツさえ良ければ上がる
大事なのは自社にあったビジネス設計です。
御社の課題解決に直結するSEO施策をご提案します