OGPというのは、『Open Graph Protocol』の略で、TwitterやFacebookでURLを貼った時、タイトル、画像、説明文がキレイに表示される仕組みのことを言います。
ホームページをxdでデザインして、コーディング。https://t.co/0cH6xLYCOX
斜めのデザインを多用したのですが、コーディングが大変でした。
borderで三角を作って疑似要素で読み込んだり、backgroundで色塗ってtrasform:skewで斜めにしたり・・・
色んな事を学べました🙂
— じょう＠福井のweb制作屋さん (@awakoji) September 25, 2021
上のツイートは、URLを貼った僕のツイートですが、ツイートの下にタイトル、画像、説明文が表示されています。
上記のOGPでは以下のようなコードを書いています。
|
1 2 3 4 5 6 7 8 9 10 |
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"> <meta property="og:title" content="Joh WebService|福井のホームページ制作屋さん"> <meta property="og:type" content="website"> <meta property="og:description" content="福井のWebエンジニアJoh Unoのホームページ"> <meta property="og:url" content="https://positivelifeshow.com/"> <meta property="og:site_name" content="Joh WebService|福井のホームページ制作屋さん"> <meta property="og:image" content="<?php echo get_stylesheet_directory_uri(); ?>/img/ogp.png"> <meta name="twitter:card" content="summary_large_image"> |
これがOGPです。
この記事では、OGPの書き方を簡単に説明します。
設定方法
まず以下のコードをコピペしてください。
|
1 2 3 4 5 6 7 8 9 |
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# ○○: http://ogp.me/ns/○○#"> <meta property="og:title" content="タイトル"> <meta property="og:type" content="website,blogまたはarticle"> <meta property="og:description" content="ページの説明"> <meta property="og:url" content="ページのURL"> <meta property="og:site_name" content="サイトのタイトル"> <meta property="og:image" content="サムネイル画像のURL> <meta name="twitter:card" content="○○" /> |
それぞれ説明していきます。
①prefix=”og
|
1 |
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# ○○: http://ogp.me/ns/○○#"> |
これからOGPのコードを書いていくという宣言です。『○○』のところに、サイトのトップページであれば、『website』、トップページ以外であれば、『article』と入力します。
②property=”og:title”
|
1 |
<meta property="og:title" content="タイトル"> |
サイトのタイトルを書きます。
③property=”og:type”
|
1 |
<meta property="og:type" content="website,blogまたはarticle"> |
website,blog,articleのいずれかを書きます。
④property=”og:description”
|
1 |
<meta property="og:description" content="ページの説明"> |
100文字以内におさめましょう。
⑤property=”og:url”
|
1 |
<meta property="og:url" content="ページのURL"> |
ページのURLを絶対パスで書きます。
⑥property=”og:site_name”
|
1 |
<meta property="og:site_name" content="サイトのタイトル"> |
記事タイトルではなく、サイトの名前になります。
⑦property=”og:image”
|
1 |
<meta property="og:image" content="サムネイル画像のURL> |
表示する画像のURLを絶対パスで記入します。
画像サイズは、縦630px×横1200px以上（1：1.91）が推奨されています。
画像の表示が気になる場合、こちらのサイトで確認できます。
OGP画像シミュレータ
⑧name=”twitter:card”
|
1 |
<meta name="twitter:card" content="○○" /> |
○○には、主に『Summary』か『Summary with Large Image』のどちらかを入れることになります。
『Summary with Large Image』が大きめサイズです。
表示確認
以下のページで、TwitterやFacebookでの表示を確認できます。
Twitter
→Card validator
Facebook
→シェアデバッガー
Facebookのシェアデバッガーは、ログインが必要です。そして、表示を確認すると、
『次のプロパティは必須です: fb:app_id』
というエラーがでます。
ですが、そのページの下にOGPの表示がされていて、そこに問題なければOKです。
fb:app_idのエラーが気になる人は、
|
1 |
<meta property=”fb:app_id” content=”App-ID(15文字の半角数字)”> |
のコードを追加すればいいのですが、App-IDを取得するために、『Facebook for Developers』というサイトに登録しなければいけません。
以上になります。
最後まで読んでいただいてありがとうございました。