Jimdoでもできる!FacebookのOGP設定のしかた

Home  > ブログ > Jimdoでもできる!FacebookのOGP設定のしかた

2017年2月1日にJimdoではFacebook OGP、TwitterCardへの標準対応を開始しました。

最新事情についてはこちらのブログをご覧ください。

Facebookでのシェアに威力を発揮するOGP

OGP(Open Graph protocol)と呼ばれるものがありまして、この設定をJimdoにしておくとFacebookにホームページのURLをコピペしたりしてシェアしちゃえ!という時に、結構いい具合の見栄えで投稿されます。具体的に言うと画像が大きくキレイに見えて、タイトルやサイトの説明文なんかもしっかりその下に書き込まれて投稿されるという感じ。まさに「いい具合」なのでございます。

 

それでも「へ?」という人にも分かるように説明を続けます。

 

まずはこちらを見てください。

以下はBEEのサポートセンター公式サイトのURL http://webkenbee-support.jimdo.com/ をFacebookにコピペした投稿の見え具合です。

 

弊社へのご依頼・お問い合せはサポートセンターへお願い致します。※代表の個人アカウントに送信いただいたメッセージは確認できない場合がありますのでご注意ください。http://webkenbee-support.jimdo.com/

Posted by WEBデザイン研究所 Bee(ビー) on 2015年9月2日

 

どうでしょう?写真も適切なサイズでサイトのタイトルと説明文もその下に書き込まれていますね。要するに見栄えが良くてカッチョいいのです。せっかくシェアしても文字だけの投稿や意味のない画像が表示されては残念賞。これだけでもPR力はアップした感ありですね。

 

今回はこうした設定をJimdoでもすることができますというお話。興味のある方はぜひチャレンジしてみてください。 

 


JimdoにOGPを設定する方法

まず下記ようなコードを自分のサイトに合わせて完成させます。

下記は弊社のサポートサイトの記載です。


ここで拒絶反応が出ないように願います。HTMLコードと呼ばれるものですが、まあホームページに話しかけるときの言葉だと思ってください。

 

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

<meta property="og:title" content="BEEお客様専用サポートセンター" />

<meta property="og:description" content="WEBデザイン研究所BEEにアメブロカスタマイズ、Jimdoカスタマイズなどの制作のご依頼を頂いているお客様専用のサポートサイトです。"/> 

<meta property="og:url" content="http://webkenbee-support.jimdo.com/" />

<meta property="og:image" content="https:〜(中略)〜/OGP.jpg" />

 

さて上記の部分を解説すると

 

  • <meta property="og:type" content="ページのタイプ" />
  • <meta property="og:title" content="タイトル" />
  • <meta property="og:description" content="ページの説明文" />
  • <meta property="og:url" content="ページのURL" />
  • <meta property="og:image" content="ページのイメージ画像" /> 

 

こんな具合です。赤字の箇所が自分なりの内容に書き換えられているだけです。

 

ちなみに、「ページのタイプ」についてはJimdoの場合はこの例のまま"website"で大丈夫です。

「タイトル」「ページの説明文」についてはこの行をまるごと記載しなくても通常はSEOの設定を読み込んでくれるはずですので省略は可能ですが、もしどうしても他の変な見出しなどが表示されてしまう場合は、しっかりと書き込んだ方が良いです。とか色々あったりしますが、この例がアナタの場合と違うのは「ページのタイプ」以外の赤字の箇所になります。

 

あと記載例については画像のURLを省略をしています。

 

もっと詳しく知りたければ「OGP」「設定」などで検索すると役立つコンテンツが見つかると思いますので、そういったアナタはぜひともそちらで極めてください。今回はJimdoっぽく なるべくシンプルに説明をします。

 


OGPの画像サイズはどうする?どう作る?

さて「ページのイメージ画像」ですが、キレイに見せるためにもこちらはサイズと保存形式をちょっと意識する必要があります。ネットで困ったらネットに聞こう!ということで「OGP」「画像サイズ」で検索したこんなコンテンツがヒットしました。参考になりますのでご紹介させていただきます。

 

FacebookのOGP画像の仕様変更 キーワードは「1200px × 630px」と「PNG」

 

まずはリンク先のコンテンツの通りに画像を作ってみると良いと思います。

画像ソフトの使い方は割愛致します。(Pixlrなどの画像編集ツールが使いやすくて高機能なのでオススメ) 


サイズ、保存形式だけをこちらのコンテンツからまとめてみましょう。


画像サイズ 1200px(ピクセル)×630px(ピクセル)

 

