JimdoのページをFacebookでシェアした時の「OGP」をうまく表示させる方法

先日公開した「JimdoMeetup Vol.33に参加しました(2日連続参加)」の記事を読まれたJimdoユーザーの方からOGPについて質問がきました。

その方法を書いてみようと思います。

OGPって何?

Jimdoを使ってご自身でサイトを作って運用されている方でも「OGP」という単語を聴き慣れてない方もいらっしゃると思います。

OGPとは正式にはOpen Graph protocolの略で、FacebookなどのSNSでシェアする(される)ときに、シェアしたページのURL・タイトル・概要・画像を正しく伝えるためのものです。

JimdoCafe 久留米,Facebook,OGP

先日の記事を、JimdoCafe 久留米のFacebookページに投稿したときのOGPはこんな感じになりました。

ここに表示されている画像、文章はブログ本文では出てきていません。

>>実際のブログで確認してみてください。

 では、この画像と文章をどうやってコントロールしているかを解説していきたいと思います。

JimdoFreeとJimdoPro、JimdoBusinessではできる範囲が異なる

JimdoFreeはJimdoの「SEO」と同じようにトップページにしか、このOGPを設定できません。

JimdoPro、JimdoBusinessはすべてのページに設定することが可能です。

すべてのページに設定することが可能です。特にブログは毎回テーマが異なるので、SNSを使ってシェアした時に、SNSを見ている方により端的に画像と文章で興味付けすることができるようになります。

管理メニューの「基本設定」→「ヘッダー編集」と進んでください。

JimdoCafe 久留米,OGP設定

「ヘッダー編集」を開くとこのような画面になります。

JimdoCafe 久留米,OGP設定

「<head>の変更」の中にOGP設定のコードを書いていきます。

ここで無料プランと有料プランの違いが出てきます。

JimdoCafe 久留米,OGP設定

「Webサイト全体」はすべてのプランで編集が可能です。

「サブページもしくはブログ記事」はJimdoPro,JimdoBusinessで編集可能となります。ページ単位、ブログ記事ごとにOGPの設定が可能になるのは有料プランのみとなります。

このJimdoCafe 久留米のサイトは「JimdoPro」を利用しているので記事ごとにOGP設定をしています。

OGPに必要なコード

必要なコードは下記になります。

まずは1行づつ解説していきます。

<meta property="og:title"ここにタイトルを記述" />

この部分は「サイトタイトル」「ブログタイトル」といったものを「" "」の中に記述します。

Facebook向けのタイトルなので、Google向けの32〜35文字のタイトルである必要はありませんが、文字数は95文字以下で記述しましょう。  

<meta property="og:type" content="ここにページの種類を記述" />

この部分は表示させるページがどういうものなのかを記述する部分になります。

このタイプによってFacebookでシェアされたときの表示が変わります。

「" "」内に記述するのはどちらかかひとつになります。

  • website → 一般的なホームページの場合は「website」と記述します。
  • article → 下層ページやブログ記事の場合は「article」と記述します

※もちろん他にも種類はありますが、いろいろ書くと混乱を招くと思い、今回は2種類でとどめておきます。

以前は「blog」というものがありましたが、今では使われていないようなので割愛します。

<meta property="og:description" content="ここに説明文を記述” />

この部分は画像の下(横の場合もあり)にリンク先のページの概要を「" "」内に記述します。

Google向けのmeta descriptionと違い、キーワードを含めてなどを意識する必要はありませんが、読み手が読みたくなるような説明を記入しましょう。297文字まで記入することが出来ます。  

<meta property="og:url" content="ここにページのURLを記述“ />

この部分にはページのURLを記述します。

指定していない場合は勝手にURLを持ってきます。

<meta property="og:image" content="ここに画像のURL" />

 この部分には「画像のURL」を記述します。  

ホームページ上の画像は独自のURLを保持しています。

そのURLをここでは利用します。

 

ではどうやってそのURLを手に入れるかというのを以下で説明していきます。

画像のサイズは…

Facebookでは一般的にOGPで綺麗に画像を表示させたい場合は「1200px × 630px」(※px=ピクセル)が推奨されており、最低サイズは「600px × 315px」と言われています。

JimdoCafe 久留米,OGP設定

以前UPした記事です。

上記画像は、画像上で右クリックしたら出てくるサブメニューが出てきた状態の画像です。

(ブラウザ:Google Chrome、Macを利用)

楕円赤丸で囲んだ「画像アドレスをコピー」を選択すると、画像のURLを取得してくれます。

ここで注意しなければいけないことは「編集画面の画像」ではないということです。

プレビューに移動して、右上に表示されるURLに移動して画像のURLを取得するということです。

このURLを「" "」に記述します。記述と言いましても画像URLを1文字も間違えずに記述するには非常にめんどうな作業になりますので「画像アドレスをコピー」をうまく利用して、貼り付けるようにしてください。

Jimdoを利用していて、本文中にない画像をOGPで利用するには…

今から説明するのはひとつの方法として読んでください。

「ナビゲーションの編集」で1つメニューを追加してください。メニュー名は「画像置き場」や「img-src」として、必ず「非表示ページ」して「パスワード保護領域」の設定をしてください。

そのページに使用したい画像をいつもページ作成で行っているように「コンテンツを追加」の「画像」で配置してください。

詳しくは下の動画で確認してください。※テストサイト(JimdoFree)で操作しています。

ポイント

 「なかなか上手くいかない!」という方で多いのが「" ”」の片方を入力していなかったり、括っていなかったりする方が多く見受けられます。

「" "」で必要な文字列やURLを括ることを忘れないようにしましょう。

OGPがうまく表示されない時は…

「OGPの設定はできたみたいだけど、Facebookに投稿するときに、OGPで設定した画像ががうまく表示されない」という方はいらっしゃいませんか?

そんな時に利用するのが「オブジェクトデバッガー」というFacebookが提供しているツール(?)です。

JimdoCafe 久留米,OGP設定,オブジェクトデバッガー

非常にシンプルなツールです。

  • Input URL → ご自身のURL(Facebookに投稿する時のURL)
  • Show exisiting scrape information → 現在のOGPを確認
  • Fetch new scrape information → 入力したURLのOGPを再取得する

このツールを使えば、ほとんどのOGPの画像トラブルは解消されます。

※当記事は「Jimdoユーザー」などの非制作者向けに書いています。ご了承ください。