先日うまくいった方法がうまくいかなくて結構ハマったので備忘録。
JimdoのOGP設定についてです。
OGPとは
Open Graph Protcol、SNSでURLをシェアした時に出てくる画像を設定できる。
やっぱり画像があった方がクリック率上がるし、リンク踏んだ先に何があるか提示できるので怖くない。
（youtubeのサムネみたいなもん）
デフォルトだと、そのページに仕込まれてる画像とかが表示される。
意図的に設定したい画像がある場合は以下の方法で設定が必要。
Jimdoで背景を設定していない場合
先日うまくいってたパターンはこちら。
ヘッダーに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" />コメントアウトしているところは、JimdoのSEO設定から設定できるので、強いて書かなくてOKなところ。
肝は、画像の指定をしている1番下のコードです。
何らかの方法で画像をアップロードして、そのURLを指定してやります。
Jimdoに既にアップロードしている画像を使いたい場合は、デベロッパーツールでURLを確認して指定すればOK。
例えばGoogle Driveに入っている画像を使いたい場合はこちらのリンクが参考になります。
Google Drive に保存した画像を直接呼び出せるURLの取得
Jimdoで背景を指定している場合
今回こちらで引っかかった。
設定している背景は2000*1500pxの画像。
これのせいなのかなんなのか、とにかく設定したmetaタグが拾われず、背景画像がOGPに設定されてしまう。
そこで、metaタグを使う方法ではなく、Jimdoの仕様に沿うように画像を設定することにした。
その仕様がこちら（サポートに問い合わせた2022年4月現在の情報。）
・1200×630px以上の画像ファイル
・カラムコンテンツ外に配置されている画像コンテンツ
・そのうち、1番上に配置されている画像コンテンツ
※該当画像がない場合は、背景画像
端的にいうと、「でかい画像をページの1番上に置けば良い」
が、そんな都合よくでかい画像が1番上にくるデザインばかりではなく。
今回の私もそのパターン。
そんなときは、
/* idをチェックして、noneで非表示にする */
#〇〇〇{
display: none;
}で、でかい画像を見えなくしてしまいましょう。
具体的には……
- ページの1番上に画像を配置
- プレビュー画面で、デベロッパーツールを使って要素のidを取得
- そのidを非表示にするCSSを記載
この方法だと、各ページの頭に画像を配置する手間がある一方で、各ページごとにOGPを設定できるという利点もあります。
ということでしばらくハマってしまっていたJimdoのOGPについてでした。
初学者にやさしい記述ではないので、ご不明点ありましたらお問い合わせください。
