OGP画像を設定したい

2022-03-29T01:46:21.257Z

IBISEご提供時のOGPタグは、下記の必要最低限のものとなっており、画像は設定されていません。

ポータル管理 > ページテンプレート(ヘッド情報)

<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:url" content="ページのURL">

picture_pc_2726b6d6344ae89fbc44b627136bb128.webppicture_pc_7232cc410242b06daf67fd02eb85f0fd.webp
OGPに画像を設定する方法は下記となります。

①ポータル管理 >ページテンプレート > アセット で、表示させたい画像を追加

画像は幅1200px高さ630pxが基本的なサイズと言われていますが、SNSによって見え方が異なります。OGP画像をシミュレーションできるサイトもありますので、不安な場合はそちらで確認してみることをお勧めします。

②追加したアセットのURLを確認

適当なページテンプレートを選択し、ソースコードの②-1の位置(1行目の先頭)にカーソルを合わせ、②-2のアイコンをクリックします。
すると、②-3に {{asset_url 数字 inline=true}} といったアセットのURL が表示されるため、コピーしてメモ帳などに保存しておきます。
picture_pc_0bf370f8965be7da1a94e4a4cbbfae26.webp
※あくまでもURL確認用なので、ソースコードは保存しないでください。

③ポータル管理 > ページテンプレート(ヘッド情報)にソースを追加

ページテンプレートのヘッド情報に、下記のソースを追加します。

<meta property="og:image" content="⓶-3で表示されたアセットのURL">

初期表示されているOGPタグと同じ場所に入れてください。
picture_pc_64a98688b4fa20582b239fca84aa5381.webp
「保存する」を押して、ソースを保存し完了です。
picture_pc_c9a9c924619e01f9033aa414ff0b3c29.webppicture_pc_0083cf6db47108d96bc4d7695c86b5c2.webp

お問い合わせ