WebDesigner's Memorandumウェブデザイナーの備忘録

TwitterとFacebook用のOGP設定方法と表示確認方法

OGP設定

OGPはSNSシェア時に使用される情報

OGPはSNSにシェアした時に表示される情報の事で、Open Graph Protcolの略です。

ちなみに、OGPで設定するアイキャッチ画像のことをOGP画像・og:imageなどと呼んだりします。

OGPの設定方法

設定にはそれぞれサービスごとに<meta>タグを<head>内に設置します。

<meta property="og:url" content="URL">
<meta property="og:title" content="タイトル">
<meta property="og:type" content="ページの種類">
<meta property="og:description" content="説明文">
<meta property="og:image" content=" アイキャッチ画像の URL">
property内容
og:urlページのURLを絶対パスで入力。
og:titleページのタイトルを入力。
og:type「website」「blog」「article」のいずれかを入力。
websiteとblogはトップページにのみ使用して、
それ以外のページにはarticleを使用する。
og:descriptionページの説明文を入力。
og:imageアイキャッチ画像のURLを入力
サイズは一般的には1200px × 630pxで、
「1.91:1」の比率が良いとされています。

Facebook用のタグ

上記に加えて、FacebookではOGPを表示させるためにひと手間必要です。

<meta property="fb:app_id" content="App-ID">

アプリIDと呼ばれる15文字の半角英数字を入力しなければいけません。

Twitter用のタグ

Twitterでは、シェア時に表示するTwitterカードの設定が必要になります。

<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@Twitter ID" />
name内容
twitter:cardカードの種類を入力。
基本的には表示の小さい「summary」か
表示が大きい「summary large image」を選択する。
twitter:site@に続くTwitterのユーザー名を入力。

OGPの表示確認

metaタグを設定したら、ちゃんと表示されるかどうか確認しましょう。
実際にSNS投稿するのは怖いです。それぞれ表示確認ができる公式のサイトがあるので、そこから確認します。

Facebookシェアデバッガー

FacebookならFacebookシェアデバッガーにURLを貼り付ける事でシェア時の表示を確認できます。

Twitter Card Validator

TwitterならCard Validatorでシェア時の表示を確認できます。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね