JimdoサイトのOGPに任意の画像を表示させる方法

OGPとは「Open Graph Protocol」の略称で、SNSでサイトのurlがシェアされた際に、アイキャッチ画像や概要などを表示させる仕組みです。

FacebookやTwitterなどにurlを貼ると勝手に画像やタイトル・説明文などが表示されるアレです。

以前、この「OGP」を当サイトにも仕込んだという記事を書きました。

その後、基本的に私はTwitterなどで自分でサイトの宣伝等をしないので気付くのが遅れたのですが、いつのまにかJimdoさんもOGPに公式対応してる事に気付きました。

自分でわざわざヘッダーにmetaデータを追加しなくても、ページごとにタイトル、説明文、画像が自動的に設定されるようです。

Twitterカードに関しても基本的に同様ですが私のサイトの場合、OGP用のmetaデータをヘッダーに独自に記述していると、全ページで同じ(ヘッダーに記述した)OGPを表示するようです。しかし、これは仕様がコロコロ変わっているようで良く分かりません。

これを受けて当サイトも「管理メニュー ＞ 基本設定 ＞ ヘッダー編集」に独自に記述していたmetaデータを、Twitterカードの種類の設定などの一部を除いて削除しました。

基本仕様として、おそらく、そのページの一番上に載せた画像がOGP画像となるようです。

私のサイトの場合、ブログページなどはその仕様で全く問題ないのですが、ページの一番上にフォトギャラリー(スライダー)を設置しているトップページで問題がおきました。

私としてはスライダーの一番最初の画像がOGPに表示されてほしいのですが、真ん中あたりの順番の画像がOGP画像となってしまいました。

ネット検索して調べましたところ、このようなケースの場合Jimdoの仕様上どうやら正攻法では任意の画像をOGPにする事はできないようでした。

しかしながら、いろいろと試行錯誤しましたところ、ページごとに任意の画像をOGP画像とする方法を発見(という程でもないのですが…)しましたのでご紹介したいと思います。無料版のJimdo Freeでも可能です。

若干、力技のような気もいたしますが、そこはご容赦下さい。

まず、任意の画像をOGP画像に設定したいページの編集画面を開き、そのページの「一番上に」OGPに使いたい画像を貼り付けます。

おなじみJimdoの画像アップロード画面です。

普段、Jimdoをご利用の方であれば説明不要かと思います。

この時点でその画像が当該ページのOGP画像になるはずです。

「ちょっと待て。OGP画像にしたいだけでそのページの一番上にその画像を表示したいワケじゃないんだ」という方、あせらず続けてお読み下さい。

1. 先ほど画像を貼り付けたページを一旦、編集を終えて通常表示します。　
2. そのページ上で右クリックして「ページのソースを表示」を選びます。　
3. 別タブにソースが表示されると思いますので、その中から先ほど貼り付けた画像のIDを探します。あらかじめ画像に代替テキストをつけて、[ctrl]+F からそのテキストを検索したり、 j-imageSubtitle を検索すると多少見つけやすいかもしれません。　
4. 例として、<div id="cc-m-12345678901" class="j-module n j-imageSubtitle ">という記述があったとします。その中の cc-m-12345678901 というのがIDです(これは例ですので数字は適当)ので、これをコピペして控えます。

1. ふたたび編集画面に戻ります。　
2. 「管理メニュー ＞ 基本設定 ＞ ヘッダー編集」を開いて以下の記述を追加します。

これで、「1. OGPとして使用したい画像のアップロード」で貼り付けた画像は非表示となり、見えなくなりますが、OGP用画像としては残ります。

うまく設定できたかどうかは、下記のサイトで確認されると良いかと思います。

当サイトのトップページですとこんな感じです。

Jimdoさんの仕様を逆手に取ったこの力技で一応、ページごとに任意の画像をOGPに使う事が可能になるかと思いますが、今後Jimdoさんの仕様変更によってどうなるかは分かりませんし、私も責任は負いかねます。そこはご了承いただきたく存じます。