OGPとは
OGPとはOpen Graph protocolの略で、簡単に言うとコンテンツがSNSでシェアされた時に表示されるタイトルや概要、画像、URLをコントロールする事が出来る設定です。
この設定をするのとしないのではFacebookやTwitterでバズるかどうかが大きく変わります。
OGPの設定方法
・Prefix属性を設定する
下記の様なソースをhead内に書き込んでください。この処理は簡単に言うとこの次に設定するプロパティを使える様にするための設定です。
html class="no-js" prefix="og: http://ogp.me/ns#"
・プロパティを設定する
以下のプロパティを設定する事でシェアされた時の内容をコントロール出来ます。また必須なのはタイトル、タイプ、画像、URLとなっており、ソースはhead内に書き込んでください。
meta property="og:title" content="" /
➡""の中にタイトルを設定します。文字数は30字以内にしておきましょう。
meta property="og:type" content="" /
➡""内にページのタイプを設定します。WEBサイトであればwebsite、ブログであればblogと記載しますが、下層ページに関してはarticleとしてください。
meta property="og:image" content="" /
➡""内に使いたい画像のURLを設定してください。画像サイズは1200×630が推奨されています。
meta property="og:url" content="" /
➡""内に対象ページのURLを設定してください。
meta property="og:locale" content="ja_JP" /
➡サポートしている言語を設定します。日本語のみの場合は「ja_JP」と""内に設定してください。
※複数言語をサポートしている場合はalternateという記述を追加して下記の様に記載します。
meta property="og:locale:alternate" content="" /
meta property="og:description" content="" /
➡""の中に説明文を設定します。文字数は80〜90文字以内にしておきましょう
meta property="og:site_name" content="" /
➡""の中にサイト名を設定します。
meta property="article:author" content="" /
➡個人アカウントを紐づける場合は設定します。個人アカウントのURLを""内に記述してください。
meta property="article:section" content="" /
➡コンテンツ内容のカテゴリーを設定出来ます。※複数設定可能
meta property="article:published_time" content="" /
➡記事が公開された時刻を指定出来ます。
meta property="article:modified_time" content="" /
➡記事の更新が最後に行われた時刻が指定出来ます。
meta property="og:updated_time" content="" /
➡データのアップデートが行われた時刻を記述します。
meta property="fb:app_id" content="" /
➡サイトの情報をFacebookに登録する事で得られるIDです。
設定方法は下記のサイトが詳しく記載してあります。
Facebookインサイト設定の落とし穴、app_id, admins の違いとは - Six Apart ブログ
OGPの設定が正しいか確認する方法
Facebookが提供している下記のツールで確認が出来ます。
https://developers.facebook.com/tools/debug/
※いいねの数が50を超えると変更出来ないので確認は早めに行いましょう。
Twitter対策
ここまでの設定をしているとTwitterへの設定は非常に簡単です。
下記の二つを設定し、https://dev.twitter.com/docs/cards/validation/validatorから申請するだけです。
meta name="twitter:card" content=""
meta name="twitter:site" content=""
こちらの説明が詳しいので参照してください。
すぐにできるTwitter Cards設定 - E-riverstyle Vanguard
msnjnp.hatenablog.com
msnjnp.hatenablog.com
msnjnp.hatenablog.com
msnjnp.hatenablog.com
