![見出し画像](https://assets.st-note.com/production/uploads/images/116980796/rectangle_large_type_2_6a168085e8177d6aea375316b0ad68df.png?width=1200)
【web制作】コーダーは知っておくと優秀なOGP設定の方法
どうも!
“タツタ”です!
今回の記事は、
「【web制作】コーダーは知っておくと
良いOGP設定の方法」について
解説をしていこうと思います!
なぜこのテーマなのかというと、
OGP設定しておいて欲しいという
要望が、コーダーに来る場合が
あるからです。
OGPとは、「Open Graph Protocol
(オープングラフプロトコル)」
の略です。
作ったWEBサイトは、クリックされて
見られてなんぼですよね!
OGP設定はクリック率を上げる
ための、施策の一つです。
ぜひこの記事で理解してってください!
![](https://assets.st-note.com/img/1695458189318-Eufc8hgN6j.jpg?width=1200)
今回の記事のメリット
今回の記事を読むメリットは、
以下の3つです!
・SNSでのシェア表示を最適化できる
・OGP設定を頼まれた時に
即対応可能
・運用面のサポートで信頼される
OGP設定は、クリック率を上げる
ための施策なので、対応できれば
運用面も理解しているコーダーだと
思ってもらえます。
サイトは作って終わりじゃなくて、
作った先も重要です。
そこまで考えられるコーダーは
一気に市場価値が上がります。
知らなくても対応できれば
問題ないですが、実際知らないことを
![](https://assets.st-note.com/img/1695458232664-p9eZSQOpqz.jpg?width=1200)
僕に任せてくださいとは
言いづらくないですか?
逆に知ってるので対応しますよと
言えれば、信頼されますよね!
この記事ではそんなOGP設定の
対応方法がわかるようになっています。
次にこの記事を見なかった場合の
デメリットです。
・SNSにサイトリンクを貼っても、
表示が変でシェアされにくい
・OGP設定を知らないままで
対応ができない
・運用面の対応で、信頼を得る
チャンスを逃してしまう
OGP設定お願い!と言われて、
よくわからないから無理とは
言えないですよね。
設定の方法をわかっている人から
すれば、OGP設定はコーダーの仕事
だなと感じると思います。
![](https://assets.st-note.com/img/1695458294812-8H86skVJRg.jpg?width=1200)
なぜかというと、
コードを書いて設定するからです。
コーダーなんだから対応してくれよ
って言われても違和感はないです。
(そんな言い方する人はいないと
思いますが)
でも知らないというだけで
対応ができないのはもったいないです。
うっかり知らないと言い切って
しまって、このコーダーさん
次の案件では頼めるかな….と
判断が微妙になってしまうことも
あるかもしれません。
チャンスを失わないためにも
この記事で学んでおきましょう!
「OGP設定がなんなのかを
理解して、対応方法を把握
しておこう」
先ほどOGP設定はクリック率を
上げるための施策だと説明しました。
![](https://assets.st-note.com/img/1695458352800-e9RypfIsnx.jpg?width=1200)
それはどういうことかというと、
OGP設定をすることで、
サイトのリンクをSNSでシェアする時の
表示を最適化できます!
画像・タイトル・説明文の3つを
ちゃんと設定することで、
見たくなるリンクにすることが
できます。
僕のnoteを紹介するときも
X(旧:Twitter)で拡散しています。
すぐ悪循環になってしまう人、これを意識したら救われましたよ!☺️https://t.co/4TqXzJHek6
— タツタ🍗インドア派Webコーダー (@Tatsuta_web) September 7, 2023
設定をしないと、画像やタイトルが
途中で切れてしまったり、
説明文が説明になってない
ということが起こります。
基本は設定しなかった場合、
アイキャッチに設定した画像・記事の
タイトル・本文の冒頭がそのまま
使われますが、それだとおかしい
ときもあるでしょう。
![](https://assets.st-note.com/img/1695458387985-gXtaRs95mL.jpg?width=1200)
そこの最適化するOGP設定方法を、
以下で解説します!
OGP設定方法
以下で、「」の手順を解説します!
手順は大きく分けて4つです。
①OGPを使うための宣言を書く
②それぞれの設定項目を書く
③SNS専用の設定項目を書く
④シェアする前に表示確認する
①OGPを使うための宣言を書く
最初にOGPを使用する宣言文を
書きましょう!
head要素にprefix属性を追加します。
<head prefix=”og: http://ogp.me/ns#”>
これはお決まり文です。
![](https://assets.st-note.com/img/1695458459415-v6JoUDRqac.jpg?width=1200)
②それぞれの設定項目を書く
それぞれの設定項目はheadタグ内に
metaタグで記述します!
基本は6個でコードはこんな感じです。
<meta property="og:url" content=" ページのURL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページのタイトル" />
<meta property="og:description" content=" ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像のURL" />
各項目は、content属性を変更して
設定します。
property属性は
そのまま使ってください。
6つはどの順番で書いても大丈夫です。
内容は上から順にこのような感じです。
・ページのURL
・ページの種類
・ページのタイトル
・ページの説明文
・サイト名
・サムネイル画像
この6つの書き方ついてそれぞれ
解説します。
![](https://assets.st-note.com/img/1695458511689-btmqo0GaK3.jpg?width=1200)
・ページのURL
<meta property="og:url" content=" ページの URL" />
Content属性に記述するファイルのURLを記述してください。
URLは絶対パスで書くよう注意してください。
絶対パスとは、
「http://」
「https://」
逆に相対パスはダメです。
相対パスとは、現在記載している
ファイルを起点として、
目的地を書くことです。
![](https://assets.st-note.com/img/1695458551484-6e4FJON2Vt.jpg?width=1200)
・ページの種類
<meta property="og:type" content=" ページの種類" />
ページの種類とは、
SNS上での表示形式のことです。
表示形式は代表的なものから始まり、
さまざまな形式があります。
トップページであれば、content属性に
「website」と書きます。
それ以外ではれば「article」と書きましょう。
さらに細かく最適化したい場合は、
下記リンクを参考にしましょう。
・ページのタイトル
![](https://assets.st-note.com/img/1695458639533-pihdnU87iK.jpg?width=1200)
<meta property="og:title" content=" ページの タイトル" />
Content属性に直接タイトルを
記述しましょう。
20文字以内が適切です。
サイトのタイトルより優先して
表示されます。
・ページの説明文
<meta property="og:description" content=" ページの説明文" />
Content属性に直接説明文を
記述しましょう。
80〜90文字以内が適切です。
![](https://assets.st-note.com/img/1695458695030-AqJ0yZmEir.jpg?width=1200)
設定しない場合は、
冒頭文が表示されます。
・サイト名
<meta property="og:site_name" content="サイト名" />
Content属性に直接サイト名を
記述しましょう。
・サムネイル画像
<meta property="og:image" content=" サムネイル画像の URL" />
Content属性にサムネイル画像の
URLを記載してください。
こちらも絶対パスで記述しましょう。
![](https://assets.st-note.com/img/1695458777055-4FIunBVtkx.jpg?width=1200)
設定しなかった場合は
記事のサムネイル画像がそのまま
使われます。
SNS用にサイズを調整したい場合は
設定しましょう。
③SNS専用の設定項目を書く
SNS専用の設定項目もあります。
主に、X(旧Twitter)の設定が2つと、
Facebookの設定が1つがあります。
ツイッター専用の設定
・表示タイプ
<meta name="twitter:card" content="カードの種類" />
カードの種類は全部で4種類です。
![](https://assets.st-note.com/img/1695458999942-sLcpuXQaZ4.jpg?width=1200)
①summary
タイトル、説明、およびサムネイル。
最も一般的な形です。
②summary_large_image
画像が大きくて、
Facebookのカードに近い形です。
③app
アプリ配布用の表示カードです。
④player
ビデオやオーディオなどの
メディアを表示できるカードです。
・@ユーザーID
<meta name="twitter:site" content="@ユーザー名" />
ユーザー名を設定できます。
![](https://assets.st-note.com/img/1695458871777-9g5hqdSri2.jpg?width=1200)
Facebook専用
<meta property=fb:app_id content=FacebookアプリID(15桁の英数字)/>
FacebookアプリID15桁を設定します。
これを設定すると、
Facebookインサイトという
Facebookからの流入がわかる機能
が使えるようになります。
④シェアする前に表示確認する
それぞれのSNSで、URLを貼るだけで、
事前にOGP設定の表示確認ができます。
X(旧Twitter)
「Card Validator」
「シェアデバッガー」
それぞれのSNSで
上記サイトを使いましょう。
![](https://assets.st-note.com/img/1695459039791-ChjUGeAJb1.jpg?width=1200)
補足
Wordpressサイトの場合は
プラグインの「All in one SEO」
を使いましょう!
Wordpressテーマのheadタグは
Header.phpに統一されているので、
記事ごとのOGP設定ができません。
なので、All in one SEOを使って
サイト全体と、記事ごとの
OGP設定をします。
操作は簡単なので、
参考の記事を載せておきます!
参考記事
ここまで理解すれば、
OGP設定できる?
と頼まれたとしても、
対応できるようになります!
![](https://assets.st-note.com/img/1695459086361-L27T3AVx13.jpg?width=1200)
「気に入った記事をSNSで
シェアして、OGP設定を
見てみよう」
OGP設定って何?という感じの人も
多いかと思いますが、
まずは身近に感じてみましょう!
ためしに、自分の気に入った
記事リンクをSNSで貼って
投稿してみてください!
するとリンクから記事の内容が
表示されます!
この表示をより良くする必要がある
場合はOGP設定を行ってください!
ここまで読んでくださった方は、
これでOGP設定がなんなのかを
理解し、対応できるように
なりましたね!
![](https://assets.st-note.com/img/1695459218231-bssTCWnrVf.jpg?width=1200)
今回は以上です!
最後まで読んでいただき
ありがとうございました!
↓↓↓
WEB制作で自由になるための
より核心に近い内容については
こちらで配信する予定!
タップで友達追加↓↓
![](https://assets.st-note.com/img/1695458087010-AbuI5RpE8Z.png?width=1200)
今後あなたにとっての
副業・フリーランス・WEB制作活動
にためになる情報をお届けいたします!
この記事が気に入ったらサポートをしてみませんか?