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