OGPの書き方まとめ(Twitter・FacebookでURLの共有)

 
 

OGPというのは、『Open Graph Protocol』の略で、TwitterやFacebookでURLを貼った時、タイトル、画像、説明文がキレイに表示される仕組みのことを言います。

上のツイートは、URLを貼った僕のツイートですが、ツイートの下にタイトル、画像、説明文が表示されています。

上記のOGPでは以下のようなコードを書いています。

これがOGPです。

この記事では、OGPの書き方を簡単に説明します。

スポンサーリンク

設定方法

まず以下のコードをコピペしてください。

それぞれ説明していきます。

①prefix=”og

これからOGPのコードを書いていくという宣言です。『○○』のところに、サイトのトップページであれば、『website』、トップページ以外であれば、『article』と入力します。

②property=”og:title”

サイトのタイトルを書きます。

③property=”og:type”

website,blog,articleのいずれかを書きます。

④property=”og:description”

100文字以内におさめましょう。

⑤property=”og:url”

ページのURLを絶対パスで書きます。

⑥property=”og:site_name”

記事タイトルではなく、サイトの名前になります。

⑦property=”og:image”

表示する画像のURLを絶対パスで記入します。

画像サイズは、縦630px×横1200px以上(1:1.91)が推奨されています。

画像の表示が気になる場合、こちらのサイトで確認できます。
OGP画像シミュレータ

⑧name=”twitter:card”

○○には、主に『Summary Card』か『Summary with Large Image』のどちらかを入れることになります。

『Summary with Large Image』が大きめサイズです。

表示確認

以下のページで、TwitterやFacebookでの表示を確認できます。

Twitter
Card validator

Facebook
シェアデバッガー

Facebookのシェアデバッガーは、ログインが必要です。そして、表示を確認すると、

『次のプロパティは必須です: fb:app_id』

というエラーがでます。

ですが、そのページの下にOGPの表示がされていて、そこに問題なければOKです。

fb:app_idのエラーが気になる人は、

のコードを追加すればいいのですが、App-IDを取得するために、『Facebook for Developers』というサイトに登録しなければいけません。

以上になります。
最後まで読んでいただいてありがとうございました。

スポンサーリンク

おすすめ記事

フォローする