保存形式  PNG(ピング) 

※PNGの保存形式は24bit形式と8bit形式がありますが、まずは8bitで見栄えを見てみると良いですね。

 先ほどのサポートセンターの画像は8bitのPNGで保存されたものですが綺麗に見えていると思います。

 これがJPGだとモシャモシャしたノイズが浮き立ったりしてあまり美しくないなんてことになりますので。


用意する画像については、こんな感じですね。


OGP用の画像はどこに保存する?

さてページのイメージ画像ができたらあとは、どこかに保存をしなければなりません。ここが問題です。「ページ画像のURL」とある以上、ネット上のどこかに画像がなければなりません。自分のPCにあるだけではダメなんですね。そこで置き場所を考えます。


1.サーバーを借りる

一番手っ取り早く安全な手段です。多少費用は必要ですが、例えばロリポップあたりのサーバーですと10GBの容量の「コロリポプラン」で月額100円程度です。(初期費用1,500円別途必要)あれこれやりたいことがあるのでしたら、画像置き場としてちょこっとしたサーバーは便利です。

 

画像は契約したサーバーにアップして、そこからURLを取得すればOK。

使い方はロリポップのマニュアルページを参考にしてください。

 

「アップロードしよう」のページ

 

 

2.Jimdoにアップロードした画像を使う

「例え月に100円といえどもサーバーなんかに払う金がない」という方はコチラの方法をご紹介します。


一応申し上げておきますがJimdoの仕様上、将来的にはちょっと不安が残る方法です。ただし一番手軽な方法でもあります。Jimdoにアップした画像からURLを取得してOGP画像に使うという手段になります。

 

不安というのはJimdoの方で画像のURLが変わってしまう場合があるかも?という点なのですが、これは絶対ではありません。個人的にはそうかも?という感じ程度なのですが、かといって100%安全でもないので。

もしそうなった場合はリンク切れが起こり、画像は表示されなくなってしまいます。


まあ、これまでのJimdoを見ているとそう頻繁にURLが変わることも確認できておりませんので、定期的に自分でチェックして何かあればそこは自分で対処し直すというくらいの気持ちであれば十分使える手段です。大丈夫かもしれませんし、一応「ご注意ください」とだけ申し上げておきます。

 

以下Windowsでの手順を説明します。Macは適宜、操作を置き換えてお試しください。

 

手順①

ログインして右の管理メニューから「レイアウト」をクリック。

手順②

上の「独自レイアウト」をクリック

手順③

「ファイル」をクリック。 

手順④

「参照」画像を選びます(自分のPC内から画像のある場所を参照してください) 

手順⑤

「アップロード」をクリック 

手順⑥

ファイル名を確認してクリック


※アップロードがなかなか終わらない場合はブラウザを更新して再度、独自レイアウト→ファイルを開いてみてください。

手順⑦

画像が表示されますので画像上で右クリック→「画像のURLをコピー」をクリック

 

目には見えませんがURLがコピーされていますので、すぐにOGPのページ画像のURLの箇所に貼り付けます。

これでコードは完成です。

 

※前後の ”(ダブルコーテーション)を消さないように注意です。

 

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

<meta property="og:title" content="BEEお客様専用サポートセンター" />

<meta property="og:description" content="WEBデザイン研究所BEEにアメブロカスタマイズ、Jimdoカスタマイズなどの制作のご依頼を頂いているお客様専用のサポートサイトです。"/> 

<meta property="og:url" content="http://webkenbee-support.jimdo.com/" />

<meta property="og:image" content="ここに貼り付けます" />


ちなみに手順⑥のファイル名を右クリックでも画像のURLはコピーできますが、今回はあえて画像を間違いないか確認した手順をとっています。


手順⑧

残った独自レイアウトの画面は右上のバツ印で閉じてください。こちらの画面はもうお役御免です。

 


出来上がったOGPのコードを貼り付けるJimdoの場所

最後に出来上がったOGPですが、Jimdoに設置をしなければなりません。

以下の手順で設置をすればOKです。


手順①

再び右の管理メニューから「設定」をクリック。

 

手順②

「ヘッダー部分を編集」をクリック。

 

手順③

OGPのコードを全文コピーして貼り付けます。

手順④

「保存」をクリック。

手順⑤

バツ印をクリックで画面を閉じます。



以上でOGPの設定は完了です!


実際にサイトのURLをFacebookにコピペして投稿してみてください。画像と設定したタイトル、説明文が見えていれば成功です。


ぜひお試しください。