SEO対策に関する実験やデータ分析などを公開します

SEOラボ

  • follow us in feedly
  • 友だち追加する

OGPとは~タグを設定してFacebookでサイト拡散させるポイントについて

2017/03/22 2017/12/15

OGPを設定し、FacebookやTwitterなどのSNS上でうまくサイト拡散させながら、サイト運用する方法があります。

今回は、FacebookのOGP、OGP設定の基本、WordPressのOGPについて中心に解説したいと思います。

OGPとは~SNSで巧みにサイト拡散させる7つの勘どころ

OGPとは

OGPとは、Open Graph Protocolの略で、FacebookやTwitterなどのSNS上でWebページを伝えるためのプロトコルです。
※参考:The Open Graph protocol

OGPは、Facebook発端で作成されたもので、HTMLのmetaタグを使って記述することができます。
また、サイト作成と同時に設定すべき必須の要素と言えます。

OGP設定の基本

基本的なOGP設定として、以下のよう基本的なOGPタグをHTMLファイル<head>タグ内に記述します。
※参考:OGP設定のHTMLソースと Facebook, Twitter Cardsの設定を全部まとめてメモ!

基本的な記述にプラスして、Facebook用とTwitter用のOGPタグを設定する形になります。
のちに解説します。

head要素のprefix属性

headタグにprefix属性を記述するのが正式な形のようです。

og:title

ページのタイトルを記述します。
一般的には、タイトルタグに書かれてる文言をそのまま記述します。

og:type

ページの種類を記述します。
「website」「blog」「article」「profile」が選択できます。
ブログサイトの場合、トップページなら「blog」、記事ページなら「article」を選択すると良さそうです。

og:description

ページの概要を記述します。
一般的には、メタディスクリプションタグの内容をそのまま記述します。

og:url

ページのURLを記述します。

og:image

ページの内容がわかるアイキャッチ画像のURLを記述します。

og:site_name

サイトの名前を記述します。

og:locale

サイトがサポートしてる言語を記述します。

日本語のみの場合は、「og:locale” content=”ja_JP」のように記述しておきます。

FacebookのOGP設定

FacebookのOGP設定は、先述した「基本的なOGP設定」にプラスして、HTMLファイルにFacebook用のOGP設定を以下のように記述します。

fb:app_id

Facebookで開発者(デベロッパー)登録し、取得したApp-IDを記述します。

App-IDを取得するには、Facebookにログイン後、「すべてのアプリ – 開発者向けFacebook」ページにアクセスし、「新しいアプリを追加」します。

新しいアプリを追加し、もろもろ設定することで、簡単にApp-IDが取得できます。

FacebookのOGP設定 イメージ

また、fb:app_idの代わりに、以下のようfb:adminsを記述することが出来ます。

adminIDの取得方法は、「adminIDを取得」で確認することが可能です。
>基本的には、「fb:app_id」を使って記述するパターンが多くみられます。

TwitterのOGP設定

TwitterのOGP設定は、先述した「基本的なOGP設定」にプラスして、HTMLファイルにTwitter用のOGP設定を以下のように記述します。

twitter:card

カードの種類を記述します。
「summary」「summary_large_image」「photo」「gallery」「app」の5種類から選択できます。
一般的には、以下のような「summary」タイプが多くみられます。

TwitterのOGP設定 イメージ①

twitter:site

Twitter IDを記述します。
記述ることで、カードにTwitter IDが表示されます。
Twitterにログイン後、以下のよう、アカウントのプロフィール部分などから確認できます。

TwitterのOGP設定 イメージ②

OGPの画像サイズ(ogp image)

OGPの画像サイズ(ogp image)は、「1200px×630px」の画像を用意しておくことで、PC・モバイル・タブレットデバイス対応できるようです。
※参考:FacebookのOGP画像の仕様変更 ポイントは「1200×630」と「PNG」

また、この仕様「1200px×630px」に合わせたOGPの画像サイズシュミレーターが公開されてます。
※参考:OGP画像シミュレータ

OGPの画像サイズを指定できる「ogp image」は、以下のように記述例できます。

いいねボタンとOGPの関係

いいねボタンとOGPの関係について、以下のようになります。
※参考:OGPタグを使って「いいね!ボタン」を有効活用

OGP設定なしの場合

自分の投稿に友達が「いいね!」したら、自分のウォールのみに掲載され、ニュースフィードには掲載されない。

OGP設定ありの場合

自分の投稿に友達が「いいね!」したら、友達のニュースフィードにも掲載される
OGPタグで指定したURL、タイトル、サムネイル画像など表示されます。

OGPタグを設定し、友達が多いユーザーに「いいね!」されれば拡散力がぐっと上がるでしょう。

OGPをデバッガーで確認する

OGPの設定を、以下のようなデバッガーで確認することができます。
参考:デバッガー – 開発者向けFacebook

OGPの設定が確認できるFacebookで公式公開されてるツールです。
「シェアデバッガー」「バッチインバリデイター」「アクセストークンデバッガー」といった機能からOGP設定が確認できます。

FacebookでOGPのキャッシュを更新する

FacebookでOGPのキャッシュを更新するには、以下のような手順になります。

①Facebookにログイン後、「デバッガー – 開発者向けFacebook」にアクセスします。
「シェアデバッカー」タブで、OGPのキャッシュを更新したい対象のURLを入力し、「デバッグ」をクリックします。

FacebookでOGPのキャッシュを更新する イメージ①

②「もう一度スクレイピング」ボタンをクリックし、以下のようスクレイピングの実行時間が数秒前になれば、FacebookでのOGPのキャッシュを更新が完了です。

FacebookでOGPのキャッシュを更新する イメージ②

WordPressのOGP設定

WordPressのOGP設定は、以下のようなサイトで確認することが可能です。
参考:WordPressでのFacebook OGPの設定方法

今日はWordPressで作ったサイトにFacebookのOGPを設定する方法をご紹介します。
プラグインで対応している方も多いと思いますが、なるべくプラグインを使わないでサイトを軽くするために手動で設定していきましょう。
参考:[WordPress]これは簡単!プラグインを使わずにOGPを設定する方法!

Facebookにブログ記事をいいね!してもらう際、ブログにOGP設定をしておけば、記事の情報が正しく投稿され、アクセスアップにも繋がります。
今回はそのOGP設定なるものをプラグインを使用せずに設定する方法をご紹介しますです。

まとめ

OGPタグを活用し、SNS上で効率よくサイトを認知させましょう。

価値ある内容を提供し、リンクが集まりやすいコンテンツにしながら、SEO対策で順位上昇を目指すことが重要です。

順位が上がらないのは、何が原因??
順位決定の仕組と、
サイトの問題点をアドバイス(無料)

お申込みはこちらから

上位表示を目指すURL

※アメブロ、jimdo、fc2ブログのURLはご遠慮ください

上位表示を目指すキーワード

会社名/組織名

ご担当者様名

電話番号

メールアドレス

※個人情報の管理は「プライバシーポリシー」に同意の上お申し込みください

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

本日の順位変動幅順位変動情報へ