Facebook、Twitterのシェア用設定と確認方法【OGP設定】

Facebookのいいね!や、Twitterでシェアされた時に、サイトにOGPの指定をしておくと、見た目や伝えたい情報が設定され、SNS効果が上がる方法をご紹介します。

OGPとは? ”Open Graph Protocol”の略。

facebook、Twitter、LINEなどで、ウェブページの情報とSNSを連携させるためのタグのことです。

OGPタグの設定

<head>の指定

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

metaタグでOGP設定

<!-- OGP設定 -->
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページの説明" />

<!-- Facebook用設定 -->
<meta property="fb:app_id" content="App-ID(半角数字)" />
もしくは
<meta property="fb:admins" content="adminID(半角数字)" />

<!-- ※Twitter共通設定 -->
<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:site" content="@[Twitter ID]" />
<meta name="twitter:player" content="@[Twitter ID]" />

OGP共通の指定

OGPタグ設定内容
og:titleページのタイトル
og:typeページの種類
・website, blog:トップページのみ
・artile: 記事やコンテンツページ
og:urlページのURL
og:imageサムネイル画像のURL
※絶対パスで指定
og:site_nameサイト名
og:descriptionページの説明

Facebook用の指定

Facebook用タグ設定内容
property=”fb:app_id”FacebookのApp ID(アプリID)OGPの設定やFacebook用のアプリを作成する時に必要なID
property=”fb:admins”【個人情報のため非推奨】
ページの管理者をFacebookのユーザーIDをで指定

Twitter用の指定

Twitter用タグ設定内容
twitter:cardtwitterでOGPを表示させるときの表示タイプを指定
content=”summary_large_image” 基本形
content=”summary_large_image” 大きく写真表示
content=”photo” 写真優先
content=”gallery” 複数写真
content=”app” アプリの紹介
twitter:siteそのサイトに対応するTwitterアカウント名を「@」込みで指定
twitter:player動画再生プレイヤーを指定

【参考情報】ツイートをカードで最適化する

OGP設定のチェック

OGPタグを設定したら、問題ないか、各社が提供しているかテストツールでチェックすることができます。

OGP画像シミュレーター(非公式)

http://ogimage.tsmallfield.com/

OGP画像をドラック&ドロップするとFacebookタイムラインでの見え方をチェックできます。

シェアデバッガー – Facebook for Developers

How does the Facebook Crawler work?

https://developers.facebook.com/tools/debug/sharing/?locale=ja_JP

FacebookやMessengerなどでシェアされた時の見え方をチェックできます。

Card Validator – Twitter cards

https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started

Twitterタイムラインでシェアされた時の見え方をチェックすることができます。

まとめ

Facebookのいいね!や、Twitterでシェアされた時に、サイトにOGPの指定をしておくと、見た目や伝えたい情報が設定され、SNS効果が上がる方法をご紹介しました。

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA