IBISEでOGP画像を設定する方法
見出し画像

IBISEでOGP画像を設定する方法

こんにちは。IBISE note編集部の鈴木です。
当社のサポートツール「IBISE」は、はじめからOGP(※)が設定されています。

※「Open Graph Protcol」の略です。Webページのタイトルや詳細、イメージ画像などの情報を検索エンジンなどのプログラムが読み込めるよう、HTMLに情報を付加しておくものです。TwitterやFacebookなどSNSでシェアした(URLが共有された)際、情報を分かりやすく伝えることができます。

下記は、noteの記事をシェアしようとした時に表示されるものです。このオレンジ枠の部分がOGPにあたります。

OGPイメージ

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

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

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

画像2

画像7

今回は、管理画面でOGP画像を追加する方法を紹介します。

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

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

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

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

画像4

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

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

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

初期表示されているOGPタグと同じ場所に入れてください。

画像5

「保存する」を押して、ソースを保存し完了です。

画像が入ったOGPはこちらです。

画像6

画像5

IBISEで作成したFAQや記事をシェアしたい場合は、ぜひOGP画像を設定してください。

ご案内

IBISEをご利用の企業さま
ご利用にあたって不明点、不具合等ありましたらこちらまでご連絡ください。
IBISEにご興味のある方
製品サイトをご覧ください。また、お気軽にこちらまでご連絡ください。

最後まで読んでいただき、ありがとうございました。Twitterでもシェアしていただけますと、とても嬉しいです!

やったー!また見てくださいね!
株式会社PRAZNAと申します。FAQページや問い合わせフォームを誰でも簡単に作成できるカスタマーサポートツール 「IBISE」(アイビス) を提供しています。 https://ibise.com/