【HTML】facebookとツイッターカードのOGPを設定する方法
OGPとは、
SNSでシェアされた時に、設定しておいた画像・タイトル・説明文が表示される仕組みの事です。
今はSNS時代ですので、必ず設定しておきましょう。
facebookとツイッターカードの共通コード
<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="website または blog または article">
<meta property="og:description" content="ページの説明" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
まずは上記のSNS共通のコードをheadタグ内に貼り付けてください。
次にfacebook用とツイッター用それぞれ専用のコードを追加します。
facebook用コード
SNS共通のコードに以下のfacebook用のコードも追加します。
<meta property="fb:app_id" content="App-ID" />ツイッター用コード
さらにツイッターカードを表示させる為に以下のコードを追加します。
ツイッターは必要ないという方は、記述しなくて大丈夫です。
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />それでは解説です！
共通のコードの解説
| og:url | ページのURLですが、サイトのトップページのURLで大丈夫です。絶対パスで指定します。 |
|---|---|
| og:title | こちらもトップページに使っているタイトルでOK。 |
| og:type | websiteもしくはblogの当てはまる方を入力。articleは下層ページの時に使用します。 |
| og:description | ページの説明。これもサイトの情報と同じで大丈夫です。 |
| og:image | OGP用の画像のURLを絶対パスで記述します。 最適なサイズは1260x600pxです。 |
| og:site_name | サイトの名前です。 |
| og:locale | 言語設定です。日本語ならja_JP
|
facebook用コードの解説
| fb:app_id | この項目は必須ではないようです。 それでも設定したい方はfacebookにログインし、左サイドのメニュー（PC版）にある「アプリを管理」をクリックします。 「新しいアプリを追加」をクリックし「表示名」を入れたら下の青いボタン「アプリIDを作成してください」をクリックして進みます。 ロボットの確認が終わればページが遷移するので、ページの一番上あるアプリIDを確認しましょう。 |
|---|
ツイッター用コードの解説
| twitter:card | シェアされた時に表示させたいカードの種類を選択。 ほとんどは、 summaryかsummary_large_imageを入力しておけば間違いないです。appやplayerというのもあります。 |
|---|---|
| twitter:site | @から始まるツイッターのユーザー名 |
ツイッターカードの種類
summary
summary_large_image
最後に
ここまでプラグインなしの方法を説明しましたが、
wordpressの場合は、「Yoast SEO」というプラグインを入れれば、ページ・記事毎にdescription等を細かく設定でき、カードの種類もドロップダウンメニューから選択するだけで切り替えられるのでオススメです。
