OGPとは?Web制作において意外と重要だったりする「Open Graph Protocol」
![OGPとは?Web制作において意外と重要だったりする「Open Graph Protocol」](/_next/image?url=https%3A%2F%2Ft-cr.jp%2Fassets%2Fimg%2Fpost%2Fthumb%2Fsns.jpg&w=3840&q=75)
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
OGPとは?Web制作において意外と重要だったりする「Open Graph Protocol」をメモしました。
OGPとは?
OGPとは「Open Graph Protocol」の略称で
Webページの内容をSNS上でシェアするための仕組みです。
具体的に決まったフォーマットで情報を記載することによって
SNSでシェアされた際に情報が見やすく表示される様になります。
そのためwebページやブログの記事をSNS上でシェアしてもらうことを考えていいる場合は
設定した方が良い情報となります。
なぜ重要?
なぜ重要かといいますと
OGPを設定することでページや記事の情報を分かりやすくユーザーへ伝えることができます。
OPGを設定しなかった場合
リンクのURLしか表示されませんが
設定したサイトの場合
記事元のURL、ページタイトル、サイト説明、サムネイルが表示されます。
OGPの設置方法
HTMLファイルの「head」タグの中に以下のように設置します。
「facebook」のいいねボタンへ参照するには「fb
php-template<!-- og:locale 言語を指定します。 -->
<meta property="og:locale" content="ja_JP"/>
<!-- fb:app_id アプリのID -->
<meta property="fb:app_id" content="617728378296779"/>
<!-- fb:admins FacebookのID -->
<meta property="fb:admins" content="452057954923068" />
<!-- og:title Webページの名前 -->
<meta property="og:title" content="T-CREATOR とあるクリエイターのブログ"/>
<!-- og:description Webページの説明 -->
<meta property="og:description" content="web(ウェブ)のこと、HTML/CSSのこと、jquery/javascriptのこと、 ..."/>
<!-- og:url WebページのURL -->
<meta property="og:url" content="http://t-cr.jp/"/>
<!-- og:site_name Webページのサイト名 -->
<meta property="og:site_name" content="T-CREATOR とあるクリエイターのブログ"/>
<!-- og:type Webページのが何であるか blog,article,websiteのいずれか -->
<meta property="og:type" content="blog"/>
<!-- og:image Webページのサムネイル -->
<meta property="og:image" content="http://t-cr.jp/img/post/blog/tc-logo.gif"/>
確認方法
「OGP」が正しく設置されているかどうかは以下のページから確認できます。
上部の枠へOGPを設定したページのURLを入力します。
Card URLへOGPを設定したページのURLを入力します。
記事Article
もっと見る- article
Dockerの利用していないゴミを掃除しディスクスペースを解放するいくつかのやり方を紹介
- article
Next.js のバンドルサイズを可視化する@next/bundle-analyzer の紹介
- article
VSCodeでTypescriptファイルのimport補完で相対パスではなくエイリアスするための設定
- article
UUIDより短いユニークなIDを生成できるnpmライブラリnanoidの使い方
- article
【解決方法】TypeScript発生したTS2564 エラーの対処
- article
express で IP を取得する際などに利用する req.connection 非推奨(deprecated)の対処