ホームページ制作をするなら必須？OGPとは？どうやって設定する？

こんにちは！IWACODEの岩村彰斗です。

今回はWebサイトを作成する上でとても大切なOGPについてご紹介させていただきます。

OGPとは？

OGPは（Open Graph Protocol）を略したもので、簡単に言えば、SNS（X、Facebook、LINEのトーク）でURLを張り付けた際に、表示される仕組みのことです。

LINEのトーク画面でサイトのURLを張り付けた際に、画像などが自動で表示されたりしたことはないでしょうか？

LINEでお店のURLを張り付けたときに勝手に画像が表示されたような・・・

筆者

このように設定していると、画像が表示されます。

SNSでいろんな方にシェアしてほしい、クリックしてほしい！といった方にはとても重要です！

OGPの指定方法について

WordPressプラグインを使用する場合

WordPressを使用している場合、プラグインで制御することも可能です。

もし何らかのWordPressテーマを使用している場合は、次のプラグインのうち１つ選んで使用すれば問題ありません。

プラグインで設定できるんですね！

筆者

注意することがあって、インストールするのは１つだけでよいです！
設定が重複して正しく表示されない可能性もあるので、複数入っていないか確認してみましょう。

コーディングで実装する場合

コーディングに関しては大体決まっているので、今回ご紹介するコードをコピペして、それぞれのページに合わせて名前や説明を変更すれば基本的には問題ありません。

<meta property="og:title" content="Webページのタイトルをここに記載">
<meta property="og:description" content="Webページの説明文をここに記載（～90文字程度）">
<meta property="og:type" content="website">
<meta property="og:image" content="表示する画像のURL">
<meta property="og:url" content="WebページのURL">
<meta property="og:site_name" content="Webサイトの名前">
<!-- X（Twitter） -->
<meta name="twitter:title" content="Webページのタイトルをここに記載">
<meta name="twitter:description" content="Webページの説明文をここに記載（～90文字程度）">
<meta name="twitter:image" content="表示する画像のURL">
<meta name="twitter:card" content="summary">

設定の詳細

X（旧Twitter）の設定（省略可）

注意点

表示されるカードの大きさによっては、設定している画像が自動的にトリミングされてしまいます。

OGPで推奨されている画像の大きさは横が1200px、縦が630px（比率1.91：1）となっています。

LINEのトーク画面などは上記の大きさで問題ありませんが、その他のSNSでシェアした場合、正方形のサイズにトリミングされます。

トリミングされると画像の文字切れなどが発生する可能性もあるため、サイズは横：1200px、縦：630pxで作成し、必要な情報は、中央の正方形部分に収めるようにするのがオススメです！

設定したOGPの確認をする方法

プラグイン、またはコーディングによってOGPの設定が完了した後、どのようになっているか、または正しく設定されているか確認する方法があります。

以下のサイト（シミュレーター）にてOGP設定を行ったサイトのURLを張り付けるだけで、確認が可能です。

ラッコツールズ

OGP確認：facebook、twitter、LINE、はてなのシェア時の画像・文章を表示 | ラッコツールズ🔧 URLを入力すると各SNS（facebook・twitter・はてなブックマーク・LINE）でページをシェアした際のOGP画像・タイトル・説明文を確認できるOGPデバッガー・シミュレーター。P…

設定が完了したら、一度確認してみるのをおススメします！

さいごに

いかがでしたでしょうか？

OGPの設定はWebサイトを制作する上で非常に重要なので、制作する際には忘れずに設定を入れるようにしましょう！

今回の記事が少しでも参考になりましたら幸いです。