LoginSignup
3
2

More than 3 years have passed since last update.

OGPの設定の仕方

Last updated at Posted at 2019-03-12

OGP:Open Graph Protocolの略
設定しておくとURLを共有したときに設定した画像、タイトルなどが表示される

こういうの。
スクリーンショット 2019-03-12 18.57.31.png

OGPの設定

必須項目

og:title ページタイトル
og:type  ページ種類(website、blog、video、article など)
og:image サムネイル画像
og:url webページのURL

任意項目

og:description webページの説明文
og:site_name サイト名
og:email 連絡先
og:phone_number 連絡先
og:locale サポートしている言語(日本語のみの場合は"ja_JP")
※複数言語をサポートしている場合は"og:locale:alternate"で複数記載

html

<head>
 <meta property="og:locale" content="ja_JP">
 <meta property="og:type" content="website">
 <meta property="og:description" content="サイト説明文">
 <meta property="og:title" content="ページタイトル">
 <meta property="og:url" content="サイトURL">
 <meta property="og:image" content="http://~サイト画像">
 <meta property="og:site_title" content="サイト名">
</head>

正しく設定されているかはここで確認できる。

3
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2