Webサイトシェアを適切化する！OGPの設定方法をご紹介
現在では検索エンジンだけでなく、SNSも有効な検索手段として機能しています。WebデザインしたWebサイトをSNSでシェアして、流入を狙う方も多くいらっしゃるでしょう。
SNSでWebサイト内ページをシェアする場合、必ず設定したいのが「OGP（Open Graph Protocol）」です。OGP設定によってシェア内容が適正化され、多くのSNSユーザーの流入を見込めるようになるので間接的に「SEO」対策にもつながります。
今回はSNSと連携させたWebサイト制作を考えている方向けにOGPとは何か、そしてその種類や設定方法などをご紹介していきます。
OGPとは
OGPとは、「SNSでシェアされるWebページの投稿内容を管理するための技術」です。
SNSでWebページ内容をシェアする際は、一般的に投稿内にURLを貼りつけます。URLを貼りつけると、投稿内にWebページの画像や概要が自動表示されます。
ただし何も設定していない状態だと、意図しない情報が掲載されてしまう場合があります。たとえば記事トップ画像を表示したいのに作者画像が表示されてしまったり、記事内容と異なるコピーが表示されたりといったトラブルが起こります。
OGPを設定すれば、あらかじめ記事内容がSNSで掲載される際どんな画像や文章を表示するかなどをコントロールできます。各記事内容をSNSで確実に伝え、Webサイトの「ブランディング（認知度向上）」などを行うためには、OGP設定が必要です。
またOGP設定を行うと、「いいね！」された際友達のニュースフィードに記事内容が表示されます。拡散力が高まるので、「SNS経由で多くのユーザーにWebサイトコンテンツを見てほしい」と思うならば必ずOGP設定をしましょう。
OGPの種類
OGPは、
<meta property=”og:設定したい内容” content=”実際の設定内容” />
という形でヘッドタグ（<head>）タグ内にメタタグ（<meta>）の一部として記述していきます（og:はFacebook設定ではfb:、Twitter設定ではtwitter:に変化する）。
OGPには、次の種類があります。
・共通設定
・Facebook専用設定
・Twitter専用設定
共通設定
OGPで共通して使われる設定です。
・og:title・・・Webページのタイトルを指定
・og:description・・・Webページの概要を指定
・og:type・・・Webページタイプを指定（トップページか、下層ページかなど）
・og:url・・・WebページURLを指定（絶対パスで記述する必要あり）
・og:image・・・Webページサムネイルを指定（絶対パスで記述する必要あり）
・og:site_name・・・Webページが含まれるWebサイト全体のタイトル名を指定
などの種類があります。
上記で説明した中で、
・og:title
・og:type
・og:url
・og:image
は必須の設定です。
他にも位置情報や動画などに関するさまざまな設定があるので、必要に応じて使い分けましょう。
Facebook専用設定
Facebookに、適切にOGPを読み込ませるための設定です。
・fb:app_id・・・facebook for developersで取得したアプリIDを設定
・fb:admins・・・Facebookアカウントと紐づいたIDを設定
どちらか片方を、メタタグで設定しておきます。
fb:adminsでの設定は、プライバシーの観点から推奨されていません。よほどの理由がない限りは、fb:app_idを設定しましょう。
Twitter専用設定
Twitterに、適切にOGPを読み込ませるための設定です。
・twitter:card・・・Webサイトの表示方式（カード）を設定
・twitter:site・・・Twitter IDをカードといっしょに表示するための設定
などの種類があります。
・twitter:card
は、表示に大きく関係する設定のため必須です。
サムネイルを小さく表示したい場合はcontent=”summary”、大きく表示したい場合はcontent=”summary_large_image”を選ぶなどその場に応じて適切な設定を行いましょう。
またTwitter IDもページ内容といっしょに覚えてほしい場合は、twitter:siteなどを設定しておきましょう。
OGPの設定方法
ここからは、実際にOGPを設定する方法について解説していきます。
1.ヘッドタグにプレフィックスを記述する
2.メタタグとしてヘッドタグ内にOGP設定を記述していく
3.適切に読み込まれているか確認する
1.ヘッドタグにプレフィックスを記述する
まずは、ヘッドタグ内にプレフィックスを記述します。
・<head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# ページタイプ: URL”>
の形で記述を行います。
ページタイプの部分は、
・OGP設定をするページがトップページの場合：website:URL
・OGP設定をするページが下層ページの場合：article:URL
と2種類に分かれます。
間違って、下層ページにwebsite:URLを指定したりしないようにしましょう。
2.メタタグとしてヘッドタグ内にOGP設定を記述していく
次に、メタタグとしてヘッドタグ内にOGP設定を記述していきます。
・og:title
・og:type
・og:url
・og:image
・fb:app_id
・twitter:card
上記必須設定をもとに、必要なタグを記述していきます。
特に画像設定は、SNS上でユーザーの興味を引くために重要な部分です。
・1200px×630px（最低でも600px×315px以上）
の画像サイズが推奨されているので、画像アップロードの際の目安にしてください。
またSNS上では表示できる情報が限られているので、必須でなくても
・og:description
など設定をその都度追加しましょう。
3.適切に読み込まれているか確認する
OGP設定を行っても、その後適切に設定が読み込まれない可能性もあります。実際に投稿内容に表示崩れがないか、また表示されるべき情報が抜けていないかなどを確認しましょう。
Facebookが公式に提供している「Open Graph Debugger」など、OGP設定を確認できるWebツールも便利です。ぜひWebツールも活用しながら、OGP設定が正しく反映されているか確認してください。
ちなみに「WordPress」でOGP設定を行う際は、プラグインを利用すると作業が楽になります。
まとめ
今回はOGPとは何か、そしてその種類や設定方法について解説してきました。
SNSが多くのユーザーを獲得している中、適切なWebページシェアを行えば間接的なSEO効果も見込めます。OGP設定を行いあらかじめ表示したい内容をコントロールして拡散されやすいように準備しておけば、効果は最大化されるでしょう。
ぜひOGP設定をマスターして、SNS上でうまくWebページを宣伝してください。
▼関連記事
・適切なtitleやmeta descriptionの設定が必要な理由
・Webサイトの高速化を実現するAMP導入のポイント
・【動画】使いやすい問い合わせフォームで顧客流出を防ぐ！EFOの実践方法
MORE
