Jimdoブログの記事をfacebookに貼付けたときに表示される画像を「いつも決まったもの」にする方法とは?

動物の本立てを販売してます。

 Jimdoブログの記事をfacebookに貼付けたときにfacebookニュースフィードに表示される画像は、初期設定では、そのブログページから適当に選ばれてます。

 

 これを「いつも決まったものにする」方法をご紹介します。

こんな感じに(自分のところより引用)
こんな感じに(自分のところより引用)
こんな感じに(お客様のところから引用)
こんな感じに(お客様のところから引用)

(1) 画像を作る

200×200ピクセルの画像を作ります。

(2) Jimdoにアップロードする

 (1)で使う画像は僕の場合、僕のホームページではこの用途以外に使い道がありません。

 こういう場合は 「隠しページを作ってそこにアップロードしておく」ことにします。

TestPageという、「非表示の」ページを作ります。 ※ページ名は、なんでもいいです。「画像置き場」でもいいです。
TestPageという、「非表示の」ページを作ります。 ※ページ名は、なんでもいいです。「画像置き場」でもいいです。
画像を隠しページにアップロードします。
画像を隠しページにアップロードします。

(3) 画像のURLを調べ、コピーしておく

 いったん「プレビュー」状態にします。そして画像のURLを調べます。Macだと下記のようにURLをコピー出来ます。Windowsではどうやるんだっけ・・・画像を別ウインドウで開くのがいいはずです。

 

 ※「プレビュー」状態にしたときの「画像の」URLをコピーしてくださいね。

画像の上で右クリック。
画像の上で右クリック。

(4)Jimdoのヘッダにタグを貼付ける

OGP (Open Graph Protocol) の設定をします。OGPとは「このウェブページは何のことを書いているか」という情報を、 プログラムから読める形で HTML に付加する記述方法です。

『設定』の「ヘッダ部分を編集」をクリック。
『設定』の「ヘッダ部分を編集」をクリック。
ここに、こんなんを書き込みます。(3行目以下)
ここに、こんなんを書き込みます。(3行目以下)

<meta property="og:type" content="website" />

<meta property="og:url" content=" (WebサイトのURL) “ />

<meta property="og:image" content=" (アイコン替わりに表示させたい画像のURL) " />

(5) 最後に WebサイトのOGP情報を初期化しておく

facebookにログインした状態で「デバッガー」を開きます。

 

https://developers.facebook.com/tools/debug/

サイトのURLを入力して「デバッグ」をクリック
サイトのURLを入力して「デバッグ」をクリック
エラーメッセージも出たりしますが、上記のようになればOK
エラーメッセージも出たりしますが、上記のようになればOK

og:url が自分のサイトのURLになってること、

og:type がwebsiteになってること、

og:title が サイトのタイトルになってること

og:image が アイコンにしたい画像になってること

og:description が JimdoのSEO機能のところで入力した「サイトの説明」になってること

 

上記5点を確認してくださいね。

 

 

 

1点、問題があります。

画像は『いつも決まったもの』になりますが、文章も「いつも決まったもの」(サイトのdescription)になってしまいます。

これの解消法=そのページの文章から適当に引っ張って来る という手段があったら教えてくださいw

※ページごとに og:descriptionを指定すればいいんでしょうが、それは面倒w

 

 

以上!

開催情報メールマガジンとお問合せ
ランチ交流会・講演会・ホームページ相談会・学習会の案内やお問合せはこちらから